SvelteKit+Vite项目中Tailwind CSS无法生效的问题排查

1. 确认全局样式导入正确 #

Tailwind需要在项目全局范围内导入基础样式层，这是最容易遗漏的核心步骤：

• 创建或修改src/app.css文件，添加以下内容：

@tailwind base;
@tailwind components;
@tailwind utilities;

• 在src/routes/+layout.svelte中导入该全局样式文件：

<script>
  import '../app.css';
</script>

<slot />

也可以直接在+layout.svelte的全局<style>标签中写入上述Tailwind指令（注意不要添加scoped属性）。

2. 验证依赖与配置文件 #

确认已安装必要依赖 #

确保已完整安装Tailwind及配套工具：

npm install tailwindcss postcss autoprefixer --save-dev

检查Tailwind配置 #

你的tailwind.config.ts配置无误，content路径已覆盖所有Svelte及源码文件：

import type { Config } from 'tailwindcss';

export default {
    content: ['./index.html', './src/**/*.{svelte,js,ts,jsx,tsx}'],
    theme: {
        extend: {}
    },
    plugins: []
} satisfies Config;

检查PostCSS配置 #

postcss.config.js配置符合要求：

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

3. 重启开发服务器 #

修改配置或全局样式后，必须重启Vite开发服务，否则新的配置规则不会加载生效。

4. 排查样式冲突 #

打开浏览器开发者工具，查看目标<h1>元素的样式面板：

• 检查Tailwind的text-3xl、font-bold、underline类是否被划掉（表示被更高优先级的全局样式覆盖）
• 移除全局样式中可能冲突的规则（比如全局<h1>的字号、字体粗细默认设置）

测试代码示例 #

你的页面组件代码：

<h1 class="text-3xl font-bold underline">Hello world!</h1>

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