Как объявить свои собственные классы, похожие на `bg-colorname` как утилита` custom-*`, которая может принять вложенные ⇐ CSS

[Anonymous]

Я хочу написать пользовательский класс (утилита), который применяет набор стилей, но я хочу иметь возможность использовать его вместе с цветом для темы. Вероятно, это будет легче объяснить это примером.

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

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

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

< /code>
Поэтому я начал экспериментировать с плагинами и компонентами Tailwind V3. Я написал плагин таким: < /p>
function ({ matchComponents, theme }) {
const getStyles = (color) => {
return {
position: 'relative',
'&::before': {
backgroundColor: color
// ...
}
};
};

matchComponents({
testbg: (value) => getStyles(value)
}, {
values: theme('colors')
});
}
< /code>
И это почти сработало. Я имею в виду, что он работает для простого цвета, как красный 

. Но мой цветной поддон более сложный и вложенный .

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

theme: {
colors: {
primary: {
DEFAULT: '#....'
5: '#....'
10: '#....'
50: '#....'
},
secondary: {
5: '#....'
10: '#....'
},
red: '#....'
}
}
< /code>
И, к сожалению, он не генерировал все возможности цвета. Он просто потребовался «мелкие» ключи цветов и сгенерированные классы, такие как Custom-Primary 

, пользовательский второй , Custom-Red . Но нет никакого пользовательского primary-5 , например.
Так есть ли это простой способ сделать это? Я предполагаю, что я мог бы вручную проанализировать цвета из темы и рекурсивно пройти через объект и создавать отдельный компонент для каждого. Но это кажется совершенно странной вещью, поскольку то, что я пытаюсь сделать, кажется действительно основным вариантом использования для такого инструмента, как Tailwind.

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