Tailwind自定义类无法生效：已移除默认CSS但HTML中无法使用

1. 检查基础样式文件配置 #

先确认src/styles.css里必须包含Tailwind核心指令，这是自定义类能被编译的基础：

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

/* 示例自定义类写法 */
.custom-btn {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

如果之前的配置缺了开头三个@tailwind指令，自定义类根本不会被Tailwind识别处理。

2. 验证Tailwind配置文件 #

如果还没生成配置文件，先执行：

npx tailwindcss init

打开生成的tailwind.config.js，确保content字段包含你的HTML文件路径——Tailwind需要扫描这些文件来打包用到的类（包括你写的自定义类）：

module.exports = {
  content: [
    "./public/**/*.html", // 匹配public目录下所有HTML文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 重新编译样式 #

修改配置后，重新运行编译命令：

npm run build-css

之后刷新页面，测试自定义类是否生效。

4. 排查HTML引用问题 #

确认HTML里的类名和样式文件中的自定义类名完全一致，比如：

<button class="custom-btn">测试按钮</button>

别出现拼写错误、大小写不一致的情况。

额外排查点 #

• 打开浏览器控制台，检查是否有CSS加载错误，确认HTML里styles.css的引用路径正确
• 自定义类用@apply时，检查语法是否正确（比如有没有漏写分号、属性名是否错误）

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