chore: Upgrade Tailwind to v4 and switch to Vite

Use the new @tailwindcss/vite plugin instead of the deprecated @astrojs/tailwind plugin

Author: thomas-kuntz

astro.config.mjs

@@ -1,9 +1,12 @@
 import { defineConfig } from "astro/config";
 import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
-import tailwind from "@astrojs/tailwind";
+import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
   site: "https://astro-nano-demo.vercel.app",
-  integrations: [mdx(), sitemap(), tailwind()],
+  integrations: [mdx(), sitemap()],
+  vite: {
+    plugins: [tailwindcss()],
+  },
 });

package.json

@@ -17,10 +17,10 @@
     "@astrojs/mdx": "^4.3.3",
     "@astrojs/rss": "4.0.12",
     "@astrojs/sitemap": "^3.4.2",
-    "@astrojs/tailwind": "^6.0.2",
     "@fontsource/inter": "^5.0.17",
     "@fontsource/lora": "^5.0.16",
-    "@tailwindcss/typography": "^0.5.10",
+    "@tailwindcss/typography": "0.5.0-alpha.3",
+    "@tailwindcss/vite": "^4.1.11",
     "@typescript-eslint/eslint-plugin": "^7.3.1",
     "@typescript-eslint/parser": "^7.3.1",
     "astro": "^5.12.8",
@@ -30,7 +30,7 @@
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "sharp": "^0.33.3",
     "tailwind-merge": "^2.2.2",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^4.1.11",
     "typescript": "^5.4.2"
   }
 }