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

[Bug?]: @tailwindcss/vite (v4 beta) breaking after dev server restart #1693

Open
birkskyum opened this issue Dec 17, 2024 · 2 comments
Open
Labels
bug Something isn't working

Comments

@birkskyum
Copy link
Contributor

birkskyum commented Dec 17, 2024

Current behavior 😯

In tailwind 4, which is still only in beta (but it would be good to fix this before they hit stable), there are now two ways to install tailwind.

  • Traditional: Using a Postcss plugin - works as expected
  • New: Using a Vite plugin (works in astro, but dev server struggle in solid-start)

The vite plugin works as expected when making a prod build, and for the dev server on a clean reload, but if the dev server is restart in solid-start, the style will be broken. To get it working again, it will be necessary to do either of the following:

  • delete node_modules/.vinxi and then restart dev server
  • modify/re-save ./src/app.css - triggering this file reload is enough to make it work again

With Astro (v5), there are no issues with restarting the dev server using @tailwindcss/vite with Solid.
With TanStack Start (vinxi 0.4.3/0.5.1), there are no issues either.

Expected behavior 🤔

I expected the tailwind plugin to load correctly on dev server restart.

Steps to reproduce 🕹

There's a repo here with multiple implementations:
https://github.com/birkskyum/tailwind-vite-repro

  • Astro with Vite plugin (and solid) - working
  • TanStack Start with Vite plugin (and vinxi) - working
  • Solid Start with Postcss plugin - working
  • Solid Start with Vite plugin - breaking after dev server restart

I can reproduce this issue with vinxi 0.4.3 / 0.5.0 / 0.5.1 and overrides with vite 5/6

The working output looks like this:
Screenshot 2024-12-17 at 04 18 59

The broken output will look like this:

Screenshot 2024-12-17 at 04 19 15

Context 🔦

No response

Your environment 🌎

No response

@birkskyum birkskyum added the bug Something isn't working label Dec 17, 2024
@birkskyum birkskyum changed the title [Bug?]: @tailwindcss/vite (still beta) breaking on dev server after reload [Bug?]: @tailwindcss/vite (still beta) breaking after dev server restart Dec 17, 2024
@birkskyum birkskyum changed the title [Bug?]: @tailwindcss/vite (still beta) breaking after dev server restart [Bug?]: @tailwindcss/vite (v4 beta) breaking after dev server restart Dec 17, 2024
@atilafassina
Copy link
Member

I'm not sure I followed all the way.

So Tanstack Start is on Vinxi 0.5.1 and Vite 5 -- and that works, right?
And we're on Vinxi 0.5.1 and Vite 6 -- which doesn't work.

Is that the takeaway? Should we pin down Vite to 5 would the issue goes away for us as well?

@birkskyum
Copy link
Contributor Author

birkskyum commented Dec 20, 2024

No, the takeaway here isn't related to vite/vinxi versions - i see same behavior across versions

The takeaway is that tailwindcss v4 doesn't work when installed through the vite plugin in solid-start, but it does work in astro (indicating the tailwind vite plugin is working) and it does work in tanstack start (indicating it might even be a solid-start rather than a vinxi problem)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants