Skip to content
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]: variable-based classes only seem to use initial value, and not the theme values #13367

Closed
JesseKoldewijn opened this issue Mar 26, 2024 · 6 comments

Comments

@JesseKoldewijn
Copy link

What version of Tailwind CSS are you using?

v4.0.0-alpha.10

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

Vite (Remix)

I dont expect the remix part of my setup is related to the issue at hand. But you never know.

What version of Node.js are you using?

v20.11.1

What browser are you using?

Chrome (latest), Brave (latest), Firefox (latest)

Latest version of the browsers mentioned above, recorded at 03/16/14

What operating system are you using?

Arch, Ubuntu, Win11

Tested on a Win11 host, Ubuntu (WSL) and an Arch linux host.

Reproduction URL

Tw3 Alpha Remix

Describe your issue

My setup was inspired by the following post by @adamwathan [X/Twitter post] (sorry for the ping, doing so because the code at hand used your post as example) (https://x.com/adamwathan/status/1770979061721919598?s=20) where as far as I can see, everything should work in theory. But right now the oxide engine (I expect this part of the alpha version is related to the issue at hand) doesnt seem to handle the themes as expected.

I want to add, I might be doing something wrong in this setup so if there's anything from my end not used or setup correctly, feel free to mention!

@JesseKoldewijn
Copy link
Author

I want to add that placed a workaround in the reproduction repo because I also use it for a demo tomorrow at my dayjob.

@adamwathan
Copy link
Member

Hey! I think the issue here is you need to be on @tailwindcss/vite@v4.0.0-alpha.10 (you're currently on alpha.9) but when I install alpha 10 the site never even loads, so there's definitely some issue here. I wouldn't be surprised if there's some conflict with our Vite plugin and the Remix Vite plugin that we need to track down. Will take a look this week!

@adamwathan
Copy link
Member

Related: vitejs/vite#16135 (comment)

@rogrile
Copy link

rogrile commented Mar 26, 2024

Something similar is happening on tailwind 3 as well.. I cannot set variables with multiple words like --primary-color: 255 255 255 or --primary-50: 255 255 255 but --primary: 255 255 255 works as expected. So maybe there's another issue?

@thecrypticace
Copy link
Contributor

We've released @tailwindcss/vite@v4.0.0-alpha.11 which works around the issue in Vite.

Your reproduction appears to work after updating.

You can run the following to update:

pnpm install -D tailwindcss@next @tailwindcss/vite@next

Thanks for reporting!

@JesseKoldewijn
Copy link
Author

We've released @tailwindcss/vite@v4.0.0-alpha.11 which works around the issue in Vite.

Your reproduction appears to work after updating.

You can run the following to update:


pnpm install -D tailwindcss@next @tailwindcss/vite@next

Thanks for reporting!

What is the merged PR? Would love to read a bit through the related changes to get a better grasp on how that specific side of the tw project works. Thanks in advance🤙

JesseKoldewijn added a commit to JesseKoldewijn/Tw4-Alpha-Remix that referenced this issue Mar 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants