refactor: fix tailwindcss config

Author: recoluan

docs/.vuepress/components/Examples.vue

@@ -61,7 +61,7 @@ if (!__VUEPRESS_SSR__) {
 </script>
 
 <style scoped>
-@import '@vuepress-reco/tailwindcss-config/lib/client/styles/tailwindcss-base.css';
+@import '@vuepress-reco/tailwindcss-config/lib/client/styles/components.css';
 
 .examples__container {
   @apply flex flex-wrap;

docs/.vuepress/components/Md5.vue

@@ -79,7 +79,7 @@ async function copyToClipboard(text: string) {
 </script>
 
 <style scoped>
-@import '@vuepress-reco/tailwindcss-config/lib/client/styles/tailwindcss-base.css';
+@import '@vuepress-reco/tailwindcss-config/lib/client/styles/components.css';
 
 .md5-wrapper {
   @apply mt-4;

docs/docs/guide/style.md

@@ -52,8 +52,8 @@ ul {
 
 ## 注意
 
-如果在写 tailwindcss 时，用到 reco 主题自定义的基础样式、变量和组件，需要在 css 文件最上面引入 `@vuepress-reco/tailwindcss-config/lib/client/styles/tailwindcss-base.css` ：
+如果在写 tailwindcss 时，用到 reco 主题自定义的基础样式、变量和组件，需要在 css 文件最上面引入 `@vuepress-reco/tailwindcss-config/lib/client/styles/components.css` ：
 
 ```css
-@import url('@vuepress-reco/tailwindcss-config/lib/client/styles/tailwindcss-base.css');
+@import url('@vuepress-reco/tailwindcss-config/lib/client/styles/components.css');
 ```

docs/en/docs/guide/style.md

@@ -52,8 +52,8 @@ ul {
 
 ## Notice
 
-If you use the base, variables and components customized by the reco theme when writing tailwindcss, you need to import `@vuepress-reco/tailwindcss-config/lib/client/styles/tailwindcss-base.css` at the top of the css file:
+If you use the base, variables and components customized by the reco theme when writing tailwindcss, you need to import `@vuepress-reco/tailwindcss-config/lib/client/styles/components.css` at the top of the css file:
 
 ````css
-@import url('@vuepress-reco/tailwindcss-config/lib/client/styles/tailwindcss-base.css');
+@import url('@vuepress-reco/tailwindcss-config/lib/client/styles/components.css');
 ````

packages/@vuepress-reco/plugin-ai-chat/src/client/components/AIChat.vue

@@ -1159,7 +1159,7 @@ onMounted(() => {
 </style>
 
 <style scoped>
-@import '@vuepress-reco/tailwindcss-config/lib/client/styles/tailwindcss-base.css';
+@import '@vuepress-reco/tailwindcss-config/lib/client/styles/components.css';
 
 .ai-chat {
   @apply max-w-screen-xl mx-auto my-16 px-6;

packages/@vuepress-reco/plugin-ai-chat/src/client/components/AIChatButton.vue

@@ -93,7 +93,7 @@ watch(isOpen, (val) => {
 </script>
 
 <style>
-@import '@vuepress-reco/tailwindcss-config/lib/client/styles/tailwindcss-base.css';
+@import '@vuepress-reco/tailwindcss-config/lib/client/styles/components.css';
 
 /* 容器样式 */
 .ai-chat-button-container {

packages/@vuepress-reco/plugin-bulletin-popover/src/client/components/Bulletin.vue

@@ -23,7 +23,7 @@ const { bodyNodes } = useHandleNodes()
 </script>
 
 <style>
-@import '@vuepress-reco/tailwindcss-config/lib/client/styles/tailwindcss-base.css';
+@import '@vuepress-reco/tailwindcss-config/lib/client/styles/components.css';
 
 .bulletin-wrapper {
   @apply fixed flex-col  top-20 right-4 z-30 flex box-border rounded-lg bg-basic border-primary;

packages/@vuepress-reco/plugin-comments/src/client/styles/valine.css

@@ -1,4 +1,4 @@
-@import '@vuepress-reco/tailwindcss-config/lib/client/styles/tailwindcss-base.css';
+@import '@vuepress-reco/tailwindcss-config/lib/client/styles/components.css';
 
 @keyframes spin {
   0% {

packages/@vuepress-reco/tailwindcss-config/src/client/styles/base.css

@@ -1,3 +1,11 @@
+/* 先导入自定义组件类（必须在基础样式之前，因为基础样式使用了这些类） */
+@import './components.css';
+
+/* Tailwind 入口，仅在全局引入一次 */
+@tailwind base;
+@tailwind utilities;
+
+/* reco 主题基础样式 */
 @layer base {
   * {
     @apply m-0 p-0;

packages/@vuepress-reco/tailwindcss-config/src/client/styles/components.css

@@ -1,8 +1,7 @@
-/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
-@tailwind base;
+/* 确保 Tailwind components 层已初始化 */
 @tailwind components;
-@tailwind utilities;
 
+/* reco 主题自定义的组件类 */
 @layer components {
   .text-basic {
     @apply text-reco-text-lightmode;