为何Tailwind CLI生成的样式无法应用于内部元素？

核心排查与解决步骤 #

1. 确认Tailwind配置文件的内容路径 #

Tailwind CLI只会打包扫描到的HTML/JS文件中实际使用的类，如果tailwind.config.js里的content路径没覆盖你的HTML文件，bg-yellow-100这类类不会被生成到CSS里。

正确配置示例（根据你的文件结构调整路径）：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.html"], // 匹配当前目录下所有HTML文件
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 重新执行Tailwind构建命令 #

修改配置后必须重新构建，确保更新后的CSS包含所需样式：

npx tailwindcss -i ./input.css -o ./head.css --watch

注意：你的源CSS文件（比如input.css）必须包含Tailwind基础指令：

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

3. 验证生成的head.css文件 #

打开head.css搜索bg-yellow-100，如果找不到该类的样式规则，说明路径配置有误，回到步骤1调整content路径。

4. 检查CSS文件的引入路径 #

在浏览器开发者工具的「网络」标签中，确认head.css是否成功加载（无404错误），确保HTML中的路径与文件实际位置一致。

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