From 8a8bf19e35797adac1e0ce6d2434472efc84bf37 Mon Sep 17 00:00:00 2001
From: HPCesia <me@hpcesia.com>
Date: Fri, 7 Feb 2025 21:39:05 +0800
Subject: [PATCH] build(deps): upgrade TailwindCSS to v4

- Upgrade TailwindCSS to v4
- Upgrade daisyUI to v5 beta.
- Delete the PostCSS TailwindCSS compatibility layer.
- Delete Sass dependency because TailwindCSS v4 will generate nested CSS, so we don't need Sass anymore.
---
 astro.config.mjs                            |   6 +-
 package.json                                |   8 +-
 postcss.config.mjs                          |  12 --
 src/components/Navbar.astro                 |   4 +-
 src/components/PageFooter.astro             |  10 +-
 src/components/Search.astro                 |   4 +-
 src/components/SideToolBar.astro            |   4 +-
 src/components/TimeArchives.astro           |   2 +-
 src/components/Timeline.astro               |  24 +--
 src/components/comment/Twikoo.astro         |   2 +-
 src/components/misc/CategoryBar.astro       |   2 +-
 src/components/misc/License.astro           |   2 +-
 src/components/search/Pagefind.astro        |  12 +-
 src/components/utils/Markdown.astro         |   6 +-
 src/components/widgets/MetaIcon.astro       |   5 +-
 src/components/widgets/Pagination.astro     |   2 +-
 src/components/widgets/PostCard.astro       |   6 +-
 src/components/widgets/PostCardCover.astro  |  26 ++-
 src/components/widgets/ProfileCard.astro    |   6 +-
 src/components/widgets/ReadMoreButton.astro |  24 ++-
 src/components/widgets/TOC.astro            |  12 +-
 src/layouts/GlobalLayout.astro              |   7 +-
 src/layouts/GridLayout.astro                |   2 +-
 src/pages/about.astro                       |   2 +-
 src/pages/archives/categories/index.astro   |   4 +-
 src/pages/archives/tags/[tag]/[page].astro  |   2 +-
 src/pages/archives/tags/index.astro         |   4 +-
 src/pages/posts/[article].astro             |   2 +-
 src/plugins/remark-excerpt.js               |  14 +-
 src/styles/global.css                       |  46 ++++++
 src/styles/globals.scss                     |  11 --
 src/styles/{markdown.scss => markdown.css}  |  52 +++---
 src/styles/{twikoo.scss => twikoo.css}      | 167 +++++++++++---------
 stylelint.config.mjs                        |  12 +-
 tailwind.config.mjs                         |  46 ------
 35 files changed, 251 insertions(+), 299 deletions(-)
 delete mode 100644 postcss.config.mjs
 create mode 100644 src/styles/global.css
 delete mode 100644 src/styles/globals.scss
 rename src/styles/{markdown.scss => markdown.css} (83%)
 rename src/styles/{twikoo.scss => twikoo.css} (64%)
 delete mode 100644 tailwind.config.mjs

diff --git a/astro.config.mjs b/astro.config.mjs
index 2dd1524..5f3b614 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -5,7 +5,7 @@ import { remarkExcerpt } from './src/plugins/remark-excerpt';
 import { remarkReadingTime } from './src/plugins/remark-reading-time.mjs';
 import { rehypeHeadingIds } from '@astrojs/markdown-remark';
 import sitemap from '@astrojs/sitemap';
-import tailwind from '@astrojs/tailwind';
+import tailwindcss from '@tailwindcss/vite';
 import icon from 'astro-icon';
 import pagefind from 'astro-pagefind';
 import { defineConfig } from 'astro/config';
@@ -21,7 +21,6 @@ export default defineConfig({
   output: 'static',
   trailingSlash: 'ignore',
   integrations: [
-    tailwind({ nesting: true, applyBaseStyles: false }),
     icon(),
     sitemap({ filter: (page) => !page.includes('/archives/') && !page.includes('/about/') }),
     pagefind(),
@@ -76,4 +75,7 @@ export default defineConfig({
       rehypeWrapTables,
     ],
   },
+  vite: {
+    plugins: [tailwindcss()],
+  },
 });
diff --git a/package.json b/package.json
index 5976dc1..8467518 100644
--- a/package.json
+++ b/package.json
@@ -16,15 +16,15 @@
     "@astrojs/markdown-remark": "^6.1.0",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/tailwind": "^5.1.5",
     "@iconify-json/material-symbols": "^1.2.14",
     "@iconify-json/mdi": "^1.2.3",
+    "@tailwindcss/vite": "^4.0.4",
     "astro": "^5.2.5",
     "astro-compress": "2.3.5",
     "astro-icon": "^1.1.5",
     "astro-pagefind": "^1.8.0",
     "autoprefixer": "^10.4.20",
-    "daisyui": "^4.12.23",
+    "daisyui": "5.0.0-beta.7",
     "mdast-util-to-string": "^4.0.0",
     "postcss-load-config": "^6.0.1",
     "reading-time": "^1.5.0",
@@ -32,9 +32,8 @@
     "rehype-mathjax": "^6.0.0",
     "remark-github-beta-blockquote-admonitions": "^3.1.1",
     "remark-math": "^6.0.0",
-    "sass": "^1.84.0",
     "sharp": "^0.33.5",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.4",
     "typescript": "^5.7.3",
     "unist-util-visit": "^5.0.0"
   },
@@ -55,7 +54,6 @@
     "prettier-plugin-tailwindcss": "^0.6.11",
     "stylelint": "^16.14.1",
     "stylelint-config-html": "^1.1.0",
-    "stylelint-config-standard-scss": "^14.0.0",
     "typescript-eslint": "^8.23.0"
   }
 }
\ No newline at end of file
diff --git a/postcss.config.mjs b/postcss.config.mjs
deleted file mode 100644
index e6b3a3c..0000000
--- a/postcss.config.mjs
+++ /dev/null
@@ -1,12 +0,0 @@
-import postcssImport from 'postcss-import';
-import tailwindcss from 'tailwindcss';
-import postcssNesting from 'tailwindcss/nesting/index.js';
-
-/** @type {import('postcss-load-config').Config} */
-export default {
-  plugins: {
-    'postcss-import': postcssImport, // to combine multiple css files
-    'tailwindcss/nesting': postcssNesting,
-    tailwindcss: tailwindcss,
-  },
-};
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 67834b1..97bfd71 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -19,7 +19,7 @@ if (!title) title = 'Astral Halo';
     <!-- Navbar -->
     <div
       id="navbar"
-      class="navbar fixed z-20 flex h-16 w-full items-center bg-base-200/50 backdrop-blur-md"
+      class="navbar bg-base-200/50 fixed z-20 flex h-16 w-full items-center backdrop-blur-md"
     >
       <div class="navbar-start">
         <Button id="site-name" href="/" class="group btn-ghost">
@@ -94,7 +94,7 @@ if (!title) title = 'Astral Halo';
   <div class="drawer-side z-50">
     <!-- Sidebar -->
     <label for="sidebar-drawer" class="drawer-overlay"></label>
-    <ul class="menu min-h-full w-[min(calc(100%-3rem),20rem)] bg-base-200 p-4">
+    <ul class="menu bg-base-200 min-h-full w-[min(calc(100%-3rem),20rem)] p-4">
       <li><DarkModeButton class="btn-ghost text-xl" showText={true} /></li>
       {
         navbarConfig.navbarCenterItems.map((item) => (
diff --git a/src/components/PageFooter.astro b/src/components/PageFooter.astro
index f32c835..f1a2dd3 100644
--- a/src/components/PageFooter.astro
+++ b/src/components/PageFooter.astro
@@ -4,9 +4,9 @@ import { footerConfig, profileConfig } from '@/config';
 const currentYear = new Date().getFullYear();
 ---
 
-<footer class="footer mt-auto flex-shrink-0"></footer>
+<footer class="footer mt-auto shrink-0"></footer>
 <footer
-  class="footer border-t border-base-300 bg-base-200 px-10 py-4 text-base text-base-content"
+  class="footer border-base-300 bg-base-200 text-base-content flex flex-col justify-between border-t px-10 py-4 text-lg md:flex-row"
 >
   <aside class="items-center">
     <p>
@@ -16,7 +16,7 @@ const currentYear = new Date().getFullYear();
       <a href="/about/" class="font-bold">{profileConfig.name}</a>
     </p>
   </aside>
-  <nav class="flex flex-row md:place-self-center md:justify-self-end">
+  <nav class="flex flex-row">
     {
       footerConfig.rightItems.map((item) => (
         <span>
@@ -36,12 +36,12 @@ const currentYear = new Date().getFullYear();
   </nav>
 </footer>
 
-<style lang="scss">
+<style>
   a {
     @apply duration-150;
 
     &:hover {
-      @apply text-primary;
+      color: var(--color-primary);
     }
   }
 </style>
diff --git a/src/components/Search.astro b/src/components/Search.astro
index 366e5bf..0cce38e 100644
--- a/src/components/Search.astro
+++ b/src/components/Search.astro
@@ -7,7 +7,7 @@ import Pagefind from './search/Pagefind.astro';
 <dialog id="search_modal" class="modal" transition:persist>
   <div class="modal-box border-base-200 bg-base-300">
     <form method="dialog">
-      <button class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2">✕</button>
+      <button class="btn btn-circle btn-ghost btn-sm absolute top-2 right-2">✕</button>
     </form>
     <div class="w-full p-4">
       {
@@ -21,7 +21,7 @@ import Pagefind from './search/Pagefind.astro';
         })()
       }
     </div>
-    <div class="relative mt-auto w-full flex-shrink-0 pt-4 text-center">
+    <div class="relative mt-auto w-full shrink-0 pt-4 text-center">
       Powered by {
         searchConfig.provider === 'pagefind' ? (
           <a href="https://pagefind.app" target="_blank" class="text-primary">
diff --git a/src/components/SideToolBar.astro b/src/components/SideToolBar.astro
index 7288dc0..8842bf8 100644
--- a/src/components/SideToolBar.astro
+++ b/src/components/SideToolBar.astro
@@ -5,7 +5,7 @@ import Button from './widgets/Button.astro';
 import DarkModeButton from './widgets/DarkModeButton.astro';
 ---
 
-<div id="side-toolbar" class="fixed bottom-10 right-0 z-30 grid grid-cols-1 gap-2">
+<div id="side-toolbar" class="fixed right-0 bottom-10 z-30 grid grid-cols-1 gap-2">
   <div
     id="stb-hide"
     class="grid translate-x-full grid-cols-1 gap-2 pr-4 duration-500 ease-in-out"
@@ -24,7 +24,7 @@ import DarkModeButton from './widgets/DarkModeButton.astro';
     {
       articleConfig.toc && (
         <Fragment>
-          <Button id="stb-toc" class="btn-circle btn-primary btn-sm hidden xl:!hidden">
+          <Button id="stb-toc" class="btn-circle btn-primary btn-sm hidden xl:hidden!">
             <Icon name="material-symbols:toc-rounded" />
           </Button>
           <div
diff --git a/src/components/TimeArchives.astro b/src/components/TimeArchives.astro
index 0b85ee9..0a47ed1 100644
--- a/src/components/TimeArchives.astro
+++ b/src/components/TimeArchives.astro
@@ -25,7 +25,7 @@ const { group } = Astro.props;
           <Timeline items={group.months} class="ml-4">
             <fragment slot="title">
               {(monthGroup: MonthArchives) => (
-                <div class="mb-6 ml-6 mt-3 flex items-center justify-between">
+                <div class="mt-3 mb-6 ml-6 flex items-center justify-between">
                   <h2 class="text-2xl font-bold">{monthGroup.month}</h2>
                 </div>
               )}
diff --git a/src/components/Timeline.astro b/src/components/Timeline.astro
index d175673..9e9576f 100644
--- a/src/components/Timeline.astro
+++ b/src/components/Timeline.astro
@@ -38,36 +38,18 @@ const renderedItems = await Promise.all(
 );
 ---
 
-<div class:list={['relative flex flex-col', className]}>
+<div class:list={['relative flex flex-col empty:min-h-12', className]}>
   <div
-    class="timeline absolute left-4 top-0 h-full w-0.5 bg-gradient-to-b from-blue-500 to-purple-500"
+    class="timeline absolute top-0 left-4 h-full w-0.5 bg-linear-to-b from-blue-500 to-purple-500 opacity-60"
   >
   </div>
   {
     renderedItems.map((item) => (
       <div class="relative mb-12 pl-12">
-        <div class="timeline-dot absolute left-2 top-5 h-4 w-4 rounded-full bg-blue-500" />
+        <div class="absolute top-5 left-2 h-4 w-4 rounded-full bg-blue-500 shadow-lg transition-transform duration-300 hover:scale-125" />
         <Fragment set:html={item.title} />
         <Fragment set:html={item.body} />
       </div>
     ))
   }
 </div>
-
-<style>
-  .flex-col:empty {
-    @apply min-h-[3rem];
-  }
-
-  .timeline {
-    @apply opacity-60;
-  }
-
-  .timeline-dot {
-    @apply shadow-lg transition-transform duration-300;
-  }
-
-  .timeline-dot:hover {
-    @apply scale-125;
-  }
-</style>
diff --git a/src/components/comment/Twikoo.astro b/src/components/comment/Twikoo.astro
index b68eaeb..905244d 100644
--- a/src/components/comment/Twikoo.astro
+++ b/src/components/comment/Twikoo.astro
@@ -1,5 +1,5 @@
 ---
-import '@/styles/twikoo.scss';
+import '@/styles/twikoo.css';
 import { CDN } from '@constants/cdn.mjs';
 ---
 
diff --git a/src/components/misc/CategoryBar.astro b/src/components/misc/CategoryBar.astro
index 5026eb3..7f4afd0 100644
--- a/src/components/misc/CategoryBar.astro
+++ b/src/components/misc/CategoryBar.astro
@@ -10,7 +10,7 @@ interface Props {
 const { categories, currentCategory } = Astro.props;
 ---
 
-<div id="category-bar" class="card card-bordered mb-4 w-full border-2">
+<div id="category-bar" class="card card-bordered border-base-300 mb-4 w-full border-2">
   <div class="card-body flex flex-row items-center gap-2 overflow-auto px-2 py-3">
     <a
       href={`/`}
diff --git a/src/components/misc/License.astro b/src/components/misc/License.astro
index 8c28006..6c37c86 100644
--- a/src/components/misc/License.astro
+++ b/src/components/misc/License.astro
@@ -29,7 +29,7 @@ const infomations = [
 ];
 ---
 
-<div class="card card-bordered my-4 border-2 bg-primary/25">
+<div class="card card-bordered border-base-300 bg-primary/25 my-4 border-2">
   <div class="card-body grid grid-cols-2 gap-x-4 p-4">
     {
       infomations.map((info) => (
diff --git a/src/components/search/Pagefind.astro b/src/components/search/Pagefind.astro
index 48ddd4d..b5114c7 100644
--- a/src/components/search/Pagefind.astro
+++ b/src/components/search/Pagefind.astro
@@ -12,13 +12,10 @@ const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
 />
 
 <template id="pagefind-result-template">
-  <a
-    class="group w-full rounded-md p-2 duration-150 hover:bg-primary hover:bg-opacity-30"
-    href="#"
-  >
+  <a class="group hover:bg-primary/30 w-full rounded-md p-2 duration-150" href="#">
     <div class="flex flex-row items-center gap-1 text-center">
-      <span class="text-lg duration-150 group-hover:text-primary">Fake Result</span>
-      <Icon name="material-symbols:chevron-right" class="text-lg text-primary" />
+      <span class="group-hover:text-primary text-lg duration-150">Fake Result</span>
+      <Icon name="material-symbols:chevron-right" class="text-primary text-lg" />
     </div>
     <div id="pagefind-result-template-excerpt" class="text-sm opacity-60">
       This is a fake result.
@@ -81,7 +78,6 @@ const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
 <style is:global>
   [data-pagefind-ui] mark {
     background-color: transparent;
-
-    @apply text-secondary;
+    color: var(--color-secondary);
   }
 </style>
diff --git a/src/components/utils/Markdown.astro b/src/components/utils/Markdown.astro
index 0541754..809b10f 100644
--- a/src/components/utils/Markdown.astro
+++ b/src/components/utils/Markdown.astro
@@ -1,5 +1,5 @@
 ---
-import '@/styles/markdown.scss';
+import '@/styles/markdown.css';
 import Button from '@components/widgets/Button.astro';
 import { isFirstInstance } from '@utils/component-utils';
 import { Icon } from 'astro-icon/components';
@@ -23,9 +23,9 @@ const firstHasPre = hasPre && (isFirstInstance('md-has-pre', Astro.url) || impor
   firstHasPre && (
     <template
       id="code-toolbar-template"
-      class="code-block-wrapper collapse collapse-open relative my-4"
+      class="code-block-wrapper collapse-open collapse relative my-4"
     >
-      <div class="z-10 flex items-center justify-between bg-primary/60 text-primary-content">
+      <div class="bg-primary/60 text-primary-content z-10 flex items-center justify-between">
         <Button class="toggle-btn btn-ghost rounded-bl-none">
           <Icon
             name="material-symbols:keyboard-arrow-down-rounded"
diff --git a/src/components/widgets/MetaIcon.astro b/src/components/widgets/MetaIcon.astro
index e661369..ab64f18 100644
--- a/src/components/widgets/MetaIcon.astro
+++ b/src/components/widgets/MetaIcon.astro
@@ -9,7 +9,7 @@ const { class: className, ...rest } = Astro.props;
 
 <Icon {...rest} class:list={['meta-icon', className]} />
 
-<style lang="scss">
+<style>
   .meta-icon {
     width: 1.5rem;
     height: 1.5rem;
@@ -17,7 +17,6 @@ const { class: className, ...rest } = Astro.props;
     margin-right: 0.5rem;
     display: flex;
     justify-content: center;
-
-    @apply text-primary;
+    color: var(--color-text-primary);
   }
 </style>
diff --git a/src/components/widgets/Pagination.astro b/src/components/widgets/Pagination.astro
index 71c458e..f217350 100644
--- a/src/components/widgets/Pagination.astro
+++ b/src/components/widgets/Pagination.astro
@@ -101,7 +101,7 @@ else {
   }
 </div>
 
-<style lang="scss">
+<style>
   /* hide arrows from number input */
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
diff --git a/src/components/widgets/PostCard.astro b/src/components/widgets/PostCard.astro
index 5264ae7..3d82bbe 100644
--- a/src/components/widgets/PostCard.astro
+++ b/src/components/widgets/PostCard.astro
@@ -48,15 +48,13 @@ const metas: ({ icon: string; text: string; link?: string } | undefined)[] = [
 
 <div
   class:list={[
-    'card card-bordered flex w-full rounded-xl border-2 md:card-side max-md:flex-col-reverse',
+    'card card-bordered border-base-300 md:card-side flex w-full rounded-xl border-2 max-md:flex-col-reverse',
     className,
   ]}
 >
   <div class="card-body">
     <a href={url} class="card-title">{title}</a>
-    <div
-      class="mb-3 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-base-content text-opacity-60"
-    >
+    <div class="text-base-content/60 mb-3 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm">
       {
         metas.map((meta) => {
           return (
diff --git a/src/components/widgets/PostCardCover.astro b/src/components/widgets/PostCardCover.astro
index dd58760..57afd98 100644
--- a/src/components/widgets/PostCardCover.astro
+++ b/src/components/widgets/PostCardCover.astro
@@ -11,23 +11,15 @@ interface Props {
 const { url, title, cover } = Astro.props;
 ---
 
-<a href={url} title={title} class="group">
-  <div class="cover-mask">
-    <Icon name="material-symbols:chevron-right-rounded" />
+<a
+  href={url}
+  title={title}
+  class="group relative flex min-h-48 w-full overflow-hidden duration-100 active:brightness-75"
+>
+  <div
+    class="absolute inset-0 z-10 flex h-full w-full items-center justify-center bg-black/60 opacity-0 duration-300 group-hover:opacity-100"
+  >
+    <Icon name="material-symbols:chevron-right-rounded" class="h-24 w-24 text-white" />
   </div>
   <ImageWrapper src={cover} alt={title} />
 </a>
-
-<style>
-  a {
-    @apply relative flex min-h-48 w-full overflow-hidden duration-100 active:brightness-75;
-  }
-
-  div.cover-mask {
-    @apply absolute inset-0 z-10 flex h-full w-full items-center justify-center bg-black/60 opacity-0 duration-300 group-hover:opacity-100;
-  }
-
-  svg {
-    @apply h-24 w-24 text-white;
-  }
-</style>
diff --git a/src/components/widgets/ProfileCard.astro b/src/components/widgets/ProfileCard.astro
index a94528b..fd25bdb 100644
--- a/src/components/widgets/ProfileCard.astro
+++ b/src/components/widgets/ProfileCard.astro
@@ -5,7 +5,11 @@ import { Icon } from 'astro-icon/components';
 import Button from './Button.astro';
 ---
 
-<div id="profile-card" transition:name="profile-card" class="card card-bordered border-2">
+<div
+  id="profile-card"
+  transition:name="profile-card"
+  class="card card-bordered border-base-300 border-2"
+>
   <figure class="px-4 pt-4">
     <a href="/about/">
       <ImageWrapper class="rounded-xl" src={profileConfig.avatar} alt={profileConfig.name} />
diff --git a/src/components/widgets/ReadMoreButton.astro b/src/components/widgets/ReadMoreButton.astro
index 385cd68..d184dc4 100644
--- a/src/components/widgets/ReadMoreButton.astro
+++ b/src/components/widgets/ReadMoreButton.astro
@@ -4,21 +4,19 @@ import { i18n } from '@i18n/translation';
 import { Icon } from 'astro-icon/components';
 import type { ComponentProps } from 'astro/types';
 
-type Props = Omit<ComponentProps<typeof Icon>, 'name'>;
+type Props = Omit<ComponentProps<typeof Icon>, 'name' | 'class'>;
 
 const { href, title, ...rest } = Astro.props;
 ---
 
-<a href={href} title={title || i18n(I18nKey.more)}>
-  <Icon name="material-symbols:chevron-right-rounded" {...rest} />
+<a
+  href={href}
+  title={title || i18n(I18nKey.more)}
+  class="duration-150 hover:brightness-125 active:brightness-75 max-md:hidden"
+>
+  <Icon
+    name="material-symbols:chevron-right-rounded"
+    {...rest}
+    class="bg-primary/40 text-primary h-full min-h-48 w-12"
+  />
 </a>
-
-<style>
-  a {
-    @apply duration-150 hover:brightness-125 active:brightness-75 max-md:hidden;
-  }
-
-  svg {
-    @apply h-full min-h-48 w-12 bg-primary/40 text-primary;
-  }
-</style>
diff --git a/src/components/widgets/TOC.astro b/src/components/widgets/TOC.astro
index 55d673c..08f3786 100644
--- a/src/components/widgets/TOC.astro
+++ b/src/components/widgets/TOC.astro
@@ -13,7 +13,7 @@ const maxLevel = 3;
 
 <div
   id="toc"
-  class:list={['card card-bordered border-2 bg-base-100', className]}
+  class:list={['card card-bordered border-base-300 bg-base-100 border-2', className]}
   transition:name="toc-card"
 >
   <div class="card-body p-2">
@@ -29,21 +29,15 @@ const maxLevel = 3;
   </div>
 </div>
 
-<style lang="scss">
+<style>
   $max-level: 3;
 
   a {
     display: block;
     padding: 0.5rem 1rem;
 
-    @apply duration-200 ease-in-out;
+    @apply duration-200;
     @apply hover:scale-105;
     @apply active:scale-95;
-
-    @for $i from 1 through $max-level {
-      &.level-#{$i} {
-        padding-left: #{($i - 1) * 0.5 + 1}rem;
-      }
-    }
   }
 </style>
diff --git a/src/layouts/GlobalLayout.astro b/src/layouts/GlobalLayout.astro
index 3d475e7..f666278 100644
--- a/src/layouts/GlobalLayout.astro
+++ b/src/layouts/GlobalLayout.astro
@@ -1,5 +1,6 @@
 ---
 import { profileConfig, siteConfig } from '@/config';
+import '@/styles/global.css';
 import { ClientRouter } from 'astro:transitions';
 
 interface Props {
@@ -46,7 +47,7 @@ const siteLang = lang.replace('_', '-');
 
     <slot name="head" />
   </head>
-  <body class="flex min-h-screen flex-col bg-base-100 text-base-content">
+  <body class="bg-base-100 text-base-content flex min-h-screen flex-col">
     <slot />
   </body>
 </html>
@@ -65,7 +66,3 @@ const siteLang = lang.replace('_', '-');
   document.addEventListener('astro:after-swap', applyDarkMode);
   applyDarkMode();
 </script>
-
-<style is:global lang="scss">
-  @use '../styles/globals';
-</style>
diff --git a/src/layouts/GridLayout.astro b/src/layouts/GridLayout.astro
index f8e21af..9b1544d 100644
--- a/src/layouts/GridLayout.astro
+++ b/src/layouts/GridLayout.astro
@@ -10,7 +10,7 @@ const { title, description, lang } = Astro.props;
 ---
 
 <MainLayout title={title} description={description} lang={lang}>
-  <div class="mx-auto flex max-w-screen-xl flex-col gap-4">
+  <div class="mx-auto flex max-w-(--breakpoint-xl) flex-col gap-4">
     <slot name="header-content" />
     <div class="flex gap-4">
       <div id="main-content" class="my-4 w-full">
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 7ae0017..754bfbb 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -15,7 +15,7 @@ const { Content } = aboutMd ? await render(aboutMd) : Fragment;
 ---
 
 <MainLayout title={i18n(I18nKey.about)}>
-  <div class="mx-auto flex max-w-screen-xl flex-col items-center justify-center">
+  <div class="mx-auto flex max-w-(--breakpoint-xl) flex-col items-center justify-center">
     <div class="hero my-4 w-5/6 md:w-2/3">
       <div class="hero-content flex-col-reverse md:flex-row">
         <div class="mr-auto flex flex-col">
diff --git a/src/pages/archives/categories/index.astro b/src/pages/archives/categories/index.astro
index c7337b0..18ddd06 100644
--- a/src/pages/archives/categories/index.astro
+++ b/src/pages/archives/categories/index.astro
@@ -23,7 +23,7 @@ if (uncategorizedPosts.length > 0)
 ---
 
 <MainLayout title={i18n(I18nKey.categories)}>
-  <div class="mx-auto flex max-w-screen-xl flex-col items-center">
+  <div class="mx-auto flex max-w-(--breakpoint-xl) flex-col items-center">
     <h1 class="my-8 text-3xl font-bold">{i18n(I18nKey.categories)}</h1>
     <Timeline items={Array.from(categoryPosts.keys())}>
       <fragment slot="title">
@@ -34,7 +34,7 @@ if (uncategorizedPosts.length > 0)
               <Button
                 href={`/archives/categories/${category === i18n(I18nKey.uncategorized) ? I18nKey.uncategorized : category.replaceAll(/[\\/]/g, '-')}/1/`}
                 title={category}
-                class="!pl-3"
+                class="pl-3!"
               >
                 {i18n(I18nKey.more)}
                 <Icon name="material-symbols:chevron-right-rounded" class="text-2xl" />
diff --git a/src/pages/archives/tags/[tag]/[page].astro b/src/pages/archives/tags/[tag]/[page].astro
index 2164a6a..70da2eb 100644
--- a/src/pages/archives/tags/[tag]/[page].astro
+++ b/src/pages/archives/tags/[tag]/[page].astro
@@ -36,7 +36,7 @@ const { tag } = Astro.params;
 ---
 
 <GridLayout title={tag}>
-  <div class="mx-auto flex max-w-screen-xl flex-col items-center">
+  <div class="mx-auto flex max-w-(--breakpoint-xl) flex-col items-center">
     <h1 class="my-8 text-3xl font-bold">{tag}</h1>
   </div>
   <PostPage posts={posts} currentPage={currentPage} baseUrl={`/archives/tags/${tag}`} />
diff --git a/src/pages/archives/tags/index.astro b/src/pages/archives/tags/index.astro
index 23fb73b..ff02f88 100644
--- a/src/pages/archives/tags/index.astro
+++ b/src/pages/archives/tags/index.astro
@@ -24,7 +24,7 @@ if (untaggedPosts.length > 0) tagPosts.set(i18n(I18nKey.untagged) as string, unt
 ---
 
 <MainLayout title={i18n(I18nKey.tags)}>
-  <div class="mx-auto flex max-w-screen-xl flex-col items-center">
+  <div class="mx-auto flex max-w-(--breakpoint-xl) flex-col items-center">
     <h1 class="my-8 text-3xl font-bold">{i18n(I18nKey.tags)}</h1>
     <Timeline items={Array.from(tagPosts.keys())}>
       <fragment slot="title">
@@ -35,7 +35,7 @@ if (untaggedPosts.length > 0) tagPosts.set(i18n(I18nKey.untagged) as string, unt
               <Button
                 href={`/archives/tags/${tag === i18n(I18nKey.untagged) ? I18nKey.untagged : tag.replaceAll(/[\\/]/g, '-')}/1/`}
                 title={tag}
-                class="!pl-3"
+                class="pl-3!"
               >
                 {i18n(I18nKey.more)}
                 <Icon name="material-symbols:chevron-right-rounded" class="text-2xl" />
diff --git a/src/pages/posts/[article].astro b/src/pages/posts/[article].astro
index 8092bb3..a3fd408 100644
--- a/src/pages/posts/[article].astro
+++ b/src/pages/posts/[article].astro
@@ -35,7 +35,7 @@ const description = article.data.description || remarkPluginFrontmatter.excerpt;
       class="mx-2 mt-4"
     />
   </Fragment>
-  <div class="card card-bordered rounded-xl border-2 px-6 py-4">
+  <div class="card card-bordered border-base-300 rounded-xl border-2 px-6 py-4">
     <Markdown>
       <Content />
     </Markdown>
diff --git a/src/plugins/remark-excerpt.js b/src/plugins/remark-excerpt.js
index c88a045..cdab768 100644
--- a/src/plugins/remark-excerpt.js
+++ b/src/plugins/remark-excerpt.js
@@ -1,16 +1,16 @@
-import { toString } from 'mdast-util-to-string'
+import { toString } from 'mdast-util-to-string';
 
 /* Use the post's first paragraph as the excerpt */
 export function remarkExcerpt() {
   return (tree, { data }) => {
-    let excerpt = ''
+    let excerpt = '';
     for (let node of tree.children) {
       if (node.type !== 'paragraph') {
-        continue
+        continue;
       }
-      excerpt = toString(node)
-      break
+      excerpt = toString(node);
+      break;
     }
-    data.astro.frontmatter.excerpt = excerpt
-  }
+    data.astro.frontmatter.excerpt = excerpt;
+  };
 }
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..e59d45e
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,46 @@
+@import 'tailwindcss';
+
+@plugin 'daisyui' {
+  themes: light --default dark --prefersdark;
+}
+
+@plugin 'daisyui/theme' {
+  name: 'light';
+  default: false;
+
+  --color-primary: #bc4d2e;
+  --color-primary-content: #fefedb;
+  --color-secondary: #efbf89;
+  --color-secondary-content: #111;
+  --color-accent: #742c22;
+  --color-accent-content: #fff;
+  --color-base-100: #fffffd;
+  --color-base-200: #f6e7d2;
+  --color-base-300: #e6c9ac;
+  --color-base-content: #111;
+}
+
+@plugin 'daisyui/theme' {
+  name: dark;
+
+  --color-primary: #88b7dc;
+  --color-primary-content: #fff;
+  --color-secondary: #c47890;
+  --color-secondary-content: #fff;
+  --color-accent: #a343b0;
+  --color-accent-content: #fff;
+  --color-base-100: #272a3c;
+  --color-base-200: #18192a;
+  --color-base-300: #11121f;
+  --color-base-content: #eee;
+}
+
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] * ));
+
+@theme {
+  --tracking-extra-wide: 0.25em;
+}
+
+html {
+  scroll-behavior: smooth;
+}
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
deleted file mode 100644
index 0f2d42c..0000000
--- a/src/styles/globals.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  font-size: 17px;
-}
-
-html {
-  scroll-behavior: smooth;
-}
diff --git a/src/styles/markdown.scss b/src/styles/markdown.css
similarity index 83%
rename from src/styles/markdown.scss
rename to src/styles/markdown.css
index be0937e..a4a5950 100644
--- a/src/styles/markdown.scss
+++ b/src/styles/markdown.css
@@ -1,7 +1,7 @@
-@use './globals.scss' as global;
+@reference './global.css';
 
 article {
-  // 标题通用样式
+  /* 标题通用样式 */
   h1,
   h2,
   h3,
@@ -18,7 +18,7 @@ article {
       padding: 0 0.5rem;
       opacity: 0;
       text-decoration: none;
-      color: theme('colors.primary');
+      color: var(--color-primary);
       transition: opacity 0.2s ease-in-out;
     }
 
@@ -29,7 +29,7 @@ article {
     }
   }
 
-  // 各级标题特殊样式
+  /* 各级标题特殊样式 */
   h1 {
     @apply text-2xl;
   }
@@ -47,7 +47,7 @@ article {
     @apply text-base;
   }
 
-  // 基础文本元素
+  /* 基础文本元素 */
   p {
     margin: 0.5rem 0;
   }
@@ -61,7 +61,7 @@ article {
     }
   }
 
-  // 媒体元素
+  /* 媒体元素 */
   img {
     position: relative;
     margin: 1rem auto;
@@ -76,7 +76,7 @@ article {
     border: 1px dashed;
   }
 
-  // 列表样式
+  /* 列表样式 */
   ul,
   ol {
     margin-top: 0.5rem;
@@ -147,13 +147,13 @@ article {
           position: absolute;
           font-size: 0.75em;
           line-height: 0.75em;
-          color: theme('colors.primary-content');
+          color: var(--colors-primary-content);
         }
       }
     }
   }
 
-  // 代码样式
+  /* 代码样式 */
   pre {
     padding: 0.5rem;
     counter-reset: line;
@@ -190,7 +190,7 @@ article {
   code:not(pre code) {
     padding: 0 0.25rem;
 
-    @apply rounded-md bg-primary/10 text-primary;
+    @apply bg-primary/10 text-primary rounded-md;
   }
 
   .astro-code,
@@ -212,14 +212,14 @@ article {
     }
   }
 
-  // 引用块样式
+  /* 引用块样式 */
   blockquote {
     padding: 0.25rem 0.25rem 0.25rem 0.75rem;
 
-    @apply my-2 rounded-sm border-l-4 border-primary bg-primary/10;
+    @apply border-primary bg-primary/10 my-2 rounded-sm border-l-4;
   }
 
-  // GitHub Alert 样式
+  /* GitHub Alert 样式 */
   .admonition {
     padding: 0.25rem 0.25rem 0.25rem 0.75rem;
 
@@ -229,7 +229,7 @@ article {
       font-weight: bold;
     }
 
-    &-note {
+    &.admonition-note {
       @apply border-info bg-info/10;
 
       .admonition-title {
@@ -237,7 +237,7 @@ article {
       }
     }
 
-    &-tip {
+    &.admonition-tip {
       @apply border-success bg-success/10;
 
       .admonition-title {
@@ -245,7 +245,7 @@ article {
       }
     }
 
-    &-important {
+    &.admonition-important {
       @apply border-accent bg-accent/10;
 
       .admonition-title {
@@ -253,7 +253,7 @@ article {
       }
     }
 
-    &-warning {
+    &.admonition-warning {
       @apply border-warning bg-warning/10;
 
       .admonition-title {
@@ -261,7 +261,7 @@ article {
       }
     }
 
-    &-caution {
+    &.admonition-caution {
       @apply border-error bg-error/10;
 
       .admonition-title {
@@ -270,12 +270,12 @@ article {
     }
   }
 
-  // 折叠块样式
+  /* 折叠块样式 */
   details {
-    @apply w-full overflow-hidden rounded-xl border-2 border-base-300 duration-300;
+    @apply border-base-300 w-full overflow-hidden rounded-xl border-2 duration-300;
 
     summary {
-      @apply w-full px-3 py-1 text-start text-2xl duration-300 hover:bg-primary/50;
+      @apply hover:bg-primary/50 w-full px-3 py-1 text-start text-2xl duration-300;
 
       &::marker {
         margin-right: 1.5rem;
@@ -289,20 +289,20 @@ article {
     }
   }
 
-  // 表格样式
+  /* 表格样式 */
   table {
     @apply relative w-full text-left text-sm;
 
     :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
-      @apply border-b-2 border-b-base-200;
+      @apply border-b-base-200 border-b-2;
     }
 
     :where(tfoot) {
-      @apply border-t-2 border-t-base-200;
+      @apply border-t-base-200 border-t-2;
     }
 
     :where(thead, tfoot) {
-      @apply whitespace-nowrap bg-base-300/15 text-xs font-bold text-base-content/90;
+      @apply bg-base-300/15 text-base-content/90 text-xs font-bold whitespace-nowrap;
     }
 
     :where(th, td) {
@@ -311,7 +311,7 @@ article {
     }
   }
 
-  // 数学样式
+  /* 数学样式 */
   mjx-container[display='true'] {
     overflow: auto;
   }
diff --git a/src/styles/twikoo.scss b/src/styles/twikoo.css
similarity index 64%
rename from src/styles/twikoo.scss
rename to src/styles/twikoo.css
index 3ea3cff..383025c 100644
--- a/src/styles/twikoo.scss
+++ b/src/styles/twikoo.css
@@ -1,12 +1,17 @@
 /* stylelint-disable no-descending-specificity */
 /* stylelint-disable selector-class-pattern */
-
-@use './globals.scss' as global;
+@reference './global.css';
 
 .twikoo {
   @apply relative flex h-fit w-full flex-col items-center;
 }
 
+input,
+textarea,
+select {
+  border: none;
+}
+
 .tk-comments {
   @apply w-full;
 
@@ -18,7 +23,7 @@
     @apply flex w-full flex-col gap-2;
   }
 
-  // 回复框样式
+  /* 回复框样式 */
   .tk-submit {
     @apply relative w-full;
 
@@ -26,17 +31,17 @@
       display: none;
     }
 
-    // 输入框部分样式
+    /* 输入框部分样式 */
     .tk-col {
       @apply flex-col-reverse;
     }
 
-    // 文本框输入样式
+    /* 文本框输入样式 */
     .el-textarea {
-      @apply relative w-full overflow-hidden rounded-xl border-2 border-base-300 pb-9;
+      @apply border-base-300 relative w-full overflow-hidden rounded-xl border-2 pb-9;
 
       textarea {
-        @apply w-full bg-base-200/50 p-4;
+        @apply bg-base-200/50 w-full p-4;
 
         resize: none;
 
@@ -50,11 +55,11 @@
       }
 
       .el-input__count {
-        @apply absolute bottom-2 right-10 text-sm text-base-content/50;
+        @apply text-base-content/50 absolute right-10 bottom-2 text-sm;
       }
     }
 
-    // 个人信息输入框样式
+    /* 个人信息输入框样式 */
     .tk-meta-input {
       @apply flex w-[calc(100%-3.5rem)] flex-col items-center gap-2 md:w-[calc(100%-6.75rem)] md:flex-row;
     }
@@ -71,20 +76,20 @@
       }
 
       button {
-        @apply absolute border-base-300 bg-primary py-[0.95rem] md:py-[0.3rem];
+        @apply border-base-300 bg-primary absolute py-[0.95rem] md:py-[0.3rem];
 
         &.tk-preview {
-          @apply bottom-[3.7rem] right-0 md:bottom-0 md:right-[3.35rem];
+          @apply right-0 bottom-[3.7rem] md:right-[3.35rem] md:bottom-0;
         }
 
         &.tk-send {
-          @apply bottom-0 right-0;
+          @apply right-0 bottom-0;
         }
       }
     }
 
     .__markdown {
-      @apply absolute bottom-[7.75rem] right-3 md:bottom-[2.75rem];
+      @apply absolute right-3 bottom-[7.75rem] md:bottom-[2.75rem];
     }
 
     &:has(.tk-cancel) {
@@ -100,20 +105,20 @@
         }
 
         &.tk-cancel {
-          @apply bottom-[2.4rem] right-0 bg-error text-error-content md:bottom-0 md:right-[6.7rem];
+          @apply bg-error text-error-content right-0 bottom-[2.4rem] md:right-[6.7rem] md:bottom-0;
         }
       }
     }
 
     .tk-preview-container {
-      @apply mt-2 w-full rounded-xl border-2 border-base-300 bg-base-100 p-2;
+      @apply border-base-300 bg-base-100 mt-2 w-full rounded-xl border-2 p-2;
     }
   }
 
-  // 表情框样式
+  /* 表情框样式 */
   .OwO-body {
     /* stylelint-disable-next-line scss/operator-no-unspaced */
-    @apply absolute -left-3 top-9 z-20 hidden w-[calc(100vw-3rem)] max-w-[30rem] rounded-xl border-2 border-base-300 bg-base-200/50 duration-300;
+    @apply border-base-300 bg-base-200/50 absolute top-9 -left-3 z-20 hidden w-[calc(100vw-3rem)] max-w-[30rem] rounded-xl border-2 duration-300;
   }
 
   .OwO-open .OwO-body {
@@ -141,10 +146,10 @@
   }
 
   .OwO-packages {
-    @apply flex flex-wrap items-center text-nowrap px-4;
+    @apply flex flex-wrap items-center px-4 text-nowrap;
 
     > li {
-      @apply flex h-8 cursor-pointer items-center px-3 text-center duration-300 hover:bg-primary/50;
+      @apply hover:bg-primary/50 flex h-8 cursor-pointer items-center px-3 text-center duration-300;
 
       &.OwO-package-active {
         @apply bg-primary/50;
@@ -153,7 +158,7 @@
   }
 
   .tk-comments-container {
-    // 评论整体样式
+    /* 评论整体样式 */
     @apply mt-4 flex w-full flex-col gap-4;
 
     .tk-comments-title {
@@ -173,7 +178,7 @@
     }
 
     > .tk-comment {
-      @apply p-4 max-md:rounded-xl max-md:border-2 max-md:border-base-300 max-md:bg-base-200/50;
+      @apply max-md:border-base-300 max-md:bg-base-200/50 p-4 max-md:rounded-xl max-md:border-2;
 
       > .tk-avatar {
         @apply top-3;
@@ -181,16 +186,16 @@
     }
 
     .tk-replies {
-      @apply ml-6 mt-4 flex flex-col gap-2;
+      @apply mt-4 ml-6 flex flex-col gap-2;
 
       &:not(.tk-replies-expand) {
         @apply max-h-32 overflow-y-hidden;
       }
     }
 
-    // 详细样式
+    /* 详细样式 */
     .tk-avatar {
-      @apply absolute top-0 h-8 min-h-8 w-8 min-w-8 overflow-hidden rounded-full border-2 border-base-300;
+      @apply border-base-300 absolute top-0 h-8 min-h-8 w-8 min-w-8 overflow-hidden rounded-full border-2;
     }
 
     .tk-main > .tk-row {
@@ -199,7 +204,7 @@
 
     .tk-meta {
       a {
-        @apply duration-300 hover:text-primary;
+        @apply hover:text-primary duration-300;
       }
 
       small {
@@ -211,14 +216,14 @@
       }
     }
 
-    // 评论操作样式
+    /* 评论操作样式 */
     .tk-main:not(:has(.tk-replies:hover)):hover > .tk-row .tk-meta .tk-actions {
       @apply opacity-100;
     }
 
     .tk-action {
       .tk-action-link {
-        @apply relative flex items-center justify-center rounded-xl border-2 border-base-300 px-2 py-1 text-center duration-300;
+        @apply border-base-300 relative flex items-center justify-center rounded-xl border-2 px-2 py-1 text-center duration-300;
 
         .tk-action-icon-solid {
           @apply absolute left-2 opacity-0 duration-300;
@@ -254,7 +259,7 @@
       @apply flex flex-row gap-3;
 
       .tk-extra {
-        @apply flex flex-row items-center justify-center gap-2 rounded-md border-2 border-base-300 p-1 text-center text-xs text-base-content/50;
+        @apply border-base-300 text-base-content/50 flex flex-row items-center justify-center gap-2 rounded-md border-2 p-1 text-center text-xs;
       }
 
       .tk-icon {
@@ -263,8 +268,8 @@
     }
 
     .tk-replies .tk-content > span:first-child {
-      // 回复提示（回复：xxx）样式
-      @apply text-xs text-base-content/50;
+      /* 回复提示（回复：xxx）样式 */
+      @apply text-base-content/50 text-xs;
     }
 
     .tk-expand-wrap,
@@ -273,25 +278,25 @@
     }
 
     .tk-expand {
-      @apply w-full cursor-pointer rounded-md bg-base-200/50 py-1 text-sm duration-300 hover:bg-primary/50;
+      @apply bg-base-200/50 hover:bg-primary/50 w-full cursor-pointer rounded-md py-1 text-sm duration-300;
     }
   }
 
-  // 图标样式
+  /* 图标样式 */
   .tk-submit-action-icon {
-    @apply inline-block max-h-6 min-h-6 min-w-6 max-w-6 cursor-pointer fill-primary;
+    @apply fill-primary inline-block max-h-6 min-h-6 max-w-6 min-w-6 cursor-pointer;
   }
 
   .tk-action-icon {
-    @apply inline-block max-h-5 min-h-5 min-w-5 max-w-5 overflow-clip fill-primary;
+    @apply fill-primary inline-block max-h-5 min-h-5 max-w-5 min-w-5 overflow-clip;
   }
 
   .tk-icon {
-    @apply inline-block max-h-4 min-h-4 min-w-4 max-w-4 overflow-clip fill-primary;
+    @apply fill-primary inline-block max-h-4 min-h-4 max-w-4 min-w-4 overflow-clip;
   }
 
   .tk-tag {
-    @apply rounded-lg border-2 border-base-300 p-1 text-xs;
+    @apply border-base-300 rounded-lg border-2 p-1 text-xs;
   }
 }
 
@@ -314,7 +319,11 @@
     @apply relative flex h-full w-full items-center justify-center text-center;
 
     .tk-admin-close {
-      @apply absolute right-2 top-[0.65rem] z-50 h-8 w-8 fill-primary;
+      @apply fill-primary absolute top-[0.65rem] right-2 z-50 h-4 w-4;
+
+      @variant md {
+        @apply top-4 right-3 h-8 w-8;
+      }
     }
 
     > div {
@@ -334,26 +343,26 @@
     @apply h-full w-full overflow-y-scroll;
 
     .tk-panel-title {
-      @apply left-0 top-0 z-40 flex w-full flex-row items-center justify-between p-4;
+      @apply top-0 left-0 z-40 flex w-full flex-row items-center justify-between p-4;
 
-      // 管理面板标题
+      /* 管理面板标题 */
       div {
         @apply text-xl font-bold;
       }
 
       a {
-        @apply mx-6 rounded-xl border-2 border-base-300 bg-base-200/50 px-3 py-1 text-xs duration-300 hover:bg-primary;
+        @apply border-base-300 bg-base-200/50 hover:bg-primary mx-6 rounded-xl border-2 px-3 py-1 text-xs duration-300;
       }
     }
 
     .tk-tabs {
-      @apply flex flex-row items-center justify-between border-b-2 border-base-300 px-4 text-center text-lg;
+      @apply border-base-300 flex flex-row items-center justify-between border-b-2 px-4 text-center text-lg;
 
       .tk-tab {
-        @apply w-full cursor-pointer py-1 duration-300 hover:bg-primary;
+        @apply hover:bg-primary w-full min-w-fit cursor-pointer py-1 duration-300;
 
         &.__active {
-          @apply border-b-2 border-primary;
+          @apply border-primary border-b-2;
         }
       }
     }
@@ -366,7 +375,7 @@
       }
     }
 
-    // 评论管理样式
+    /* 评论管理样式 */
     .tk-admin-comment {
       @apply p-4;
     }
@@ -378,7 +387,7 @@
         @apply w-full;
 
         input {
-          @apply w-full rounded-xl border-2 border-base-300 bg-base-200/50 px-2 py-1;
+          @apply border-base-300 bg-base-200/50 w-full rounded-xl border-2 px-2 py-1;
 
           &:focus {
             outline: none;
@@ -387,7 +396,7 @@
       }
 
       select {
-        @apply w-1/4 rounded-xl border-2 border-base-300 bg-base-200/50 p-2;
+        @apply border-base-300 bg-base-200/50 w-1/4 rounded-xl border-2 p-2;
       }
     }
 
@@ -396,23 +405,23 @@
     }
 
     .tk-admin-comment-item {
-      @apply border-b-2 border-base-300 py-1;
+      @apply border-base-300 border-b-2 py-1;
     }
 
     .tk-admin-comment-meta {
       @apply flex flex-row flex-wrap items-center gap-2 text-start;
 
       .tk-avatar {
-        @apply h-8 w-8 overflow-hidden rounded-full border-2 border-base-300;
+        @apply border-base-300 h-8 w-8 overflow-hidden rounded-full border-2;
       }
 
       a {
-        @apply duration-300 hover:text-primary;
+        @apply hover:text-primary duration-300;
       }
 
       span:last-child,
       .tk-time {
-        @apply text-sm text-base-content/50;
+        @apply text-base-content/50 text-sm;
       }
     }
 
@@ -424,7 +433,7 @@
       }
 
       input {
-        @apply w-16 rounded-xl border-2 border-base-300 bg-base-200/50 px-2 py-1;
+        @apply border-base-300 bg-base-200/50 w-16 rounded-xl border-2 px-2 py-1;
 
         &::-webkit-outer-spin-button,
         &::-webkit-inner-spin-button {
@@ -442,14 +451,14 @@
     }
 
     .tk-pagination-pager {
-      @apply cursor-pointer rounded-md px-2 py-1 hover:bg-primary;
+      @apply hover:bg-primary cursor-pointer rounded-md px-2 py-1;
 
       &.__current {
         @apply bg-primary;
       }
     }
 
-    // 配置管理样式
+    /* 配置管理样式 */
     .tk-admin-config {
       @apply p-4;
     }
@@ -459,10 +468,10 @@
     }
 
     details {
-      @apply w-full overflow-hidden rounded-xl border-2 border-base-300 duration-300;
+      @apply border-base-300 w-full overflow-hidden rounded-xl border-2 duration-300;
 
       summary {
-        @apply w-full px-3 py-1 text-start text-2xl duration-300 hover:bg-primary/50;
+        @apply hover:bg-primary/50 w-full px-3 py-1 text-start text-2xl duration-300;
 
         &::marker {
           margin-right: 1.5rem;
@@ -486,7 +495,7 @@
       }
 
       input {
-        @apply w-full rounded-xl border-2 border-base-300 bg-base-200/50 px-2 py-1;
+        @apply border-base-300 bg-base-200/50 w-full rounded-xl border-2 px-2 py-1;
 
         &:focus {
           outline: none;
@@ -494,11 +503,11 @@
       }
 
       .tk-admin-config-desc {
-        @apply whitespace-pre-wrap text-start text-sm text-base-content/50;
+        @apply text-base-content/50 text-start text-sm whitespace-pre-wrap;
       }
     }
 
-    // 导入样式
+    /* 导入样式 */
     .tk-admin-import {
       @apply flex flex-col items-start gap-4 p-4;
 
@@ -507,11 +516,11 @@
       }
 
       select {
-        @apply w-full rounded-xl border-2 border-base-300 bg-base-200/50 p-2;
+        @apply border-base-300 bg-base-200/50 w-full rounded-xl border-2 p-2;
       }
 
       input {
-        @apply w-full rounded-xl border-2 border-base-300 bg-base-200/50 px-2 py-1;
+        @apply border-base-300 bg-base-200/50 w-full rounded-xl border-2 px-2 py-1;
 
         &:focus {
           outline: none;
@@ -522,7 +531,7 @@
         @apply h-full w-full;
 
         textarea {
-          @apply h-full w-full rounded-xl border-2 border-base-300 bg-base-200/50 px-2 py-1;
+          @apply border-base-300 bg-base-200/50 h-full w-full rounded-xl border-2 px-2 py-1;
 
           &:focus {
             outline: none;
@@ -531,7 +540,7 @@
       }
     }
 
-    // 导出样式
+    /* 导出样式 */
     .tk-admin-export {
       @apply p-4;
     }
@@ -539,10 +548,10 @@
 }
 
 .el-input-group {
-  @apply flex w-full flex-row items-center overflow-hidden rounded-xl border-2 border-base-300 bg-base-200/50 text-sm;
+  @apply border-base-300 bg-base-200/50 flex w-full flex-row items-center overflow-hidden rounded-xl border-2 text-sm;
 
   div {
-    @apply w-fit whitespace-nowrap bg-primary/50 px-2 py-1;
+    @apply bg-primary/50 w-fit px-2 py-1 whitespace-nowrap;
   }
 
   input {
@@ -559,7 +568,7 @@
 }
 
 .el-button {
-  @apply text-nowrap rounded-xl border-2 border-base-300 bg-primary px-2 py-1 text-center text-sm duration-300;
+  @apply border-base-300 bg-primary rounded-xl border-2 px-2 py-1 text-center text-sm text-nowrap duration-300;
 
   &:not(.is-disabled) {
     @apply hover:scale-105 hover:brightness-110 active:scale-95 active:brightness-90;
@@ -570,10 +579,10 @@
   }
 }
 
-// Markdown 样式
+/* Markdown 样式 */
 .tk-content,
 .tk-preview-container {
-  // 标题通用样式
+  /* 标题通用样式 */
   h1,
   h2,
   h3,
@@ -586,7 +595,7 @@
     font-weight: bold;
   }
 
-  // 基础文本元素
+  /* 基础文本元素 */
   p {
     margin: 0.5rem 0;
   }
@@ -600,16 +609,16 @@
     }
   }
 
-  // 代码样式
+  /* 代码样式 */
   .code-toolbar {
     @apply relative w-full;
 
     .toolbar {
-      @apply absolute right-3 top-1 flex flex-row-reverse items-center justify-between gap-4 text-xs;
+      @apply absolute top-1 right-3 flex flex-row-reverse items-center justify-between gap-4 text-xs;
     }
 
     .copy-to-clipboard-button {
-      @apply rounded-md border-2 border-base-300 bg-primary px-2 py-1 opacity-0 duration-300;
+      @apply border-base-300 bg-primary rounded-md border-2 px-2 py-1 opacity-0 duration-300;
     }
 
     &:hover .copy-to-clipboard-button {
@@ -624,10 +633,10 @@
   code:not(pre code) {
     padding: 0 0.25rem;
 
-    @apply rounded-md bg-primary/10 text-primary;
+    @apply bg-primary/10 text-primary rounded-md;
   }
 
-  // 媒体元素
+  /* 媒体元素 */
   img:not(.tk-owo-emotion) {
     position: relative;
     margin: 1rem auto;
@@ -641,25 +650,25 @@
     @apply inline-block h-7 self-baseline;
   }
 
-  // 分割线样式
+  /* 分割线样式 */
   hr {
     margin: 1.5rem 0.25rem;
     border: 1px dashed;
   }
 
-  // 引用块样式
+  /* 引用块样式 */
   blockquote {
     padding: 0.25rem 0.25rem 0.25rem 0.75rem;
 
-    @apply my-2 rounded-sm border-l-4 border-primary bg-primary/10;
+    @apply border-primary bg-primary/10 my-2 rounded-sm border-l-4;
   }
 
-  // 折叠块样式
+  /* 折叠块样式 */
   details {
-    @apply w-full overflow-hidden rounded-xl border-2 border-base-300 duration-300;
+    @apply border-base-300 w-full overflow-hidden rounded-xl border-2 duration-300;
 
     summary {
-      @apply w-full px-3 py-1 text-start text-2xl duration-300 hover:bg-primary/50;
+      @apply hover:bg-primary/50 w-full px-3 py-1 text-start text-2xl duration-300;
 
       &::marker {
         margin-right: 1.5rem;
diff --git a/stylelint.config.mjs b/stylelint.config.mjs
index 2ec61fc..fb26c6b 100644
--- a/stylelint.config.mjs
+++ b/stylelint.config.mjs
@@ -1,16 +1,22 @@
 /** @type {import('stylelint').Config} */
 export default {
-  extends: ['stylelint-config-standard-scss', 'stylelint-config-html/astro'],
+  extends: ['stylelint-config-html/astro'],
   rules: {
-    'scss/at-rule-no-unknown': [
+    'at-rule-no-unknown': [
       true,
       {
         ignoreAtRules: [
           // Tailwind CSS
-          'tailwind',
+          'theme',
+          'source',
+          'utility',
+          'variant',
+          'custom-variant',
           'apply',
           'layer',
           'config',
+          'plugin',
+          'reference',
         ],
       },
     ],
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
deleted file mode 100644
index 82130eb..0000000
--- a/tailwind.config.mjs
+++ /dev/null
@@ -1,46 +0,0 @@
-import daisyui from 'daisyui';
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-  theme: {
-    extend: {
-      letterSpacing: {
-        'extra-wide': '0.25em',
-      },
-    },
-  },
-  darkMode: ['selector', '[data-theme="dark"]'],
-  plugins: [daisyui],
-  daisyui: {
-    base: false,
-    themes: [
-      {
-        light: {
-          primary: '#BC4D2E',
-          'primary-content': '#FEFEDB',
-          secondary: '#EFBF89',
-          'secondary-content': '#111',
-          accent: '#742C22',
-          'accent-content': '#FFF',
-          'base-100': '#FFFFFD',
-          'base-200': '#F6E7D2',
-          'base-300': '#E6C9AC',
-          'base-content': '#111',
-        },
-        dark: {
-          primary: '#88B7DC',
-          'primary-content': '#FFF',
-          secondary: '#C47890',
-          'secondary-content': '#FFF',
-          accent: '#A343B0',
-          'accent-content': '#FFF',
-          'base-100': '#272A3C',
-          'base-200': '#18192A',
-          'base-300': '#11121F',
-          'base-content': '#EEE',
-        },
-      },
-    ],
-  },
-};