Tailwind CSS在HTML项目配置后无效，背景色不显示求助

我在HTML项目中配置Tailwind CSS后无法生效，背景色未显示。操作步骤为：先执行npm init生成package.json文件，再使用npm i -D tailwindcss命令安装Tailwind CSS，并完成后续配置步骤。

相关信息 #

• 项目文件夹结构：包含dist目录、package.json、tailwind.config.js等文件
• tailwind.config.js文件代码：

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

• 输出情况：页面背景色未正常显示

问题排查与解决方法 #

1. 修正content配置路径 #

Tailwind需要扫描到你在HTML/JS中使用的类才会生成对应样式，当前content仅指向dist目录下的文件，如果你的HTML文件在项目根目录或其他路径，会导致扫描不到。

• 若HTML在根目录，修改配置：

content: ["./*.html", "./dist/*.js"]

• 若有多层子目录，用通配符匹配所有文件：

content: ["./**/*.{html,js}"]

2. 确认Tailwind输入样式文件 #

创建src/style.css文件，写入以下基础指令：

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

3. 配置编译脚本 #

在package.json的scripts中添加编译命令：

"scripts": {
  "build": "tailwindcss -i ./src/style.css -o ./dist/style.css --watch"
}

执行npm run build启动实时编译。

4. 检查HTML的CSS引入路径 #

确保HTML中引入的是编译后的dist目录下的样式文件：

<link rel="stylesheet" href="./dist/style.css">

5. 验证编译结果 #

执行npm run build后，打开dist/style.css，查看是否包含你使用的背景色类（比如bg-blue-500）对应的CSS代码，若没有则重新调整content路径。

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