chore(deps): update dependency tailwindcss to v4

packages/blog/.vitepress/config.ts

@@ -10,6 +10,7 @@ import { generateRssFeed } from './rss-generator'
 import { generateOGPMeta } from './ogp'
 import { OGPImageGenerator } from './ogp-generator'
 import { readFileSync } from 'node:fs'
+import tailwindcss from "@tailwindcss/vite";
 
 const TITLE = 'CodingFeline'
 const DESCRIPTION = 'Thoughts, stories and ideas'
@@ -61,6 +62,11 @@ function detectPageTypeFromPath(path: string): 'post' | 'scrap' | 'other' {
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
+  vite: {
+    plugins: [
+      tailwindcss(),
+    ],
+  },
   title: TITLE,
   description: DESCRIPTION,
   lang: 'ja-JP',

packages/blog/.vitepress/theme/VPLayout.vue

@@ -68,5 +68,3 @@ if (typeof window !== 'undefined') {
     <VPFooter v-if="showNavigation" class="pt-24" />
   </div>
 </template>
-
-<style lang="postcss" module></style>

packages/blog/.vitepress/theme/components/VPHome.vue

@@ -50,7 +50,7 @@ function updatedAt(scrap: Scrap) {
       <li v-for="(scrap, index) in recentScraps" :key="index" class="py-3 px-8">
         <a :href="`/scraps/${scrap.number}/`" class="block">
           <p class="px-1 font-bold underline">{{ scrap.title }}</p>
-          <p>
+          <p class="mt-0.5">
             <VPScrapLabel :state="scrap.state" /><time
               :datetime="updatedAt(scrap)"
               class="text-sm text-gray-500 dark:text-gray-400"

packages/blog/.vitepress/theme/components/VPPost.vue

@@ -28,7 +28,9 @@ const { page, frontmatter } = useData()
   </div>
 </template>
 
-<style lang="postcss">
+<style>
+@reference "../style.css";
+
 .VPPost {
   .table-of-contents {
     @apply rounded-md border-2 border-gray-300 bg-gray-50 px-3;

packages/blog/.vitepress/theme/components/VPScraps.vue

@@ -23,7 +23,7 @@ function updatedAt(scrap: Scrap) {
         <a :href="`/scraps/${scrap.number}/`" class="block">
           <div>
             <span class="px-1 underline">{{ scrap.title }}</span>
-            <p class="block">
+            <p class="block mt-0.5">
               <VPScrapLabel :state="scrap.state" />
               <time>{{ updatedAt(scrap) }}</time>
             </p>

packages/blog/.vitepress/theme/style.css

@@ -1,13 +1,16 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 
 /**
  * Customize default theme styling by overriding CSS variables:
  * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
  */
 
+ @theme {
+  --color-amazon: #f6ce50;
+ }
+
 /**
  * Colors
  * -------------------------------------------------------------------------- */

packages/blog/package.json

@@ -16,6 +16,7 @@
     "@codingfeline/eslint-config": "workspace:*",
     "@resvg/resvg-js": "2.6.2",
     "@tailwindcss/typography": "0.5.16",
+    "@tailwindcss/vite": "4.0.2",
     "autoprefixer": "10.4.20",
     "date-fns": "4.1.0",
     "eslint": "9.19.0",
@@ -29,7 +30,7 @@
     "prettier-plugin-tailwindcss": "0.6.11",
     "satori": "0.12.1",
     "sitemap": "8.0.0",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.0.2",
     "typescript": "5.7.3",
     "typescript-eslint": "8.22.0",
     "vitepress": "1.6.3",

packages/blog/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "module": "esnext",
     "target": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "esModuleInterop": true,
     "strict": true,
     "skipLibCheck": true,