在Tauri+SvelteKit/TailwindCSS/Flowbite中自定义主题失效求助

我正在基于Tauri、SvelteKit/TailwindCSS和Flowbite构建应用，要实现自定义主题。目前能看到styles.css和tailwind.config.js中定义的所有颜色在<html>标签上可用，但Tailwind类似乎无法在<body>标签上生效。

暗黑模式可正常工作：切换时会移除dark类，颜色会切换为styles.css的:root中定义的颜色；TailwindCSS本身也能正常工作，例如设置dark:bg-primary-300时背景色会变化，但设置dark:bg-background-800却无效。

请问我是否遗漏了什么配置？恳请提供帮助，谢谢！

我的配置 #

package.json #

"dependencies": {
   "@popperjs/core": "^2.11.8",
   "@sveltejs/kit": "^1.27.7",
   "@tauri-apps/api": "^1.5.1",
   "flowbite": "^2.2.0",
   "flowbite-svelte": "^0.44.20",
   "tailwind-merge": "^2.1.0"
 },
 "devDependencies": {
   "@sveltejs/adapter-auto": "^2.1.1",
   "@sveltejs/vite-plugin-svelte": "^2.4.2",
   "@tauri-apps/cli": "^1.5.6",
   "@tsconfig/svelte": "^5.0.0",
   "autoprefixer": "^10.4.16",
   "postcss": "^8.4.32",
   "svelte": "^4.0.5",
   "svelte-check": "^3.4.6",
   "tailwindcss": "^3.3.6",
   "tslib": "^2.6.0",
   "typescript": "^5.0.2",
   "vite": "^4.4.4"
}

svelte.config.js #

import adapter from '@sveltejs/adapter-auto';
import {vitePreprocess} from '@sveltejs/vite-plugin-svelte';

const config = {
   kit: {
       adapter: adapter()
   },
   preprocess: vitePreprocess(),
};

export default config;

tailwind.config.js #

配置中设置了darkMode: 'class'，并在theme.extend.colors下定义了background系列的自定义颜色。

styles.css #

在:root伪类中定义了--background-100、--background-800等全局CSS变量，同时引入了Tailwind的基础样式、组件样式、工具类，以及Flowbite的相关样式。

index.html #

<html>标签带有dark类，<body>标签使用了bg-background-100 dark:bg-background-800这类Tailwind自定义颜色类。

针对你遇到的问题，以下是具体的排查和解决步骤：

1. 确保Tailwind颜色与CSS变量正确映射
   在tailwind.config.js中，自定义颜色必须直接关联到styles.css里的CSS变量，Tailwind才能生成对应的类。示例配置如下：

   /** @type {import('tailwindcss').Config} */
   export default {
     darkMode: 'class',
     content: [
       './src/**/*.{svelte,html,js,ts}',
       './node_modules/flowbite-svelte/**/*.{svelte,html,js,ts}'
     ],
     theme: {
       extend: {
         colors: {
           background: {
             100: 'var(--background-100)',
             800: 'var(--background-800)'
             // 其他background色值同理映射
           }
         }
       }
     },
     plugins: [require('flowbite/plugin')]
   }
   

2. 检查暗黑模式下的CSS变量赋值
   确保在.dark类下重新定义了对应的CSS变量，这样切换暗黑模式时变量值才会更新：

   :root {
     --background-100: #ffffff;
     --background-800: #1a1a1a;
   }
   
   .dark {
     --background-100: #1a1a1a;
     --background-800: #0f0f0f;
   }
   

3. 验证Tailwind内容扫描范围
   确认tailwind.config.js的content字段包含了所有需要生成样式的文件路径，包括你的Svelte组件和Flowbite-Svelte的组件，否则Tailwind不会生成bg-background-800这类自定义类。

4. 排查样式优先级问题
   如果<body>的默认样式（浏览器自带或Flowbite基础样式）优先级更高，会覆盖Tailwind类。可以临时给Tailwind类加!important测试（比如dark:!bg-background-800），若生效则调整样式加载顺序（确保自定义styles.css在Flowbite样式之后引入），或使用更具体的选择器（比如html.dark body）来提升优先级。

5. 清除缓存重启服务
   清除Vite和Tauri的缓存后重启开发服务，避免旧缓存导致新样式不生效。

内容的提问来源于stack exchange，提问作者Zabon