Upgrade to Tailwind 4: It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin

[zealous hazel]

Rather frustratingly I am receiving the following error when trying to migrate to Tailwind 4:

It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

My changes:

diff --git a/astro.config.mjs b/astro.config.mjs
index bc23939..9e6c031 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -3,6 +3,7 @@ import starlight from "@astrojs/starlight";
 import tailwind from "@astrojs/tailwind";
 import { shield } from "@kindspells/astro-shield";
 import starlightUtils from "@lorenzo_lewis/starlight-utils";
+import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "astro/config";
 import starlightBlog from "starlight-blog";
 import starlightCoolerCredit from "starlight-cooler-credit";
@@ -68,6 +69,7 @@ export default defineConfig({
                         },
                     },
                     customImage: "./src/assets/heart.png",
+                    customImageAlt: "heart",
                 }),
             ],
             sidebar: await generateSidebar(),
@@ -84,4 +86,7 @@ export default defineConfig({
         }),
     ],
     site: "https://www.waterfox.net",
+    vite: {
+        plugins: [tailwindcss()],
+    },
 });
diff --git a/src/assets/global.css b/src/assets/global.css
index ca25a14..80fd96c 100644
--- a/src/assets/global.css
+++ b/src/assets/global.css
@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 @layer base {
     html,

As you can see, no PostCSS involvement at all, so I'm confused as to where this error is coming from?

[mystic falcon]

Hi! It seems you have both the Vite plugin and the Tailwind integration. Removing the Tailwind integration could fix the error I think...

In your diff I see:

import tailwind from "@astrojs/tailwind";

This should be removed, and since you have this import, I guess you also have something like:

integrations: [tailwind()]

The Tailwind integration should be removed as well.

@astrojs/tailwind is deprecated and the Vite plugin should be used instead. So I guess this is related but I could be wrong, I'm not a Tailwind user. 😅

[solid relic]

That was my initial thought as well but it's hard to tell from the diff file

Could you please share your current astro.config instead of just the diff?

@zealous hazel Pinged the wrong person in my last message 😅

Sorry Alex Mercer for the ping >.<

[zealous hazel]

Yep that was it! Removed the package with my package manager and forgot to remove in the astro config

Weird it didn't error out with the package removed!

Thanks for the help gents

[solid relic]

Np