Tailwind — пользовательский класс в сочетании с вложенной цветовой палитрой. ⇐ CSS

[Anonymous]

Я хочу написать собственный класс, который будет применять набор стилей, но я хочу иметь возможность использовать его вместе с цветом темы. Вероятно, будет проще объяснить это на примере.
Например, если мы хотим установить фон определенного цвета, мы должны добавить такой класс:
< pre class="lang-html Prettyprint-override">

Код: Выделить всё

И вместо фона я хотел бы иметь свой собственный класс, который бы применял новый набор стилей, но который я все равно могу использовать вместе с цветом:
p>

Код: Выделить всё

Итак, я начал экспериментировать с плагинами и компонентами Tailwind. Я написал такой плагин:

Код: Выделить всё

function ({ matchComponents, theme }) {
const getStyles = (color) => {
return {
position: 'relative',
'&::before': {
backgroundColor: color
// ...
}
};
};

matchComponents({
testbg: (value) => getStyles(value)
}, {
values: theme('colors')
});
}

И это почти сработало. Я имею в виду, что он работает для простого цвета, например красного. Но моя цветовая палитра более сложная и вложенная.

Код: Выделить всё

theme: {
colors: {
primary: {
DEFAULT: '#....'
5: '#....'
10: '#....'
50: '#....'
},
secondary: {
5: '#....'
10: '#....'
},
red: '#....'
}
}

И, к сожалению, он не предоставил все возможности цвета. Он просто взял «мелкие» ключи цветов и сгенерировал классы, такие как custom-primary, custom-вторичный, custom-red. Но, например, не существует custom-primary-5.
Так есть ли простой способ сделать это? Думаю, я мог бы вручную проанализировать цвета из темы, рекурсивно просмотреть объект и создать для каждого отдельный компонент. Но это кажется совершенно странным поступком, поскольку то, что я пытаюсь сделать, похоже на действительно простой вариант использования такого инструмента, как Tailwind.

Подробнее здесь: https://stackoverflow.com/questions/792 ... lor-pallet