Tailwind CSS：如何在 tailwind.config.js 中使用颜色变量

Question

我想将颜色变量（默认或扩展）用于我的扩展主题，例如：

module.exports = {
    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {
            colors: {
                lime: {
                    '100': 'green'
                }
            },
            backgroundColor: {
                skin: {
                    base: 'bg-red-500',
                    secondary: 'lime-100',
                },
            },
        },
    },
    plugins: [],
};

但这不起作用。我怎样才能有一个bg-skin-base相当于 的类bg-red-500和另一个bg-skin-secondary相当于 的类bg-[green]？

Answer 1

没有背景颜色。在扩展 > 颜色下添加的任何颜色均可用于text-、等bg-。border-

只要在颜色下添加皮肤就可以了。

Tailwind 文档参考

const colors = require("tailwindcss/colors")

extend: {
   colors: {
      lime: {
        '100': 'green'
      },
      skin: {
        base: '#yourhex",
        secondary: '#yourhex",
        third: colors.violet["500"]
      }
   },
}

您不能像在基础示例中那样使用 bg-red-500 。如果您想要为顺风颜色别名，您可以使用十六进制或使用顺风颜色，const colors = require("tailwindcss/colors")然后您可以执行colors.red[500]或任何您想要的颜色。