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

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

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

tailwind docs reference

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] 或任何您想要的颜色。