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

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 for testing, here is a working solution: https://play.tailwindcss.com/fCziM7VHas

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

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

How to style color in Tailwind?

css

tailwind-css