如何在 Tailwind 中设置颜色样式？

【问题标题】：How to style color in Tailwind?如何在 Tailwind 中设置颜色样式？
【发布时间】：2021-05-28 17:01:54
【问题描述】：

我想让我的文本颜色为红色，但它不起作用。但后台运行良好。

我试过这个：

const colors = require('tailwindcss/colors');

module.exports = {
  purge: ['./src/**/*.js'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        'light-blue': colors.lightBlue,
        cyan: colors.cyan,
        'fuchsia': colors.fuchsia,
        fuchsia: colors.fuchsia,
        red: '#60A5FA'
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

并且想让我的文字变成红色。

<p className='red'>Red</p>

为什么它不起作用？

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

要将文本变为红色，您需要在这里使用text-red，颜色只是用于边框、阴影等的东西。不仅为文本颜色。这就是您需要指定它的原因。

更多官方文档：https://v1.tailwindcss.com/docs/text-color#app

关于颜色定制：https://v1.tailwindcss.com/docs/customizing-colors#app

您可以使用this playground 进行测试，这是一个可行的解决方案：https://play.tailwindcss.com/fCziM7VHas

请注意，我在这里使用bg-fuchsia-500，因为您使用的是 TailwindCSS 的默认颜色，并且默认配置下它从 100 下降到 900。更多在上面链接的文档中。

【讨论】：