migrate to tailwindcss 4

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"
+	}
+}

src/components/BaseHead.astro

@@ -1,7 +1,7 @@
 ---
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
-import '../styles/global.css';
+import "../styles/global.css";
 
 interface Props {
 	title: string;
@@ -11,7 +11,7 @@ interface Props {
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
-const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
+const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
 ---
 
 <!-- Global Metadata -->
@@ -23,11 +23,19 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
 <link rel="canonical" href={canonicalURL} />
 
 <!-- RSS autodiscovery -->
-<link rel="alternate" type="application/rss+xml" title={title}  href={`${Astro.site}rss.xml`} />
+<link
+	rel="alternate"
+	type="application/rss+xml"
+	title={title}
+	href={`${Astro.site}rss.xml`}
+/>
 
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+	href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap"
+	rel="stylesheet"
+/>
 
 <!-- Primary Meta Tags -->
 <title>{title}</title>

src/components/CommandLine.astro

@@ -1,15 +1,15 @@
-<div id="command-line" class="w-full flex flex-row bg-base">
+<div id="command-line" class="w-full flex flex-row bg-ctp-base">
 	<input
 		aria-hidden="true"
 		id="command-line-input"
 		type="text"
-		class="bg-base focus:outline-none active:outline-none cursor-default caret-transparent m-0"
+		class="bg-ctp-base focus:outline-none active:outline-none cursor-default caret-transparent m-0"
 	/>
 	<div id="caret" aria-hidden="true" class="bg-text inline-block">&nbsp;</div>
 	<p
 		aria-hidden="true"
 		id="status-text"
-		class="absolute w-full h-full bg-base hidden italic"
+		class="absolute w-full h-full bg-ctp-base hidden italic"
 	>
 	</p>
 </div>
@@ -94,7 +94,7 @@
 		} else {
 			statusText.innerHTML = `E492: Not an editor command: ${command}`;
 			statusText.classList.remove("hidden");
-			statusText.classList.add("text-red");
+			statusText.classList.add("text-ctp-red");
 		}
 	}
 

src/components/Link.astro

@@ -6,9 +6,9 @@ const { href, class: className, ...props } = Astro.props;
 	href={href}
 	class:list={[
 		"underline",
-		"text-blue",
-		"hover:text-lavender",
-		"visited:text-mauve",
+		"text-ctp-blue",
+		"hover:text-ctp-lavender",
+		"visited:text-ctp-mauve",
 		className,
 	]}><slot /></a
 >

src/components/LuaLine.astro

@@ -4,10 +4,10 @@ import CommandLine from "./CommandLine.astro";
 ---
 
 <div class="hidden sm:block absolute w-full bottom-0">
-	<footer class="w-full bg-crust flex flex-row leading-tight">
+	<footer class="w-full bg-ctp-mantle flex flex-row leading-tight">
 		<span
 			id="status-indicator"
-			class="bg-blue font-bold text-base inline-block leading-tight"
+			class="bg-ctp-blue font-bold text-ctp-base inline-block leading-tight"
 			>&nbsp;NORMAL&nbsp;</span
 		>
 		<div id="project-list" class="flex flex-row bg-surface0">
@@ -40,14 +40,14 @@ import CommandLine from "./CommandLine.astro";
 
 	cmdLine.addEventListener("cmdmodeenabled", () => {
 		statusIndicator.innerHTML = "&nbsp;COMMAND&nbsp;";
-		statusIndicator.classList.remove("bg-blue");
-		statusIndicator.classList.add("bg-peach");
+		statusIndicator.classList.remove("bg-ctp-blue");
+		statusIndicator.classList.add("bg-ctp-peach");
 	});
 
 	cmdLine.addEventListener("cmdmodedisabled", () => {
 		statusIndicator.innerHTML = "&nbsp;NORMAL&nbsp;";
-		statusIndicator.classList.add("bg-blue");
-		statusIndicator.classList.remove("bg-peach");
+		statusIndicator.classList.add("bg-ctp-blue");
+		statusIndicator.classList.remove("bg-ctp-peach");
 	});
 
 	window.addEventListener("openhelp", () => {

src/layouts/BlogPost.astro

@@ -18,7 +18,7 @@ const {
 ---
 
 <!doctype html>
-<html lang="en" class="latte dark:mocha">
+<html lang="en" class="dark:mocha">
 	<head>
 		<BaseHead title={title} description={description} image={heroImage} />
 		{
@@ -31,7 +31,7 @@ const {
 		}
 	</head>
 
-	<body class="blog bg-base text-text max-w-prose m-auto p-8">
+	<body class="blog bg-ctp-base text-ctp-text max-w-prose m-auto p-8">
 		<Header />
 		<main class="py-10">
 			<article>

src/pages/index.astro

@@ -13,12 +13,12 @@ const posts = (await getBlogs()).sort(
 ---
 
 <!doctype html>
-<html lang="en" class="latte dark:mocha bg-base">
+<html lang="en" class="dark:mocha bg-ctp-base">
 	<head>
 		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
 	</head>
 	<body
-		class="tilde-background text-text h-screen m-auto sm:flex items-center justify-center sm:overflow-hidden"
+		class="tilde-background text-ctp-text h-screen m-auto sm:flex items-center justify-center sm:overflow-hidden"
 	>
 		<div class="visible p-8 sm:hidden">
 			<header>

src/styles/global.css

@@ -1,3 +1,10 @@
+@import "tailwindcss";
+@import "@catppuccin/tailwindcss/mocha.css";
+
+@plugin "@tailwindcss/typography";
+
+@source inline("text-ctp-red");
+
 @font-face {
 	font-family: "CommitMono";
 	src: url("/fonts/CommitMono-400-Regular.otf") format("opentype");