创建引用其他自定义颜色的自定义实用程序

Question

我的 tailwind.config.cjs 文件中配置了几个自定义实用程序：

plugins: [
    plugin(({ addUtilities }) => {
        const utilities = {
            '.border-invalid': {
                border: '1px solid #ef4444',
            },
            [...]
        };
        addUtilities(utilities);
    }),
],

我也定义了自定义颜色，像这样

extend: {
    colors: {
        'red-50': '#FEF2F2',
        [...]   
        'red-500': '#EF4444',
        [...]
    }
}

我不想在我的自定义实用程序中使用 hard-coded 值，而是想引用我的自定义颜色，这样如果我更改调色板，我的自定义实用程序就会相应更新。所以，理想情况下，它应该是这样的：

const utilities = {
    '.border-invalid': {
        apply: 'border border-solid border-red-500',
    },

或者在我的自定义实用程序中引用 red-500 而不是 hard-coded #EF4444.

有办法实现吗？

@ihar-aliakseyenka 答案很好，我添加这个只是为了告诉第二个选择，border: "1px solid theme('colors.red-500')" 甚至在鼠标悬停时显示一个漂亮而清晰的 css 定义：

虽然第一个选项 border: 1px solid ${theme('colors.red-500')}` 仅显示 literarl 值（正如预期的那样，顺便说一句）：

Answer 1

您可以使用 theme() 指令

plugins: [
    plugin(({ addUtilities, theme }) => { // extract theme
        const utilities = {
            '.border-invalid': {
                border: `1px solid ${theme('colors.red-500')}`, // concatenate
            }
        };
        addUtilities(utilities);
    }),
  ],

// or pass it as a string
plugins: [
    plugin(({ addUtilities }) => {
        const utilities = {
            '.border-invalid': {
                border: "1px solid theme('colors.red-500')",
            }
        };
        addUtilities(utilities);
    }),
  ],

Note: you set your color as red-500, so no dot notation will be available like theme('colors.red.500') (it will cause error. Well maybe not because Tailwind has red-500 color but in any other cases it will)

DEMO

创建引用其他自定义颜色的自定义实用程序

Create custom utility referencing additional custom colors

tailwind-css