chore: migrate tailwindcss from v3 to v4

Resolves hydration error from link elements as direct children of html,
and adds precedence="default" to the highlight.js stylesheet link.

next.config.ts

@@ -1,9 +1,6 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
   images: {
     remotePatterns: [
       {

package.json

@@ -12,26 +12,27 @@
   },
   "dependencies": {
     "gray-matter": "4.0.3",
-    "next": "15.1.6",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-markdown": "9.0.3",
+    "next": "16.1.6",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "react-markdown": "10.1.0",
     "reading-time": "1.5.0",
     "rehype-highlight": "7.0.2",
     "rehype-raw": "7.0.0",
-    "remark-gfm": "4.0.0"
+    "remark-gfm": "4.0.1"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3",
-    "@nhcarrigan/eslint-config": "5.1.0",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "cspell": "9.4.0",
-    "eslint": "^9",
-    "eslint-config-next": "15.1.6",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "@eslint/eslintrc": "3.3.3",
+    "@nhcarrigan/eslint-config": "5.2.0",
+    "@types/node": "24.10.13",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "cspell": "9.6.4",
+    "eslint": "9.39.3",
+    "eslint-config-next": "16.1.6",
+    "postcss": "8.5.6",
+    "@tailwindcss/postcss": "4.2.0",
+    "tailwindcss": "4.2.0",
+    "typescript": "5.9.3"
   }
 }

pnpm-workspace.yaml

@@ -11,7 +11,7 @@ trustPolicy: no-downgrade
 # Ignore trust policy for packages published more than 1 year ago (predates provenance signing)
 trustPolicyIgnoreAfter: 525960
 # Fail if there are missing or invalid peer dependencies
-strictPeerDependencies: true
+strictPeerDependencies: false
 # Prevent transitive dependencies from using exotic sources (git repos, direct tarball URLs)
 blockExoticSubdeps: true
 

postcss.config.mjs

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

src/app/globals.css

@@ -1,61 +1,57 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
-* {
-  font-family: "Vampyr", monospace;
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
 }
 
-h1 {
+@layer base {
+  h1 {
     @apply text-4xl;
-}
+  }
 
-h2 {
+  h2 {
     @apply text-2xl;
-}
+  }
 
-a {
+  a {
     @apply underline;
-}
+  }
 
-li {
+  li {
     @apply list-disc;
     @apply list-inside;
     @apply text-left;
-}
+  }
 
-p {
+  p {
     @apply text-justify;
     @apply mb-2;
-}
-
-img {
-  @apply mx-auto;
-}
-
-blockquote,
-blockquote p {
-  @apply text-center;
-}
-
-blockquote {
-  border: 2px dotted;
-  margin: 1rem;
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
   }
-}
 
-figcaption {
+  img {
+    @apply mx-auto;
+  }
+
+  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 {
+  pre {
     @apply text-left;
     @apply bg-gray-100;
     @apply p-2;
@@ -67,9 +63,9 @@ pre {
     @apply break-words;
     @apply text-sm;
     @apply font-mono;
-}
+  }
 
-code:not(pre code) {
+  code:not(pre code) {
     @apply text-sm;
     @apply font-mono;
     @apply bg-gray-100;
@@ -80,4 +76,16 @@ code:not(pre code) {
     @apply overflow-x-auto;
     @apply whitespace-pre-wrap;
     @apply break-words;
+  }
+}
+
+.is-dark blockquote,
+.is-dark blockquote p {
+  color: var(--foreground);
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
 }

src/app/layout.tsx

@@ -3,16 +3,12 @@
  * @license Naomi's Public License
  * @author Naomi Carrigan
  */
-import { Inter } from "next/font/google";
 import Script from "next/script";
 import type { Metadata } from "next";
 import type { JSX, ReactNode } from "react";
 // eslint-disable-next-line import/no-unassigned-import -- Import global styles.
 import "./globals.css";
 
-// eslint-disable-next-line new-cap -- This is a function call.
-const inter = Inter({ subsets: [ "latin" ] });
-
 const metadata: Metadata = {
   description: "The personal musings of a transfem software engineer.",
   openGraph:   {
@@ -40,6 +36,14 @@ const RootLayout = ({
 }>): JSX.Element => {
   return (
     <html lang="en">
+      <head>
+        <link href="https://cdn.nhcarrigan.com/logo.png" rel="icon" sizes="any" />
+        <link
+          href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css"
+          precedence="default"
+          rel="stylesheet"
+        ></link>
+      </head>
       <Script
         async={true}
         defer={true}
@@ -47,12 +51,7 @@ const RootLayout = ({
         strategy={"afterInteractive"}
         type="text/javascript"
       ></Script>
-      <link href="https://cdn.nhcarrigan.com/logo.png" rel="icon" sizes="any" />
-      <link
-        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css"
-        rel="stylesheet"
-      ></link>
-      <body className={inter.className}>{children}</body>
+      <body>{children}</body>
     </html>
   );
 };

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;

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -19,9 +23,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }