migrate to tailwindcss 4

Author: kennethnym

astro.config.mjs

@@ -4,12 +4,13 @@ import sitemap from "@astrojs/sitemap";
 import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
 
-import tailwind from "@astrojs/tailwind";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://astro.build/config
 export default defineConfig({
 	site: "https://kennethnym.com",
-	integrations: [mdx(), sitemap(), tailwind()],
+	integrations: [mdx(), sitemap()],
+
 	markdown: {
 		shikiConfig: {
 			// Choose from Shiki's built-in themes (or add your own)
@@ -19,4 +20,8 @@ export default defineConfig({
 		remarkPlugins: [remarkMath],
 		rehypePlugins: [rehypeKatex],
 	},
+
+	vite: {
+		plugins: [tailwindcss()],
+	},
 });

package.json

@@ -1,31 +1,31 @@
 {
-  "name": "website",
-  "type": "module",
-  "version": "0.0.1",
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro check && astro build",
-    "preview": "astro preview",
-    "astro": "astro"
-  },
-  "dependencies": {
-    "@astrojs/check": "^0.5.6",
-    "@astrojs/mdx": "^2.1.1",
-    "@astrojs/rss": "^4.0.5",
-    "@astrojs/sitemap": "^3.1.1",
-    "@astrojs/tailwind": "^5.1.0",
-    "astro": "^4.4.15",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.4.2"
-  },
-  "devDependencies": {
-    "@catppuccin/tailwindcss": "^0.1.6",
-    "@flydotio/dockerfile": "latest",
-    "@tailwindcss/typography": "^0.5.10",
-    "prettier": "^3.2.5",
-    "prettier-plugin-astro": "^0.13.0",
-    "rehype-katex": "^7.0.1",
-    "remark-math": "^6.0.0"
-  }
-}
+	"name": "website",
+	"type": "module",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "astro dev",
+		"start": "astro dev",
+		"build": "astro check && astro build",
+		"preview": "astro preview",
+		"astro": "astro"
+	},
+	"dependencies": {
+		"@astrojs/check": "^0.5.6",
+		"@astrojs/mdx": "^2.1.1",
+		"@astrojs/rss": "^4.0.5",
+		"@astrojs/sitemap": "^3.1.1",
+		"@tailwindcss/vite": "^4.1.11",
+		"astro": "^4.4.15",
+		"tailwindcss": "^4.1.11",
+		"typescript": "^5.4.2"
+	},
+	"devDependencies": {
+		"@catppuccin/tailwindcss": "1.0.0",
+		"@flydotio/dockerfile": "latest",
+		"@tailwindcss/typography": "^0.5.10",
+		"prettier": "^3.2.5",
+		"prettier-plugin-astro": "^0.13.0",
+		"rehype-katex": "^7.0.1",
+		"remark-math": "^6.0.0"
+	}
+}