tailwind-css - Tailwind CSS : how to use color variables in 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-red-500 等效的类 bg-skin-base 以及另一个等效的类 bg-skin-secondary到bg-[绿色]？

Answer 1

没有背景颜色。在扩展 > 颜色下添加的任何颜色均可用于 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]或者任何你想要的颜色。