source inline doesn't work with custom css vars

[weirdlooop]

What version of Tailwind CSS are you using?

4.1.6

What build tool (or framework if it abstracts the build tool) are you using?

vite

What version of Node.js are you using?

20.13.0

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/brrHHhlSJp?size=540x720&file=css

Describe your issue

The brace syntax does not work for custom css vars defined in @theme, see below:

@source inline('{hover:,}{bg,text,border}-{primary,secondary,accent,neutral,info,success,warning,error}');

@theme {
  --color-primary: #00abb3;
  --color-secondary: #7fe9de;
  --color-accent: #90f;
  --color-neutral: #5e5d5d;
  --color-info: #09f;
  --color-success: #48bb78;
  --color-warning: #f80;
  --color-error: #e53e3e;
}

@layer base {
  [data-theme='dark'] {
    --color-primary: #00abb3;
    --color-secondary: #7fe9de;
    --color-accent: #90f;
    --color-neutral: #a8a7a7;
    --color-info: #09f;
    --color-success: #48bb78;
    --color-warning: #f80;
    --color-error: #e53e3e;
  }
}

The classes are simply not being generated in the final css. You can also verify this by using the link I provided to the playground. You can see the brace syntax is correct and does generate the classes, but tailwind fails to include them in the final css.

[philipp-spiess]

The repro does not have the @theme config but once I add it it seems fine: https://play.tailwindcss.com/PCn5djm3LS?size=540x720&file=css

[philipp-spiess]

What version of the @tailwindcss/vite or @tailwindcss/postcss plugin are you using? Maybe this is on an older version of Tailwind CSS that does not have support for @source inline(…) yet?

[weirdlooop]

@philipp-spiess thanks man. Sometimes pointing out the obvious is really helpful!