Svelte项目配置Tailwind CSS后类名不生效问题排查

开发者阿泽

2026-8-29

问题根因

你的配置存在3处核心错误，导致本地构建的Tailwind样式无法生效：

配置版本不匹配：当前安装的是Tailwind CSS v3.1.3，但使用的是Tailwind v2的废弃配置项。v3版本已完全移除future节点下的purgeLayersByDefault、removeDeprecatedGapUtilities配置，原purge配置项也已统一替换为content，旧配置会导致Tailwind构建逻辑异常。
依赖版本不兼容：安装的postcss-cli@^7.1.2仅支持PostCSS v7，与项目中使用的PostCSS v8、Tailwind v3完全不兼容，会直接导致样式构建输出空文件。
扫描路径与环境判断逻辑错误：原配置仅扫描./src/App.svelte单个文件，其余Svelte组件、HTML文件中的Tailwind类名无法被识别；同时开发模式下判断生产环境的逻辑依赖Rollup注入的ROLLUP_WATCH变量，单独启动的PostCSS监听进程无法读取该变量，会错误触发生产环境的样式精简逻辑。

修复步骤

升级不兼容的postcss-cli依赖，执行命令：
npm install postcss-cli@latest -D
完全重写tailwind.config.js，移除v2废弃配置，修正内容扫描路径：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./public/**/*.html",
    "./src/**/*.{svelte,js,ts}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

简化postcss.config.cjs配置，移除冗余代码：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

调整样式文件路径与构建脚本：
将原存放于public目录的tailwind.css移动至src目录，修改package.json中对应脚本的路径配置：

"scripts": {
  "watch:tailwind": "postcss src/tailwind.css -o public/build/tailwind.css -w",
  "build:tailwind": "cross-env NODE_ENV=production postcss src/tailwind.css -o public/build/tailwind.css",
  "build": "npm run build:tailwind && rollup -c",
  "start": "sirv public",
  "serve": "serve public -p 80",
  "dev": "concurrently \"rollup -c -w\" \"npm run watch:tailwind\""
}

确认入口HTML引入构建产物：在public/index.html的<head>标签内添加CSS引入标签，确保路径与构建输出路径一致：

<link rel="stylesheet" href="/build/tailwind.css">

清除缓存重启服务：删除node_modules/.cache目录，重新执行npm run dev即可。

验证方式

单独执行npm run build:tailwind，打开生成的public/build/tailwind.css文件，若文件内包含Tailwind基础样式代码而非空文件，即代表构建流程正常。

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