Tailwind CSS颜色样式不生效求助：其他样式正常仅颜色无效果

问题场景 #

配置Tailwind CSS后，text-3xl、underline这类排版样式正常生效，但bg-black、text-white等颜色类完全没有效果；使用内联style="color:red;"却能正常显示颜色。

相关代码 #

HTML文件

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./output.css" rel="stylesheet">
    <title>Test Page</title>
</head>
<body>
    <div class="bg-black">
        <h1 class="text-3xl underline text-white">Color Testing</h1>
    </div>
</body>
</html>

Tailwind配置文件tailwind.config.js

/** @type {import('tailwindcss').Config} */

const colors = require('tailwindcss/colors')

module.exports = {
  content: [
    "./src/**/*.{html,js}",
  ],
  theme: {
    extend: {},
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      slate: colors.slate,
    },
  },
  plugins: [],
}

解决步骤 #

1. 检查文件扫描路径
   配置里的content指定Tailwind扫描src目录下的所有HTML/JS文件，如果你的测试HTML在根目录（不在src里），Tailwind不会识别到bg-black、text-white这些类，自然不会生成对应的CSS规则。修改content路径：

   content: [
     "./*.html", // 加入根目录的HTML文件
     "./src/**/*.{html,js}",
   ],
   

2. 规范颜色配置（可选）
   如果只是想扩展颜色而非完全覆盖默认主题，建议把自定义颜色放在theme.extend.colors下，避免覆盖默认的基础颜色体系：

   theme: {
     extend: {
       colors: {
         slate: colors.slate,
       },
     },
     // 无需手动定义black、white，Tailwind默认已包含
   },
   

3. 重新构建CSS文件
   修改配置或HTML后，必须重新运行Tailwind的构建命令，生成最新的output.css。如果你的package.json中有如下脚本：

   "scripts": {
     "build": "tailwindcss -i ./src/input.css -o ./output.css"
   }
   

   执行命令：

   npm run build
   

4. 强制刷新浏览器缓存
   浏览器可能缓存了旧的CSS文件，按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，加载最新的样式文件。

内容的提问来源于stack exchange，提问作者james-clarke