-
Notifications
You must be signed in to change notification settings - Fork 4.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
v4. build fails with dynamically created classnames + at-rules #15853
Comments
As an aside,
Instead, you could consider doing this instead: const H_VALUES = {
10: 'h-[10px]',
20: 'h-[20px]',
};
function Height({ h }: {h?: 10 | 20}) {
const heightStyles = h ? H_VALUES[h] : '';
return (
<div className={`${heightStyles}`}>
Height
</div>
)
} However, regards to the error, perhaps a more graceful handling of the situation could be enacted indeed. |
Thanks @wongjn Yes, I expected tailwind to not recognize such classname constructs and skip them. Which it actually does if you remove the font import from |
Hey! We can improve the error message here, but the issue remains that we don't support dynamic class names so you will need another solution to the problem. It's true that in v3 it worked slightly different where it didn't always throw an error (but it wouldn't generate anything in the CSS either). |
@RobinMalfait a simple improvement in the error message would hugely improve the DX. Hundreds of files, each with tens of lines of code. How should I search for the error? |
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:
Everything works if it's just
@import
orh-[${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).
The text was updated successfully, but these errors were encountered: