tailwind：自定义 xxx 基色而不丢失 xxx-100、xxx-200 等类

Question

我想在 tailwind.css 中定义一个 text-blue 颜色而不丢失 text-blue-100、text-blue-200 等

我遵循这个指南：https://tailwindcss.com/docs/customizing-colors#extending-the-defaults

然后我尝试：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: '#5F99F7'
      }
    }
  }
}

但是所有的 text-blue-xxx 都消失了

有什么办法解决吗？

Answer 1

如果您希望 class 成为 text-blue，则需要使用 DEFAULT 关键字。您还需要将蓝色设为对象。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          'DEFAULT': '#5F99F7'
        },
      }
    }
  }
}