#Upgrading tailwindcss to v4

31 messages · Page 1 of 1 (latest)

graceful linden
#

Hey folks how'd y'all manage your upgrade from v3 to v4 tailwindcss, I'm getting these errors

kb@kb-mac v4 % npx @tailwindcss/upgrade@next --force
≈ tailwindcss v4.0.2

│ Searching for CSS files in the current directory and its subdirectories… 

│ ↳ Could not determine configuration file for: `./src/styles/global.css` 
│   Update your stylesheet to use `@config` to specify the correct configuration file explicitly and then run the 
│   upgrade tool again. 

│ ↳ Could not determine configuration file for: `./src/styles/theme.css` 
│   Update your stylesheet to use `@config` to specify the correct configuration file explicitly and then run the 
│   upgrade tool again. 

kb@kb-mac v4 % npx @tailwindcss/upgrade@next --force
≈ tailwindcss v4.0.2

│ Searching for CSS files in the current directory and its subdirectories… 

│ ↳ Failed to resolve import: `tailwindcss` in `./global.css`. Skipping. 

│ ↳ Failed to resolve import: `tailwindcss` in `./theme.css`. Skipping. 

│ ↳ Could not determine configuration file for: `./src/styles/global.css` 
│   Update your stylesheet to use `@config` to specify the correct configuration file explicitly and then run the 
│   upgrade tool again. 

│ ↳ Could not determine configuration file for: `./src/styles/theme.css` 
│   Update your stylesheet to use `@config` to specify the correct configuration file explicitly and then run the
short shuttle
#

https://docs.astro.build/en/guides/styling/#tailwind

There are alot of breaking changes from Tailwind 3 to 4 it`s a Vite plugin now. I had to remove Tailwind and install the Vite plugin and it works, be aware of the many changes that are to long to list here, Good luck!

Docs
Styles and CSS

Learn how to style components in Astro with scoped styles, external CSS, and tooling like Sass and PostCSS.

graceful linden
#

🙏🏽

#

So, way to go is very manual or stay with 3 until? 😃

#

@short shuttle So, you remove old tailwind, pretend no tailwind, remove the config, all refs to tw (except the now not functional html classes) and then install the vite plugin, deal the breaking changes, and voila?

short shuttle
#

Exactly, maybe in the future the automatic upgrade works

#

That’s how I did it

dim badge
#

It's super manual to upgrade unfortunately. Also many features you could use in Tailwind v3 with Astro you can no longer do with v4, such as using apply in keyframes, and using variants like "dark:" in astro component <style> tags

I've been upgrading all my templates over the past week and it's a pain

keen furnace
#

I mean it's not that manual

#

Install the new stuff, move your theme from tailwind config to your global CSS file

#

Not much more to it than that

dim badge
#

Except exactly what I said above. And if you want to use tailwind in style tags you need to add some extra imports to them. To facilitate that you need to separate your tailwind theme definition into a different file from your global styles. And have your global styles import that tailwind theme. It's basically a bunch of little "gotchas" since things no longer work the same in astro components

keen furnace
#

Okay but my counter point is why bother combining tailwind with style tags or using the @apply directives?

Mine as well just use normal CSS at that point

Even the tailwind team regrets ever adding @apply so I generally avoid it anyway, but more so for my point above, why not just use CSS at that point?

#

You're issue seems specific to your specific usage and not tailwind as a whole

Overall my upgrades have been exactly as I described above, install the new packages, update the config, move my theme to global.css

dim badge
keen furnace
#

You can just use their variables though

#

I guess making themes is probably different

#

I would never have 10 footer links, I would have 1 map over an array of 10 footer links

dim badge
# keen furnace You can just use their variables though

You can, but like I said, you then have to figure out what the exact css they use is, and type that out. That's what I have to resort to now, at least for keyframes since you can't use apply in them anymore. I'm surprised we could in the first place, but it definitely worked in Tailwind v3.

But also, you're arguing about best method to implement things. My point is purely that, assuming you aren't doing things exactly as the ideal is, you will likely have problems with direct upgrades due to various changes

#

Can definitely be done, and I think the result is better. It's just not super easy 🙂

keen furnace
#

I feel like it's the opposite haha

#

You are using tailwind in unintended ways (outside of html classes) thus causing difficulties with your upgrades 😛

#

Bleh, fun discussion but I have to go to bed its almost 4am for me houston_dead

dim badge
#

I mean, apply does exist! And it worked before so it was supported lol. I'm not sure where the changes actually lie - if it's some tailwind change, or if the astro tailwind integration was doing some magic on the backend

Another thing I've run into is that if you add a class with JS, say "rotate-180" for a chevron in a dropdown menu, tailwind optimizes the class out if it's not used elsewhere by default. Previously this seemed handled either by tailwind v3 or the astro tailwind integration

#

4am! Quite late (early?)

keen furnace
#

Interesting on that second one, I'll have to keep an eye out

As far as apply goes.... When the devs actively discouraged using it and publicly admitted to regretting even making it.... Well I consider that unintended usage at that point xD

keen furnace
graceful linden
graceful linden
graceful linden