如何让Tailwind配置中自定义文字颜色生效到index.css？

我在tailwind.config.js的theme.extend.colors中定义了自定义颜色black-variant，参考之前在index.css的@layer base中给body应用@apply font-[lato]的方式，尝试用@apply text-[black-variant]给body设置文字颜色，但未生效。请问正确的实现方式是什么？

相关代码 #

index.css（初始版本） #

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

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
@layer base{
  body{
    @apply font-[lato] 
 }
  
}

tailwind.config.js #

module.exports = {
  content: ["./src/**/*.{html,jsx,js}",'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
      'navblue': '#AEB9C7', 'black-variant': '#42505D',
    },
    padding: {
      '9' : '7rem',
    },
    margin: {
      '9' : '7rem',
    },
    dropShadow: {
      '3xl' : '0px 10px 10px 0px rgba(0 0 0/0.06)',
    }

  },
  },
  plugins: [require('flowbite/plugin'),],
}

修改后的index.css（未生效版本） #

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

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
@layer base{
  body{
    @apply font-[lato] text-[black-variant]

  }
  
}

问题出在自定义颜色的调用逻辑上：

• font-[lato]用方括号是因为Lato是未在Tailwind主题中预定义的字体，方括号属于动态类名的写法；
• 但你已经在tailwind.config.js的theme.extend.colors中注册了black-variant，它属于Tailwind的主题色，不需要用方括号包裹，直接用text-black-variant即可。

修改后的index.css代码如下：

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

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
@layer base{
  body{
    @apply font-[lato] text-black-variant
  }
  
}

补充验证：你当前tailwind.config.js的content配置已经覆盖了所有使用Tailwind类的文件，这部分无需调整。

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