build(deps): upgrade tailwindcss to v4

Author: ansidev

Diff for: package.json

@@ -14,6 +14,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.0.0",
     "@vueuse/core": "^12.0.0",
     "counter-analytics-vue": "^1.0.0",
     "github-slugger": "^2.0.0",
@@ -62,13 +63,11 @@
     "markdown-it-link-attributes": "^4.0.1",
     "markdown-it-shiki": "^0.8.1",
     "markdown-it-toc-done-right": "^4.2.0",
-    "postcss": "^8.4.38",
-    "postcss-nested": "^7.0.0",
     "prettier": "^3.2.5",
     "rollup": "^4.17.2",
     "sass": "^1.77.0",
     "shiki": "^2.0.0",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.0.0",
     "ts-node": "^10.9.2",
     "tsx": "^4.9.3",
     "typescript": "^5.4.5",

Diff for: pnpm-lock.yaml

@@ -1,3 +1,6 @@
+@import 'tailwindcss';
+@config '../../../tailwind.config.cjs';
+
 @import './markdown.css';
 
 html,
@@ -20,6 +23,10 @@ html.dark {
   pointer-events: none;
 }
 
+@utility bg-blue-500 {
+  background-color: var(--color-blue-500);
+}
+
 #nprogress .bar {
   @apply bg-blue-500 opacity-75;
 

Diff for: postcss.config.cjs

@@ -15,7 +15,7 @@ const toggleLocale = () => switchLocale(availableLocales, locale)
   <button
     :aria-label="t('button.toggle_locale')"
     type="button"
-    class="w-8 h-8 p-1 ml-1 mr-1 rounded sm:ml-2"
+    class="w-8 h-8 p-1 ml-1 mr-1 rounded-sm sm:ml-2"
     @click="toggleLocale"
   >
     <Icon icon="bi:translate" :width="size" :height="size" />

Diff for: src/assets/css/main.scss renamed to src/assets/css/main.css

@@ -16,7 +16,7 @@ useServerHead({
   <div class="md:hidden">
     <button
       type="button"
-      class="w-8 h-8 py-1 ml-1 mr-1 rounded"
+      class="w-8 h-8 py-1 ml-1 mr-1 rounded-sm"
       :aria-label="t('button.toggle_mobile_menu')"
       @click="onToggleMobileMenu"
     >
@@ -33,7 +33,7 @@ useServerHead({
       <button
         type="button"
         aria-label="toggle modal"
-        class="fixed w-full h-full cursor-auto focus:outline-none"
+        class="fixed w-full h-full cursor-auto focus:outline-hidden"
         @click="onToggleMobileMenu"
       />
       <nav class="fixed h-full mt-8">

Diff for: src/components/LocaleSwitcher.vue

@@ -14,7 +14,7 @@ const { t } = useI18n()
   <button
     :aria-label="t('button.toggle_dark')"
     type="button"
-    class="w-8 h-8 p-1 ml-1 mr-1 rounded sm:ml-2"
+    class="w-8 h-8 p-1 ml-1 mr-1 rounded-sm sm:ml-2"
     @click="toggleDark()"
   >
     <Icon :icon="isDark ? 'bi:moon-fill' : 'bi:sun-fill'" :width="size" :height="size" />

Diff for: src/components/MobileMenu.vue

@@ -47,7 +47,7 @@ onUnmounted(() => {
 
 <template>
   <!-- Ported from Nextra Docs Theme with customizations -->
-  <div class="site-toc order-last hidden flex-shrink-0 px-4 text-sm xl:block">
+  <div class="site-toc order-last hidden shrink-0 px-4 text-sm xl:block">
     <div ref="tocAnchor" class="h-0 m-0 p-0" />
     <div
       ref="tocContent"

Diff for: src/components/ThemeSwitcher.vue

@@ -48,7 +48,7 @@ defineProps({
       `dark:text-${darkTextColor}`,
       `text-${fontSize}`,
       `font-${fontWeight}`,
-      rounded ? 'rounded' : '',
+      rounded ? 'rounded-sm' : '',
     ]"
   >
     <slot />

Diff for: src/components/Toc.vue

@@ -77,7 +77,7 @@ const remove = (e: Event) => emit('removed', e)
       `dark:text-${darkTextColor}`,
       `text-${fontSize}`,
       `font-${fontWeight}`,
-      rounded ? 'rounded' : '',
+      rounded ? 'rounded-sm' : '',
     ]"
   >
     <slot />
@@ -88,7 +88,7 @@ const remove = (e: Event) => emit('removed', e)
         `hover:bg-${buttonHoverBackgroundColor}`,
         `dark:hover:bg-${buttonDarkHoverBackgroundColor}`,
         `text-${fontSize}`,
-        rounded ? 'rounded' : '',
+        rounded ? 'rounded-sm' : '',
       ]"
       :data-dismiss-target="`#${computedId}`"
       :aria-label="t('button.remove')"

Diff for: src/components/TwBadge.vue

@@ -5,8 +5,7 @@ import type { UserModule } from './types'
 import App from './App.vue'
 import generatedRoutes from '~pages'
 
-import './tailwind.css'
-import './assets/css/main.scss'
+import './assets/css/main.css'
 
 const routes = setupLayouts(generatedRoutes)
 

Diff for: src/components/TwDismissableBadge.vue

@@ -22,7 +22,7 @@ const { t } = useI18n()
       </p>
       <Link href="/">
         <button
-          class="inline px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-blue-600 border border-transparent rounded-lg shadow focus:outline-none focus:shadow-outline-blue hover:bg-blue-700 dark:hover:bg-blue-500"
+          class="inline px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-blue-600 border border-transparent rounded-lg shadow-sm focus:outline-hidden focus:shadow-outline-blue hover:bg-blue-700 dark:hover:bg-blue-500"
         >
           {{ t('back_to_home') }}
         </button>

Diff for: src/main.ts

@@ -40,7 +40,7 @@ const sortedCategories = computed(() => Object.keys(categories.value).sort((a, b
       <div v-if="Object.keys(categories).length === 0" class="mt-2 mb-2 mr-5">
         {{ t('no_category') }}
       </div>
-      <div v-for="category in sortedCategories" :key="category" class="mt-2 mb-2 mr-2 px-2 py-1 border border-gray-500 rounded">
+      <div v-for="category in sortedCategories" :key="category" class="mt-2 mb-2 mr-2 px-2 py-1 border border-gray-500 rounded-sm">
         <Category :text="category" />
         <Link
           class="-ml-2 text-sm font-semibold text-gray-600 uppercase dark:text-gray-300"

Diff for: src/pages/[...all].vue

@@ -40,7 +40,7 @@ const sortedTags = computed(() => Object.keys(tags.value).sort((a, b) => tags.va
       <div v-if="Object.keys(tags).length === 0" class="mt-2 mb-2 mr-5">
         {{ t('no_tag') }}
       </div>
-      <div v-for="tag in sortedTags" :key="tag" class="mt-2 mb-2 mr-2 px-2 py-1 border border-gray-500 rounded">
+      <div v-for="tag in sortedTags" :key="tag" class="mt-2 mb-2 mr-2 px-2 py-1 border border-gray-500 rounded-sm">
         <Tag :text="tag" />
         <Link
           class="-ml-2 text-sm font-semibold text-gray-600 uppercase dark:text-gray-300"

Diff for: src/pages/categories/index.vue

@@ -19,10 +19,11 @@ import Shiki from 'markdown-it-shiki'
 import Anchor from 'markdown-it-anchor'
 import VueDevTools from 'vite-plugin-vue-devtools'
 import generateSitemap from 'vite-ssg-sitemap'
+import TailwindCss from '@tailwindcss/vite'
 // import frontmatterToc from './src/builders/frontmatter-toc'
 // import excerpt from './src/builders/excerpt'
-import { getPostMeta } from './src/helpers/post'
-import siteConfig from './src/site.config'
+import { getPostMeta } from './src/helpers/post.js'
+import siteConfig from './src/site.config.js'
 
 if (process.env.NODE_ENV === 'development') {
   dns.setDefaultResultOrder('verbatim')
@@ -259,6 +260,7 @@ export default defineConfig(({ mode }) => {
 
       // https://github.com/webfansplz/vite-plugin-vue-devtools
       VueDevTools(),
+      TailwindCss(),
     ],
     // https://github.com/antfu/vite-ssg
     ssgOptions: {