What version of Tailwind CSS are you using?
4.0.0
What build tool (or framework if it abstracts the build tool) are you using?
vite-6.0.11
What version of Node.js are you using?
v23.4.0
What browser are you using?
Firefox, but it doesn't matter
What operating system are you using?
macOS
Reproduction URL
https://github.com/homeboldham/vite-tailwind-unknown-word
it's a minimal vite + tailwind setup (using vite react ts template) and adding tailwind v4 via @tailwindcss/vite plugin.
Describe your issue
Please check https://github.com/homeboldham/vite-tailwind-unknown-word/blob/main/src/App.tsx
If you have smth like h-[${h}px] in your source code,
AND
you have at-rule in your css. For example, I add font import here:
https://github.com/homeboldham/vite-tailwind-unknown-word/blob/main/src/index.css
then the build fails:
> vite-project@0.0.0 build
> tsc -b && vite build
vite v6.0.11 building for production...
✓ 15 modules transformed.
x Build failed in 100ms
error during build:
[vite:css] [postcss] /Users/foo/github/vite-tailwind-atrule/src/index.css:524:15: Unknown word
file: /Users/foo/github/vite-tailwind-atrule/src/index.css:524:14
at Input.error (/Users/foo/github/vite-tailwind-atrule/node_modules/postcss/lib/input.js:109:16)
at Parser.unknownWord (/Users/foo/github/vite-tailwind-atrule/node_modules/postcss/lib/parser.js:593:22)
at Parser.other (/Users/foo/github/vite-tailwind-atrule/node_modules/postcss/lib/parser.js:435:12)
at Parser.parse (/Users/foo/github/vite-tailwind-atrule/node_modules/postcss/lib/parser.js:470:16)
at parse (/Users/foo/foo/vite-tailwind-atrule/node_modules/postcss/lib/parse.js:11:12)
at new LazyResult (/Users/foo/github/vite-tailwind-atrule/node_modules/postcss/lib/lazy-result.js:133:16)
at Processor.process (/Users/foo/github/vite-tailwind-atrule/node_modules/postcss/lib/processor.js:53:14)
at compileCSS (file:///Users/foo/github/vite-tailwind-atrule/node_modules/vite/dist/node/chunks/dep-M1IYMR16.js:48784:59)
at async Object.transform (file:///Users/foo/github/vite-tailwind-atrule/node_modules/vite/dist/node/chunks/dep-M1IYMR16.js:48039:11)
at async transform (file:///Users/foo/github/vite-tailwind-atrule/node_modules/rollup/dist/es/shared/node-entry.js:19794:16)
Everything works if it's just @import or h-[${h}px] alone. I can reproduce it only if they're both there.
It's not about h-. I believe any dynamically created className can cause this.
(please disregard the rationale behind the component in the code – I simplified it to nonsensical to reproduce the issue).
What version of Tailwind CSS are you using?
4.0.0
What build tool (or framework if it abstracts the build tool) are you using?
vite-6.0.11
What version of Node.js are you using?
v23.4.0
What browser are you using?
Firefox, but it doesn't matter
What operating system are you using?
macOS
Reproduction URL
https://github.com/homeboldham/vite-tailwind-unknown-word
it's a minimal vite + tailwind setup (using vite react ts template) and adding tailwind v4 via
@tailwindcss/viteplugin.Describe your issue
Please check https://github.com/homeboldham/vite-tailwind-unknown-word/blob/main/src/App.tsx
If you have smth like
h-[${h}px]in your source code,AND
you have
at-rulein your css. For example, I add font import here:https://github.com/homeboldham/vite-tailwind-unknown-word/blob/main/src/index.css
then the build fails:
Everything works if it's just
@importorh-[${h}px]alone. I can reproduce it only if they're both there.It's not about
h-. I believe any dynamically created className can cause this.(please disregard the rationale behind the component in the code – I simplified it to nonsensical to reproduce the issue).