Tailwind v4 support?

[luuktimmermans]

Hi, I'm just wondering, does _tw support Tailwind v4 yet?

[gregsullivan]

Not yet! My approach to previous releases has been to launch support on or as close to the launch date as possible. I've read the "what's changed" document, and there isn't anything that worries me, but I don't want to push everyone to the beta version.

If the release candidate stage lasts for long enough, there's a world in which I add support for it then. It will always be one or the other, though—there won't be any legacy support for version 3 once version 4 support launches, which is why I want to wait until launch or very close to it.

[luuktimmermans]

Alright! What would I need to do to test this out? Would this be easy to set up?

[gregsullivan]

I wish I had a better answer for you, but really it's going to take reading this:

https://tailwindcss.com/docs/v4-beta

And then working through the different items that need to be changed. You'll want to switch to CSS-first configuration, stripping out most of the tailwind.config.js file. That file will still be necessary, I think, for some of the conditional stuff. I haven't looked into using the same configuration file to generate multiple CSS files, which is what _tw does.

I think there will be some minor changes to the PostCSS config file as well.

If I do a rough version of this to test things out, I'll post my findings!

[luuktimmermans]

Any news on this? Since v4 had officially been released. I’m curious!

[gregsullivan]

That's a great time to do it! I have one project not yet in production that I'm considering updating, too, so we're on the same page for sure.

[mjblacker]

I just did the same thing for a recently started project.

I effectively did what Greg mentioned going through his different commits to see roughly what had changed. There are some tailwind changes too that you'll need to adjust for. EG. bg-opacity doesn't exist anymore

There are likely some defaults/fonts that might also need adjusting based on the move from the js config to css config (not convinced this was the correct choice for Tailwind after using it) but doing this to remove the js file makes it much more like a base V4 install.

[gregsullivan]

There are likely some defaults/fonts that might also need adjusting based on the move from the js config to css config

Are you thinking about the loss of the ability to do things like this:

'sans': ['"Really Sans"', ...defaultTheme.fontFamily.sans],

Or did you have something else in mind?

I personally miss the above approach. (If anyone has found a way of accomplishing it in Tailwind 4, I'd be interested to hear about it!) On the other hand, I also lost the ability to turn Preflight on and off via tailwind.config.js, and I ended up feeling better about the more explicit approach _tw now needs to use.

Who knows, I may come around to the same way of thinking when it comes to pulling the default font families from Tailwind, in time.

[mjblacker]

Yes that font example is the exact issue I've had and use on nearly all projects.

[gregsullivan]

I spent more time confirming there's isn't a better way, and I'm fairly confident there is not. I think my new best practice is just going to be keeping this link bookmarked so I can copy and then add to these values:

https://tailwindcss.com/docs/theme#default-theme-variable-reference

I suppose one option here would be to include a copy of the font ones in _tw's default theme for easy additions. Any thoughts on that approach?