如何在@layer中使用Tailwind CSS扩展的自定义颜色？

你直接用@apply boring-green是错误的，因为Tailwind的自定义颜色必须配合对应工具类前缀才能使用——比如设置文字颜色要加text-前缀。

你的tailwind.config.js配置是正确的，无需修改。只需调整globals.css中的代码，把boring-green改成text-boring-green即可：

修改后的globals.css

@layer base {
  
  h1 {
    @apply text-2xl uppercase font-light leading-none ;
  }

  h1 strong {
    @apply text-boring-green;
  }
}

原因说明：

• 你在tailwind.config.js的colors中扩展的boring-green是颜色值的定义，本身不是可直接调用的工具类。
• Tailwind的颜色工具类需要前缀区分用途：文字颜色用text-、背景色用bg-、边框色用border-等。这里要设置<strong>的文字颜色，所以必须用text-boring-green。

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