Проблемы непрозрачности динамических цветов в TailwindCSS
ТЛ;ДР
text-primary-500/50 не работает должным образом.
Объявить динамический цвет
У меня есть цвет primary. Этот цвет не имеет каких-либо определенных настроек; вместо этого я назначаю существующие цвета на основе шаблона. Если родительский элемент имеет класс theme-red, цвет primary должен по существу совпадать с цветом red. Если родительский элемент имеет класс theme-blue, цвет primary должен соответствовать цвету blue. По умолчанию основной цвет — красный.
Я реализовал это в следующем примере.
Пример
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
500: 'var(--color-primary-500)',
},
},
},
},
}<script src = "https://cdn.tailwindcss.com/3.4.5"></script>
<style type = "text/tailwindcss">
@layer utilities {
.theme-red {
--color-primary-500: theme('colors.red.500');
}
.theme-blue {
--color-primary-500: theme('colors.blue.500');
}
}
</style>
<div>
<div class = "text-green-500">
Default Green Color
</div>
<div class = "text-green-500/50">
Default Green Color With Opacity
</div>
</div>
<!-- Not working examples with dynamic primary color -->
<div class = "theme-red">
<div class = "text-primary-500">
Example Red Theme
</div>
<div class = "text-primary-500/50">
Example Red Theme With Opacity
</div>
</div>
<div class = "theme-blue">
<div class = "text-primary-500">
Example Blue Theme
</div>
<div class = "text-primary-500/50">
Example Blue Theme With Opacity
</div>
</div>Результат
Непрозрачность динамических цветов не работает
Проблема возникает с прозрачными цветами, например text-primary-500/50. То есть должно быть text-primary-500 с непрозрачностью 0,5. Это не работает, потому что text-primary-500 по сути является шестнадцатеричным цветом, но в CSS мы ожидали цветовой код RGB, который затем можно было бы смешать с непрозрачностью по шкале от 0 до 1. Как мне заставить его работать так, чтобы text-primary-500/50 функционировал аналогично моей написанной логике?
Ожидаемое поведение
Я ожидал, что основной цвет будет работать так же, как и базовые цвета, как показано зеленым цветом в предыдущем результате. Вот пример того, чего бы мне хотелось.
Ответы 1
Вы можете рассмотреть возможность использования color-mix() в определении цвета. Это позволяет использовать токен Tailwind <alpha-value>, чтобы влиять на прозрачность переменной CSS, которая не находится в формате компонента HSL или RGB:
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
500: 'color-mix(in srgb, var(--color-primary-500) calc(100% * <alpha-value>), transparent)',
},
},
},
},
}<script src = "https://cdn.tailwindcss.com/3.4.5"></script>
<style type = "text/tailwindcss">
@layer utilities {
.theme-red {
--color-primary-500: theme('colors.red.500');
}
.theme-blue {
--color-primary-500: theme('colors.blue.500');
}
}
</style>
<div class = "theme-red">
<div class = "text-primary-500">
Example Red Theme
</div>
<div class = "text-primary-500/50">
Example Red Theme With Opacity
</div>
</div>
<div class = "theme-blue">
<div class = "text-primary-500">
Example Blue Theme
</div>
<div class = "text-primary-500/50">
Example Blue Theme With Opacity
</div>
</div>В качестве альтернативы вы можете рассмотреть возможность пересмотра определения переменной CSS внутри плагина Tailwind. Это позволяет манипулировать значениями в формате компонентов HSL или RGB. Тогда токен <alpha-value> можно будет использовать более «естественно» в функции rgb() или hsl() CSS:
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
500: 'rgb(var(--color-primary-500) / <alpha-value>)',
},
},
},
},
plugins: [
tailwind.plugin(({ addBase, theme }) => {
const toRgb = (hex) => {
const r = parseInt(hex.substring(1, 3), 16);
const g = parseInt(hex.substring(3, 5), 16);
const b = parseInt(hex.substring(5, 7), 16);
return `${r} ${g} ${b}`;
};
addBase({
'.theme-red': {
'--color-primary-500': toRgb(theme('colors.red.500')),
},
'.theme-blue': {
'--color-primary-500': toRgb(theme('colors.blue.500')),
},
});
}),
],
}<script src = "https://cdn.tailwindcss.com/3.4.5"></script>
<div class = "theme-red">
<div class = "text-primary-500">
Example Red Theme
</div>
<div class = "text-primary-500/50">
Example Red Theme With Opacity
</div>
</div>
<div class = "theme-blue">
<div class = "text-primary-500">
Example Blue Theme
</div>
<div class = "text-primary-500/50">
Example Blue Theme With Opacity
</div>
</div>Во-вторых, позволяет более программную генерацию, но может быть сложно поддерживать различные «исходные» форматы значений цвета.
Спасибо за ответы! Еще один вопрос: какое из двух решений вы бы предпочли и почему? Второй мне кажется более привлекательным. Вы можете написать функцию, которая позволяет передавать в объект функции переменные для каждого цвета от 25 до 975.