部分Tailwind CSS类不生效？已配置config仍异常的排查求助

1. 补充Tailwind内容扫描的EJS文件后缀 #

你的tailwind.config.js中content配置仅指定了.html和.js文件，但EJS文件后缀为.ejs，Tailwind默认不会扫描这类文件，导致EJS中使用的类无法被提取生成CSS规则。

修改content配置，添加.ejs后缀：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: {
    relative: true, 
    files: [
      "./src/**/*.{html,js,ejs}",
      "./src/js/*.{html,js,ejs}"
    ]
  },
  theme: {
    extend: {
      colors: {
        white: "#ffffff",
        mainRed: "#AA0000ff",
        darkRed: "#710000ff",
      },
      gridTemplateColumns: {
        itemsGridSm: "325pt",
        itemsGridMd: "repeat(2, 4fr)",
        itemsGridLg: "repeat(3, 4fr)",
      },
    },
  },
  plugins: [],
};

2. 确保CSS构建命令重新执行 #

修改配置或EJS文件后，必须重新运行Tailwind的CSS构建命令，确保新类被提取并生成到最终样式文件中。比如执行项目中对应的构建脚本（如npm run build:css）。

3. 检查EJS渲染后的HTML类名完整性 #

通过浏览器开发者工具查看最终渲染的HTML源码，确认不生效的类名是否完整出现在对应元素上——EJS动态渲染可能出现类名拼接错误、空格丢失等问题，导致Tailwind无法识别。

4. 排查自定义CSS优先级冲突 #

若项目存在自定义CSS，可能会覆盖Tailwind类的样式。在浏览器元素样式面板中，查看不生效类的样式是否被其他规则覆盖：

• 可临时使用Tailwind的!important变体（如!text-white）验证优先级问题
• 调整自定义CSS的选择器优先级，避免与Tailwind类冲突

5. 简化PostCSS配置测试 #

移除@tailwindcss/deprecation-warnings插件，部分场景下该插件可能干扰构建流程：

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

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