[WIP] Migrate to tailwindcss v4

components/ChromeXt/manager.vue

@@ -80,19 +80,17 @@ onMounted(() => {
 </script>
 
 <style lang="postcss" scoped>
-@tailwind base;
+@reference "tailwindcss";
 
-@layer base {
-	h1 {
-		@apply text-center text-2xl py-8;
-	}
+h1 {
+	@apply text-center text-2xl py-8;
+}
 
-	p {
-		@apply px-2 indent-2;
-	}
+p {
+	@apply px-2 indent-2;
+}
 
-	a {
-		@apply text-violet-400;
-	}
+a {
+	@apply text-violet-400;
 }
 </style>

components/chat/connect.vue

@@ -58,23 +58,21 @@ function savename() {
 </script>
 
 <style lang="postcss" scoped>
-@tailwind components;
+@reference "tailwindcss";
 
-@layer components {
-	.headtext {
-		@apply font-semibold text-lg my-3 min-w-[64] pl-5;
-	}
+.headtext {
+	@apply font-semibold text-lg my-3 min-w-[64] pl-5;
+}
 
-	.paratext {
-		@apply px-8 dark:text-gray-400 text-gray-600 whitespace-pre-wrap
-	}
+.paratext {
+	@apply px-8 dark:text-gray-400 text-gray-600 whitespace-pre-wrap
+}
 
-	input {
-		@apply bg-transparent focus:outline-none focus:shadow border-solid border border-gray-500 dark:border-gray-300 rounded-lg py-2 px-4 block w-2/3 appearance-none leading-normal
-	}
+input {
+	@apply bg-transparent focus:outline-none focus:shadow border-solid border border-gray-500 dark:border-gray-300 rounded-lg py-2 px-4 block w-2/3 appearance-none leading-normal
+}
 
-	button {
-		@apply bg-transparent hover:bg-indigo-500 text-sky-500 font-semibold hover:text-yellow-100 block py-2 px-4 border border-blue-500 hover:border-transparent rounded dark:text-cyan-300 border-solid
-	}
+button {
+	@apply bg-transparent hover:bg-indigo-500 text-sky-500 font-semibold hover:text-yellow-100 block py-2 px-4 border border-blue-500 hover:border-transparent rounded dark:text-cyan-300 border-solid
 }
 </style>

components/layouts/header.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="relative mb-16" v-if="frontmatter.header">
-    <h1 class="text-3xl text-center pb-16">{{ frontmatter.title }}</h1>
+    <h1>{{ frontmatter.title }}</h1>
     <div class="text-sm mb-2 text-cyan-500 hover:text-black">
       <a
         v-for="tag in frontmatter.tags"
@@ -44,3 +44,11 @@ function formatDateByLocale(date: Date, lang: string) {
   return localDate;
 }
 </script>
+
+<style lang="postcss" scoped>
+@reference "tailwindcss";
+
+h1 {
+    @apply text-3xl text-center pb-16;
+}
+</style>

content/.vitepress/theme/tailwind.postcss

@@ -1,7 +1,11 @@
+@import "tailwindcss";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+@config "../../../tailwind.config.js";
+
 .cards {
   @apply rounded flex-shrink-0 max-w-xs mt-10;
 }
@@ -35,36 +39,35 @@ html[lang="zh"] body #app {
   font-family: Noto Sans, Noto Sans CJK SC;
 }
 
-@layer components {
-  #app .content .content-container .main div[class*="_zh_blog"] div {
-    @apply prose-headings:font-[Kaiti]
+#app .content .content-container .main div[class*="_zh_blog"] div {
+  @apply prose-headings:font-[Kaiti]
 		prose-headings:font-normal
 		prose-h1:font-[Xingkai]
 		prose-h3:font-[Xinwei];
-    p > sup > a {
-      text-decoration: none;
-    }
-    section.footnotes > ol.footnotes-list {
-      font-family: STXihei;
-    }
-    h2 + hr.footnotes-sep {
-      display: none;
-    }
-    blockquote {
-      @apply prose-p:text-slate-900
+  p > sup > a {
+    text-decoration: none;
+  }
+  section.footnotes > ol.footnotes-list {
+    font-family: Xihei;
+  }
+  h2 + hr.footnotes-sep {
+    display: none;
+  }
+  blockquote {
+    @apply prose-p:text-slate-900
 		prose-p:dark:text-violet-200;
-      p {
-        @apply font-[Fangsong] my-1 font-semibold not-italic;
-      }
-      p::before,
-      p::after {
-        content: none;
-      }
+    p {
+      @apply font-[Fangsong] my-1 font-semibold not-italic;
+    }
+    p::before,
+    p::after {
+      content: none;
     }
   }
+}
 
-  #app .content .content-container .main .vp-doc div {
-    @apply prose prose-stone lg:prose-lg
+#app .content .content-container .main .vp-doc div {
+  @apply prose prose-stone lg:prose-lg
 		dark:prose-invert
 		prose-em:italic
 		prose-a:text-green-400
@@ -75,36 +78,35 @@ html[lang="zh"] body #app {
 		prose-a:underline-offset-4
 		prose-p:text-justify
 		prose-p:indent-[2em];
-    .header-anchor {
-      @apply text-green-200;
-    }
-    ul > li > p,
-    ol > li > p {
-      text-indent: 0;
-    }
-    code::before {
-      display: none;
-    }
-    code::after {
-      display: none;
-    }
-    a {
-      @apply hover:text-blue-500 hover:decoration-4 dark:hover:text-indigo-300;
-    }
+  .header-anchor {
+    @apply text-green-200;
   }
-
-  #app .content .content-container .main .vp-doc div li.footnote-item p {
-    @apply indent-0;
+  ul > li > p,
+  ol > li > p {
+    text-indent: 0;
+  }
+  code::before {
+    display: none;
+  }
+  code::after {
+    display: none;
+  }
+  a {
+    @apply hover:text-blue-500 hover:decoration-4 dark:hover:text-indigo-300;
   }
+}
 
-  #chat-room .render-html {
-    @apply prose prose-zinc dark:prose-invert prose-p:my-0;
-    a[href^="#"] {
-      @apply text-sm dark:text-gray-600 text-gray-200;
-    }
-    p + blockquote {
-      @apply my-2;
-    }
+#app .content .content-container .main .vp-doc div li.footnote-item p {
+  @apply indent-0;
+}
+
+#chat-room .render-html {
+  @apply prose prose-zinc dark:prose-invert prose-p:my-0;
+  a[href^="#"] {
+    @apply text-sm dark:text-gray-600 text-gray-200;
+  }
+  p + blockquote {
+    @apply my-2;
   }
 }
 

content/en/writing/2019-12-21-Workflow.md

@@ -93,13 +93,14 @@ For `wayland` users, I have a `zsh` function in
 <!-- see [my instruction](https://github.com/JingMatrix/Shell/blob/master/toc/README.md) for details. -->
 
 <style scoped>
-@tailwind base;
-@layer base {
-	input {
-		@apply bg-transparent focus:shadow-md border-2 border-gray-300 rounded-lg py-2 px-4 inline-block w-1/2 appearance-none leading-normal
-	}
-	button {
-		@apply bg-transparent ml-10 hover:bg-blue-500 text-blue-700 dark:text-green-400 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded
-	}
+@reference "tailwindcss";
+input:focus {
+    @apply shadow-md
+}
+input {
+    @apply bg-transparent border-2 border-gray-300 rounded-lg py-2 px-4 inline-block w-1/2 appearance-none leading-normal
+}
+button {
+    @apply bg-transparent ml-10 hover:bg-blue-500 text-blue-700 dark:text-green-400 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded
 }
 </style>

package.json

@@ -15,14 +15,14 @@
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/vue-fontawesome": "^3.0.8",
     "@mdit-vue/types": "^2.1.0",
+    "@tailwindcss/postcss": "^4.0.0",
     "@tailwindcss/typography": "^0.5.16",
     "@types/chrome": "^0.0.279",
     "@types/katex": "^0.16.7",
     "@types/markdown-it": "^14.1.2",
     "@types/markdown-it-footnote": "^3.0.4",
     "@types/node": "^22.10.10",
     "@vite-pwa/vitepress": "^0.5.3",
-    "autoprefixer": "^10.4.20",
     "cssnano": "^7.0.6",
     "filesize": "^10.1.6",
     "gray-matter": "^4.0.3",
@@ -31,7 +31,7 @@
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-texmath": "^1.0.0",
     "postcss": "^8.5.1",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "vite-plugin-pwa": "^0.20.5",
     "vite-plugin-rss": "^0.0.6",
     "vitepress": "1.4.3",