package.json

@@ -31,7 +31,8 @@
     "eslint": "9.39.3",
     "eslint-config-next": "16.1.6",
     "postcss": "8.5.6",
-    "tailwindcss": "3.4.19",
+    "@tailwindcss/postcss": "4.2.0",
+    "tailwindcss": "4.2.0",
     "typescript": "5.9.3"
   }
 }

postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    "@tailwindcss/postcss": {},
   },
 };
 

src/app/globals.css

@@ -1,7 +1,11 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+}
+
+@layer base {
   h1 {
     @apply text-4xl;
   }
@@ -34,11 +38,6 @@ blockquote p {
     @apply text-center;
   }
 
-.is-dark blockquote,
-.is-dark blockquote p {
-  color: var(--foreground);
-}
-
   blockquote {
     border-left: 5px solid var(--accent);
     box-shadow: inset 4px 0 10px -4px var(--accent);
@@ -46,12 +45,6 @@ blockquote {
     margin: 1rem;
   }
 
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
-
   figcaption {
     @apply text-sm;
     @apply text-center;
@@ -84,3 +77,15 @@ code:not(pre code) {
     @apply whitespace-pre-wrap;
     @apply break-words;
   }
+}
+
+.is-dark blockquote,
+.is-dark blockquote p {
+  color: var(--foreground);
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

tailwind.config.ts

@@ -1,18 +0,0 @@
-import type { Config } from "tailwindcss";
-
-export default {
-  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-      },
-    },
-  },
-  plugins: [],
-} satisfies Config;