高效做法是将全局样式逻辑收口到 tailwind 配置层，通过 content 全覆盖组件路径（如 './src/*/.{html,js,svelte,ts}'）和 theme.extend 定义品牌色等，避免 @layer global 和 src/app.css 中直接写 @tailwind 指令。
直接在 src/app.css 里写 @tailwind 指令 + 全局类，不是高效做法；真正高效的方式是把全局样式逻辑收口到 Tailwind 配置层，再通过 content 和 theme.extend 控制输出范围。
tailwind.config.cjs 必须覆盖所有组件路径
很多项目构建后丢失 DaisyUI 或自定义组件样式，根源就是 content 路径漏扫。SvelteKit 的组件不只在 src/routes，还大量存在于 src/lib、src/components 甚至第三方包中。
- 错误写法：
content: ['./src/routes/**/*.{html,js,svelte,ts}'] - 推荐写法：
content: ['./src/**/*.{html,js,svelte,ts}']（简洁且全覆盖） - 更严谨的多目录写法（适合大型项目）：
content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/@daisyui/**/*.{js,svelte}'] - 若用 TypeScript，确保包含
.ts扩展名，否则类型文件里的 class 字符串不会被识别
全局样式应优先走 theme.extend 而非 @layer global
在 tailwind.config.cjs 中用 theme.extend 定义颜色、间距、字体等，比在 CSS 文件里写 @layer global { body { ... } } 更可控、更易复用，也避免污染构建产物中的未使用样式。
- 例如添加品牌色：
colors: { primary: '#2071ad', secondary: '#31cdce' }，后续所有组件可直接用bg-primary - 排版统一交给
@tailwindcss/typography插件配置，而不是手动写article p规则 -
@layer global仅用于极少数必须穿透 scoped 边界的场景（如:root变量注入），非常规手段
深色模式开关必须与 HTML 根节点 class 同步
Tailwind 的 dark: 前缀默认依赖 class="dark" 出现在 或 上。SvelteKit 没有自动加这个 class，得自己管。
- 在
src/hooks.server.ts或src/hooks.client.ts中读取用户偏好并设置：document.documentElement.classList.toggle('dark', isDark) - 确保
tailwind.config.cjs中darkMode: 'class'（不是'media'），否则dark:bg-black不生效 - 不要在组件内用
class:dark={...}给加 class —— Svelte 不允许操作 document 元素的 class 属性，会报错
最容易被忽略的是：Tailwind 的全局样式“生效”不等于“可用”。它只负责生成你实际用到的工具类，而是否用到，完全取决于 content 扫描结果和模板中是否出现对应字符串。哪怕你在 theme.extend 里定义了 50 个颜色，只要没在任何 .svelte 或 .ts 文件里写过 text-mycolor-500，它就不会进最终 CSS 文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
