Попутный ветер меняет цвет текста во всех элементах ввода
Итак, у меня есть следующий код в нескольких местах приложения:
<label className = "input text-neutral-content">
Name
<input type = "text" className = "grow text-base-content"/>
</label>
Я знаю, что идея попутного ветра заключается в встроенном стиле, но есть ли способ глобально определить цвет текста метки и ввода, чтобы мне не приходилось повторять нейтральное по тексту содержимое и текстовое базовое содержимое в каждом вводе поле?
Ответы 3
Да, конечно. в вашем файле global.css вы можете использовать стили по умолчанию следующим образом:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
input {
@apply text-base-content
}
/* ... */
}
Вы можете прочитать больше здесь: https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer
Вы можете использовать @apply, чтобы добавить свой класс к существующему классу Tailwind. Вы можете добавить его в свой CSS-файл, примерно так:
.label {
@apply input text-neutral-content;
}
Есть два пути решения этой проблемы:
1. Использование конфигурации Tailwind.config.js:
Объявить цвета:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {
colors: {
"ligth-coffee": "#C89F94"
}
},
},
plugins: [],
}
Использование:
<p class = "text-ligth-coffee">text color</p>
2. Пользовательский класс в global.css:
Пользовательский класс pxh-text-red:
.pxh-text-red {
@apply red;
}
Использование:
<p class = "pxh-text-red">text color</p>