Question

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

我试过这个：

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>

为什么它不起作用？

Answer 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。上面链接的文档中有更多内容。

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

1 个答案: