Question

这是我的 tailwind.config.js：

const colors = require('tailwindcss/colors')

module.exports = {
    purge: {
        content: ['./pages/**/*.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}'],
    },
    theme: {
        colors: {
            'BASE_YELLOW': '#C9FB5C',
            'black': '000',
        },
    },
    variants: {},
    plugins: [],
}

还有我的 React 组件 div：

<div className="w-full min-h-screen flex items-center justify-center bg-gradient-to-r from-colors.BASE_YELLOW to-colors.black ...">

但屏幕只是灰色。如何在渐变中使用这些颜色？

Answer 1

除非您打算覆盖所有 Tailwind 颜色，否则 extending the defaults 效果最佳。

module.exports = {
 purge: {
  content: ['./pages/**/*.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}'],
 },
 theme: {
  extend: {
   colors: {
    'BASE_YELLOW': '#C9FB5C',
     'black': '000',
   }
  }
 },
 variants: {},
 plugins: [],
}

使用颜色时，您无需在名称中添加 colors 键。

<div className="w-full min-h-screen flex items-center justify-center bg-gradient-to-r from-BASE_YELLOW to-black ...">

如何使用 Tailwind 和 React 为渐变添加自定义颜色？

1 个答案: