Tailwind CSS自定义类使用@apply应用新增颜色报错如何解决

报错原因 #

• @apply 指令语法使用错误：你在@apply后额外添加了冒号，不符合Tailwind语法规范，CSS预处理器会把带冒号的内容误识别为伪类/伪元素规则，因此抛出对应报错。
• tailwind.config.js 配置结构错误：colors字段应该放在theme配置对象内部，你当前将它放在了theme的同级位置，Tailwind无法识别你自定义的颜色配置。

修复方案 #

1. 修正index.scss中的@apply语法，删除后面的冒号
2. 调整tailwind.config.js的结构，把colors字段移入theme对象内。如果你需要保留Tailwind默认的其他颜色，只新增自定义颜色，建议将colors放在theme.extend字段下，否则你配置的colors会覆盖所有Tailwind默认颜色。

修正后的index.scss代码

// index.scss
// Here I am trying to apply green-100 as a background color
.focus-unanswered-question {
  @apply bg-green-100;
  transition: background-color 1s ease;
}

修正后的tailwind.config.js（覆盖默认颜色版本）

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      black: '#000',
      white: '#FFF',
      status: {
        yellow: '#ffbf29',
        red: '#cc2a18',
      },
      green: {
        100: '#fbfcfc',
      }
    }
  }
}

修正后的tailwind.config.js（保留默认颜色版本）

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        status: {
          yellow: '#ffbf29',
          red: '#cc2a18',
        },
        green: {
          100: '#fbfcfc',
        }
      }
    }
  }
}

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