Svelte组件的<style>块内无法使用@apply，因为Tailwind JIT引擎只扫描content配置的源码文件，不解析运行时注入的scoped样式字符串，故需在入口CSS中用@layer components定义复用类。
直接在全局 CSS 文件里用 @layer components 封装复用类，而不是塞进 Svelte 组件的 <style> 块里——后者会被 JIT 引擎忽略，样式根本不会生成。
为什么不能在 Svelte 组件的 <style> 里用 @apply
Tailwind 的 JIT 引擎只扫描 content 配置中声明的文件路径（比如 src/**/*.{svelte,js,ts}），但组件内 <style scoped> 是运行时注入的字符串，引擎压根不解析它。所以以下写法无效：
<style>
.my-btn {
@apply bg-red-500 text-white px-3 py-1;
}
</style>结果是构建后完全找不到 .my-btn 这个类，页面上也不生效。
- 即使加了
global修饰符也一样失效 - 伪类嵌套（如
.btn:hover .icon）在@apply中不支持 -
@apply不接受动态值：@apply {{ dynamicClass }}会报错
正确做法：在入口 CSS 文件中用 @layer components
新建或编辑项目入口 CSS 文件（例如 src/app.css 或 src/styles/tailwind.css），把复用类统一放进去：
立即学习“前端免费学习笔记（深入）”；
@tailwind base;
@tailwind components;
@tailwind utilities;
<p>@layer components {
.btn {
@apply px-4 py-2 font-medium rounded-lg transition-colors;
}
.btn-primary {
@apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50;
}
.btn-secondary {
@apply bg-gray-200 text-gray-800 hover:bg-gray-300;
}
}然后在 src/app.html 或主 <script> 中确保它被引入（SvelteKit 默认会处理）。
- 必须用
@layer components，否则 PurgeCSS 构建时会清掉这些类 - 只在高频复用（≥3 次）时才值得封装，否则直接写实用类更清晰
- 如果需要变体（
size、variant、disabled等组合逻辑），@apply不够用，得换tailwind-variants
遇到深色模式下 html 背景色不切换怎么办
因为 src/app.html 是静态文件，dark: 类无法自动作用到 <html> 标签上，导致页面底部露白。最稳妥的解法不是 hack JS 切类，而是靠 CSS 变量 + theme() 函数：
:root {
--bg-body: #ffffff;
}
.dark {
--bg-body: #111827;
}
html {
background-color: theme('colors.white'); /* fallback */
background-color: var(--bg-body);
}再配合 JS 控制 document.documentElement.classList.toggle('dark')，就能让 html 背景真正响应主题变化。
- 别试图在
app.html里写class="dark:bg-gray-900"—— Tailwind 不解析 HTML 文件里的类名 - 避免用
margin-bottom暴露html背景；优先用padding-bottom+ 容器自身背景色兜底 - 如果用了 Skeleton 等主题库，确认
content配置包含了其源码路径，否则自定义主题色不会被扫描
真正容易被忽略的是：JIT 引擎的扫描范围和 @layer 的语义边界。一旦漏配 content 或错放 @apply，问题不会报错，只会静默失效——你得检查构建后的 CSS 文件里有没有生成对应类名，而不是只看浏览器里写了没写。
