Как я могу добиться цвета текста rgba (0, 0, 0, 0,54) попутного ветра css?
как я могу добиться цвета текста rgba (0, 0, 0, 0,54) попутного ветра css. Я пробовал text-black-500, text-current и многие другие варианты, но не смог добиться цвета rgba (0, 0, 0, 0,54).
Ответы 4
Вам нужно определить собственный класс цвета на tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'black-rgba': 'rgba(0, 0, 0, 0.54)',
},
},
},
variants: {},
plugins: [],
}
HTML:
<span class = "text-black-rgba text-4xl">Hi there!</span>
Tailwind позволяет управлять непрозрачностью цвета с помощью классов.
Пример: text-black/50 (эквивалентно rgba(0, 0, 0, 0.5))
В Tailwind v3 есть несколько способов установить значение цвета текста rgba(0, 0, 0, 0.54):
1. Используйте произвольное значение
Для одноразовых значений не всегда имеет смысл определять их в файле конфигурации вашей темы. В таких случаях может быть быстрее и проще передать произвольное значение.
Пример: text-black/[.54]
2. Определите пользовательское значение шкалы непрозрачности 54.
В tailwind.config.js file зарегистрируйте новое значение непрозрачности.
module.exports = {
theme: {
extend: {
opacity: {
'54': '.54',
}
}
}
};
Использование: text-black/54
При выборе этой опции вы можете захотеть дать значению более описательное имя.
Если вы используете tailwindcss версии 2 или выше, вы можете использовать режим Just-in-Time. Пожалуйста, взгляните на эту ссылку. Для определенного цвета текста вы должны указать цвет в квадратных скобках. Как этот text-[rgba(0, 0, 0, 0.5)]. Это гораздо более простое решение.
Другой способ сделать это с Tailwind 2 — использовать классы: text-black text-opacity-50 или bg-black bg-opacity-50.