Tailwind CSS在JS文件生效，移入CSS文件后报错的问题排查

问题根源 #

你遇到的编译错误核心原因是：CSS中直接定义的.complete类没有包裹在@layer components指令内，导致Tailwind编译器无法识别其中引用的border-black-500自定义颜色类。

而在JS的className中直接使用时，Tailwind的JIT即时编译器会扫描到这个类并自动生成对应样式，所以能正常运行；但在CSS文件中直接写类而不通过@layer声明，Tailwind不会处理其中的自定义工具类，就会抛出“类不存在”的错误。

解决步骤 #

把所有自定义组件类放到@layer components块中即可，修改后的CSS代码如下：

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

@layer components {
  .input {
    @apply border rounded p-2 focus:outline-none w-full;
  }
  .show-pass {
    @apply absolute top-0 right-0 cursor-pointer h-full flex items-center bg-white border-y border-r pr-1;
  }
  .complete {
    @apply p-4 bg-transparent border-b-2 border-black-500 focus:outline-none placeholder:text-white focus:bg-white/40 transition duration-100 rounded-t-sm sm:w-1/4 placeholder:text-xl text-xl text-gray-100;
  }
}

额外说明 #

@layer指令的作用是告诉Tailwind将你的自定义类整合到它的组件层级中，这样编译器不仅能正确解析其中的Tailwind类（包括你自定义的black-500颜色），还能确保这些类在生产环境中按需打包，避免冗余代码。

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