From d2d411b745812e15d9cfae16a9c81d7a69c88856 Mon Sep 17 00:00:00 2001
From: dandedotdev <contact@dande.dev>
Date: Sat, 22 Feb 2025 17:35:58 +0800
Subject: [PATCH 1/3] refactor: migrate to tailwind v4

---
 css/tailwind.css   | 42 ++++++++++++++++++++++++++++++++++++++++-
 tailwind.config.js | 47 ----------------------------------------------
 2 files changed, 41 insertions(+), 48 deletions(-)
 delete mode 100644 tailwind.config.js

diff --git a/css/tailwind.css b/css/tailwind.css
index 13ff11533..56df6740b 100644
--- a/css/tailwind.css
+++ b/css/tailwind.css
@@ -1,5 +1,6 @@
 @import 'tailwindcss';
-@config '../tailwind.config.js';
+@plugin "@tailwindcss/forms";
+@plugin '@tailwindcss/typography';
 @source '../node_modules/pliny';
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -77,6 +78,45 @@
   }
 }
 
+@layer utilities {
+  .prose {
+    & a {
+      color: var(--color-primary-500);
+      &:hover {
+        color: var(--color-primary-600);
+      }
+      & code {
+        color: var(--color-primary-400);
+      }
+    }
+    & :where(h1, h2) {
+      font-weight: 700;
+      letter-spacing: var(--tracking-tight);
+    }
+    & h3 {
+      font-weight: 600;
+    }
+    & code {
+      color: var(--color-indigo-500);
+    }
+
+    &:where(.dark, .dark *) {
+      & a {
+        color: var(--color-primary-500);
+        &:hover {
+          color: var(--color-primary-400);
+        }
+        & code {
+          color: var(--color-primary-400);
+        }
+      }
+      & :where(h1, h2, h3, h4, h5, h6) {
+        color: var(--color-gray-100);
+      }
+    }
+  }
+}
+
 .task-list-item::before {
   @apply hidden;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index dc0ada7ec..000000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/* eslint-disable @typescript-eslint/no-require-imports */
-// @ts-check
-/** @type {import("tailwindcss").Config } */
-module.exports = {
-  theme: {
-    extend: {
-      typography: ({ theme }) => ({
-        DEFAULT: {
-          css: {
-            a: {
-              color: theme('--color-primary-500'),
-              '&:hover': {
-                color: theme('--color-primary-600'),
-              },
-              code: { color: theme('--color-primary-400') },
-            },
-            'h1,h2': {
-              fontWeight: '700',
-              letterSpacing: theme('--tracking-tight'),
-            },
-            h3: {
-              fontWeight: '600',
-            },
-            code: {
-              color: theme('--color-indigo-500'),
-            },
-          },
-        },
-        invert: {
-          css: {
-            a: {
-              color: theme('--color-pink-500'),
-              '&:hover': {
-                color: theme('--color-primary-400'),
-              },
-              code: { color: theme('--color-primary-400') },
-            },
-            'h1,h2,h3,h4,h5,h6': {
-              color: theme('--color-gray-100'),
-            },
-          },
-        },
-      }),
-    },
-  },
-  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
-}

From 03a8ec5c458d503ba722c1079835d3c228644e28 Mon Sep 17 00:00:00 2001
From: dandedotdev <contact@dande.dev>
Date: Sun, 23 Feb 2025 23:25:31 +0800
Subject: [PATCH 2/3] fix: revise the selector for code HTML element

---
 css/tailwind.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css/tailwind.css b/css/tailwind.css
index 56df6740b..11172e3df 100644
--- a/css/tailwind.css
+++ b/css/tailwind.css
@@ -96,7 +96,7 @@
     & h3 {
       font-weight: 600;
     }
-    & code {
+    & :where(code):not(.code-highlight) {
       color: var(--color-indigo-500);
     }
 

From 746893ffbae89dda6c74c10b75334dd751b86624 Mon Sep 17 00:00:00 2001
From: dandedotdev <contact@dande.dev>
Date: Mon, 24 Feb 2025 23:08:55 +0800
Subject: [PATCH 3/3] fix: correct the css selectors

---
 css/tailwind.css | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/css/tailwind.css b/css/tailwind.css
index 11172e3df..5a8a4c2f1 100644
--- a/css/tailwind.css
+++ b/css/tailwind.css
@@ -96,24 +96,24 @@
     & h3 {
       font-weight: 600;
     }
-    & :where(code):not(.code-highlight) {
+    & :where(code):not(pre code) {
       color: var(--color-indigo-500);
     }
+  }
 
-    &:where(.dark, .dark *) {
-      & a {
-        color: var(--color-primary-500);
-        &:hover {
-          color: var(--color-primary-400);
-        }
-        & code {
-          color: var(--color-primary-400);
-        }
+  .prose-invert {
+    & a {
+      color: var(--color-primary-500);
+      &:hover {
+        color: var(--color-primary-400);
       }
-      & :where(h1, h2, h3, h4, h5, h6) {
-        color: var(--color-gray-100);
+      & code {
+        color: var(--color-primary-400);
       }
     }
+    & :where(h1, h2, h3, h4, h5, h6) {
+      color: var(--color-gray-100);
+    }
   }
 }