TailwindCSS @apply规则失效：自定义类.sc-input未生成输出CSS

核心原因 #

Tailwind的JIT（即时编译）模式会仅生成模板中实际引用的类，如果你的HTML模板里没有使用.sc-input类，或者该类所在的文件未被Tailwind扫描到，就会被从输出CSS中剔除。这是.button-primary和.sc-checkbox-input正常生成，但.sc-input缺失的最常见原因。

具体排查与解决步骤 #

• 确认模板中已使用.sc-input类
  检查所有HTML模板文件，确保存在class="sc-input"的元素，例如：

  <input type="text" class="sc-input" placeholder="请输入内容">
  

• 验证content路径覆盖范围
  检查tailwind.config.js中的content配置，确保存放.sc-input类的HTML文件路径被通配符覆盖：

  • 若模板文件在./templates目录下，当前配置的"../templates/**/*.html"可能路径错误，可调整为"./templates/**/*.html"（根据实际项目结构修改）。
  • 临时测试可将content改为["**/*.html"]，覆盖所有HTML文件，观察是否生成.sc-input样式，以此排除路径问题。

• 清除缓存并重启构建

  1. 停止当前运行的npm run dev命令
  2. 删除输出目录下的styles.css文件
  3. 重新执行npm run dev，让Tailwind重新扫描所有文件并生成样式

• 排查类名或语法错误
  简化.sc-input的@apply内容，先保留基础类测试：

  .sc-input {
    @apply w-full py-3 px-4 rounded-lg;
  }
  

  若能生成样式，再逐步添加其他类，排查是否某个类的语法或命名导致异常（从当前配置看，自定义颜色smart-red的定义是正常的）。

• 应急方案：强制保留类（不推荐）
  如果确实需要未被引用的类也生成，可在tailwind.config.js中添加safelist：

  module.exports = {
    // ...其他配置
    safelist: ['sc-input'],
  }
  

  注意：此方案会增加CSS体积，仅建议临时使用，优先确保类被实际引用。

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