SvelteKit Demo Starter项目中TailwindCSS无法覆盖app.css内容

云原生阿岚

2026-8-22

解决SvelteKit Demo模板装Tailwind后原有样式没重置的问题

问题根源

SvelteKit官方Demo模板自带了全局自定义CSS，这些样式优先级比Tailwind的Preflight（重置样式）高，所以盖过了Tailwind的重置效果；而Skeleton模板本身没这类全局样式，所以能正常生效。

移除原有全局CSS引入
打开src/routes/+layout.svelte，找到里面引入全局样式的代码（一般是import '../app.css'或者类似路径），直接注释或者删掉这行，原有Demo的全局样式就不会加载了。
确认Tailwind Preflight没被禁用
检查tailwind.config.js，确保没有corePlugins: { preflight: false }这行配置——要是有，删掉它，Tailwind的重置样式才能正常生效。
核对Tailwind样式文件的引入
回到src/routes/+layout.svelte，确认已经引入了包含Tailwind指令的src/app.css，文件内容要包含：
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
重启开发服务
关掉当前的npm run dev，重新跑一遍命令，让所有样式修改生效。