如何在SvelteKit官方示例应用中正确集成Tailwind CSS？

处理现有src/routes/styles.css的两种方案 #

方案1：合并到src/app.css（推荐）

把src/routes/styles.css里的所有内容复制到新建的src/app.css中，然后删除原src/routes/styles.css文件。这样全局样式统一管理，符合SvelteKit和Tailwind的最佳实践，避免多文件分散维护的混乱。

方案2：保留原文件，调整导入顺序

如果不想改动原文件结构，就在src/routes/+layout.svelte中先导入Tailwind的全局样式文件，再导入原styles.css——确保Tailwind的基础样式先加载，自定义样式可以正常覆盖或补充Tailwind的默认样式：

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

在SvelteKit示例应用中添加Tailwind CSS的完整步骤 #

1. 安装依赖
   在项目根目录执行命令：

npm install -D tailwindcss postcss autoprefixer

2. 初始化Tailwind配置
   自动生成tailwind.config.js和postcss.config.js配置文件：

npx tailwindcss init -p

3. 配置Tailwind扫描范围
   打开tailwind.config.js，修改content数组，确保覆盖项目中所有需要使用Tailwind类的文件：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/**/*.{html,js,svelte,ts}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 创建并配置全局样式文件
   新建src/app.css，先添加Tailwind的核心指令，再根据你选择的方案处理原样式：

• 若用方案1：把原src/routes/styles.css的内容粘贴进来
• 若用方案2：只保留Tailwind指令即可

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

/* 方案1：粘贴原styles.css的所有内容 */

5. 更新布局组件的样式导入
   打开src/routes/+layout.svelte，根据方案调整导入语句：

• 方案1：替换原导入为import '../app.css';
• 方案2：按前面的顺序导入两个文件

6. 验证效果
   启动开发服务器：

npm run dev

在任意组件（比如+page.svelte）中添加Tailwind类测试，例如：

<h1 class="text-3xl font-bold text-blue-600">Hello Tailwind + SvelteKit!</h1>

打开浏览器查看样式是否正常生效。

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