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]

Hello—Happy to try and help! I'll warn, though, that my philosophy is pretty similar to that found here:

https://themeshaper.com/2013/10/11/dont-update-your-theme/

I also wrote a documentation page on updating _tw:

https://underscoretw.com/docs/updating/

As an example from my own work, the underscoretw.com website was still using Tailwind 2.1 until five months ago, and now that it's using Tailwind 3.4, I imagine it will continue to do so for years.

I'll be using Tailwind 4 on all new projects moving forward, and whenever I do a major redesign of an existing project.

All of that said, I would understand upgrading if you were working on a single project as the majority of your work. I work for agencies, and on many projects, so it tends not to be justifiable to bill for upgrading Tailwind for the sake of DX.

So, for those for whom it makes sense to update, here's what I would do:

1. Review the release notes to understand what has changed
2. Decide which elements of the update you want to carry out
3. Look at the corresponding commits on GitHub:
   • Update to Tailwind 4
   • Remove PostCSS
   • Update npm dependencies
   • Update npm scripts
4. Work through those changes to the extent it makes sense for your project

You may want to update ESLint as well, as that will let you get all of your dependencies updated.

If you're relying on glob importing of component CSS files, you'd need to update the existing PostCSS setup. Similarly, if you need to support Sass-style nesting, or even CSS-native nesting in older browsers, you'll need to add a PostCSS pipeline for that (and integrate Tailwind in that pipeline, which is well documented on their website).

Hopefully that helps! I'd be happy to answer any specific questions you may have about the above.

[mattdanielreeves]

Thanks Greg! I'm currently building a theme that isn't used on any production sites, but will soon, so I figure I should go ahead and make the switch to 4 now.

[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.