Tailwind CSS颜色类不生效排查：默认类是否已导入？

问题场景 #

当前<body>标签的text-red-600样式未生效，需判断默认Tailwind类是否已导入到public/styles.css中，相关文件及配置如下：

public/index.html #

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body class="text-red-600">
  some text
</body>

CSS生成命令 #

tailwindcss -i src/styles.css -o public/styles.css

src/styles.css #

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

tailwind.config.js #

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

结论与解决方法 #

默认Tailwind类没有被导入到public/styles.css中，核心原因是Tailwind的内容扫描路径配置错误：

Tailwind采用按需打包机制，只会把content配置路径下文件中实际用到的类打包进CSS。你的HTML文件在public/index.html，但tailwind.config.js里的content只扫描./src/**/*.{html,js}，导致Tailwind检测不到text-red-600这个类，自然不会把它的样式加入生成的styles.css。

只需修改tailwind.config.js的content配置，把public目录下的HTML文件纳入扫描范围：

module.exports = {
  content: ["./src/**/*.{html,js}", "./public/**/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

修改后重新执行CSS生成命令，text-red-600的样式就会被包含到public/styles.css中，页面文字颜色即可生效。

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