顺风：自定义 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

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

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