feat: upgrade tailwindcss to v4

app/globals.css

@@ -1,3 +1,23 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/typography';
+
+@custom-variant dark (&:is(.dark *));
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}

content/posts/deploying-next-apps.mdx

@@ -1,7 +1,7 @@
 ---
 title: Deploying Next.js Apps
 description: How to deploy your Next.js apps on Vercel.
-date: "2023-01-02"
+date: 2023-01-02
 ---
 
 Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.

content/posts/dynamic-routing-static-regeneration.mdx

@@ -1,7 +1,7 @@
 ---
 title: Dynamic Routing and Static Regeneration
 description: How to use incremental static regeneration using dynamic routes.
-date: "2023-03-04"
+date: 2023-03-04
 ---
 
 Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.

content/posts/preview-mode-headless-cms.mdx

@@ -1,7 +1,7 @@
 ---
 title: Preview Mode for Headless CMS
 description: How to implement preview mode in your headless CMS.
-date: "2023-04-09"
+date: 2023-04-09
 ---
 
 Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.

content/posts/server-client-components.mdx

@@ -1,7 +1,7 @@
 ---
 title: Server and Client Components
 description: React Server Components allow developers to build applications that span the server and client.
-date: "2023-01-08"
+date: 2023-01-08
 ---
 
 Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.

package.json

@@ -10,12 +10,12 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@tailwindcss/typography": "^0.5.9",
+    "@tailwindcss/postcss": "^4.1.8",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/node": "18.16.1",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.1",
     "@vercel/analytics": "^1.0.0",
-    "autoprefixer": "10.4.14",
     "contentlayer": "^0.3.2",
     "eslint": "8.39.0",
     "eslint-config-next": "13.3.1",
@@ -25,7 +25,7 @@
     "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tailwindcss": "3.3.2",
+    "tailwindcss": "4.1.8",
     "typescript": "5.0.4"
   }
 }