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,37 +1,82 @@
-@tailwind base;
+@import "tailwindcss";
-@tailwind components;
-@tailwind utilities;
 
-h1 {
+@theme {
-  @apply text-4xl;
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
 }
 
-h2 {
+@layer base {
-  @apply text-2xl;
+  h1 {
-}
+    @apply text-4xl;
+  }
 
-a {
+  h2 {
-  @apply underline;
+    @apply text-2xl;
-}
+  }
 
-li {
+  a {
-  @apply list-disc;
+    @apply underline;
-  @apply list-inside;
+  }
-  @apply text-left;
-}
 
-p {
+  li {
-  @apply text-justify;
+    @apply list-disc;
-  @apply mb-2;
+    @apply list-inside;
-}
+    @apply text-left;
+  }
 
-img {
+  p {
-  @apply mx-auto;
+    @apply text-justify;
-}
+    @apply mb-2;
+  }
 
-blockquote,
+  img {
-blockquote p {
+    @apply mx-auto;
-  @apply text-center;
+  }
+
+  blockquote,
+  blockquote p {
+    @apply text-center;
+  }
+
+  blockquote {
+    border-left: 5px solid var(--accent);
+    box-shadow: inset 4px 0 10px -4px var(--accent);
+    padding-left: 1rem;
+    margin: 1rem;
+  }
+
+  figcaption {
+    @apply text-sm;
+    @apply text-center;
+    @apply italic;
+  }
+
+  pre {
+    @apply text-left;
+    @apply bg-gray-100;
+    @apply p-2;
+    @apply rounded-md;
+    @apply border;
+    @apply border-gray-300;
+    @apply overflow-x-auto;
+    @apply whitespace-pre-wrap;
+    @apply break-words;
+    @apply text-sm;
+    @apply font-mono;
+  }
+
+  code:not(pre code) {
+    @apply text-sm;
+    @apply font-mono;
+    @apply bg-gray-100;
+    @apply p-1;
+    @apply rounded-md;
+    @apply border;
+    @apply border-gray-300;
+    @apply overflow-x-auto;
+    @apply whitespace-pre-wrap;
+    @apply break-words;
+  }
 }
 
 .is-dark blockquote,
@@ -39,48 +84,8 @@ blockquote p {
   color: var(--foreground);
 }
 
-blockquote {
-  border-left: 5px solid var(--accent);
-  box-shadow: inset 4px 0 10px -4px var(--accent);
-  padding-left: 1rem;
-  margin: 1rem;
-}
-
 @layer utilities {
   .text-balance {
     text-wrap: balance;
   }
 }
-
-figcaption {
-  @apply text-sm;
-  @apply text-center;
-  @apply italic;
-}
-
-pre {
-  @apply text-left;
-  @apply bg-gray-100;
-  @apply p-2;
-  @apply rounded-md;
-  @apply border;
-  @apply border-gray-300;
-  @apply overflow-x-auto;
-  @apply whitespace-pre-wrap;
-  @apply break-words;
-  @apply text-sm;
-  @apply font-mono;
-}
-
-code:not(pre code) {
-  @apply text-sm;
-  @apply font-mono;
-  @apply bg-gray-100;
-  @apply p-1;
-  @apply rounded-md;
-  @apply border;
-  @apply border-gray-300;
-  @apply overflow-x-auto;
-  @apply whitespace-pre-wrap;
-  @apply break-words;
-}

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;