feat: tailwind 4 in astro

Author: peterpeterparker

templates/astro-starter/astro.config.mjs

@@ -2,14 +2,14 @@ import { defineConfig } from "astro/config";
 import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
 import juno from "@junobuild/vite-plugin";
-import tailwind from "@astrojs/tailwind";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://example.com",
-  integrations: [mdx(), sitemap(), tailwind()],
+  integrations: [mdx(), sitemap()],
   vite: {
-    plugins: [juno({ container: true })],
+    plugins: [tailwindcss(), juno({ container: true })],
   },
   devToolbar: {
     enabled: false,

templates/astro-starter/package.json

@@ -15,13 +15,13 @@
     "@astrojs/mdx": "^4.0.1",
     "@astrojs/rss": "^4.0.10",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/tailwind": "^5.1.3",
     "@junobuild/config": "^0.0.17",
     "@junobuild/vite-plugin": "^0.0.19",
+    "@tailwindcss/vite": "^4.0.0",
     "astro": "^5.0.3",
     "prettier": "^3.4.2",
     "prettier-plugin-astro": "^0.14.1",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.4.3"
   }
 }

templates/astro-starter/src/styles/global.css

@@ -1,3 +1,6 @@
+@import "tailwindcss";
+@config "../../tailwind.config.mjs";
+
 @font-face {
   font-family: "JetBrains Mono";
   font-style: normal;