Astro 5.0 has been released and has come with some pretty nice features such as:

• Using Vite v6
• Type safety around environment variables
• Optimised speed and memory usage for markdown and MDX content
• Server-side islands, which is by far the most impressive feature

However, Astro’s tailwind direct plugin has been deprecated in favour for using Vite Tailwind plugin, which was released in Tailwind v4, to integrate with Astro.

TailwindCSS v4 was also released recently and brings some changes significant changes:

• Themes as CSS variables
• CSS based tailwind configuration
• Better performance, 100x faster 🚀
• Simpler support and install + Vite plugin
• and more!

With all of that, upgrading Astro and Tailwind has never been easier since both offer upgrade tools, which will scan your code and make relevant changes, but if you’re currently using Tailwind v3 and Astro v4, it’s important to run Tailwind upgrade before Astro.

1. Upgrade Tailwind:

pnpm dlx @tailwindcss/upgrade

2. Tailwind might not update some of the class renames, so it’s always good to scan your code to see if it updated them, e.g. rounded-sm should now change to rounded-xs. Renamed utilities:

3. Uninstall Astro’s tailwind plugin:

pnpm uninstall @astrojs/tailwind

...
import tailwind from "@astrojs/tailwind";
...

export default defineConfig({
...
  integrations: [
    sitemap(),
    tailwind(),
    mdx()
  ],
...
});

4. Upgrade Astro:

pnpm dlx @astrojs/upgrade

If you were using hybrid rendering, this has now been merged with static as default

...

export default defineConfig({
...
  output: "hybrid"
...
});

5. Lastly you should be able to re-add tailwind back into the mix:

pnpm dlx astro add tailwind

Now you should be able to run the project locally and hopefully nothing has broken or has changed, good luck!