Tailwind — это среда CSS, которая предлагает набор предопределенных значений для различных свойств, таких как цвета, интервалы, размеры шрифта и т. д. Однако иногда пользователям может потребоваться использовать значение, не включенное в конфигурацию по умолчанию, например пользовательское цвет или определенное поле. В этой ситуации они могут использовать произвольные значения.
В этой статье объясняется, как использовать произвольные значения в Tailwind CSS.
Как использовать произвольные значения в Tailwind?
Произвольные значения — это пользовательские значения, которые можно записать непосредственно в атрибут класса HTML, не определяя их в файле конфигурации Tailwind. Перед ними стоит квадратная скобка, например [24px], [2.5rem] и т. д. Чтобы использовать произвольные значения в Tailwind, используйте квадратную скобку и укажите любое пользовательское значение для динамического создания служебных классов.
Ознакомьтесь с приведенными ниже шагами для лучшего понимания:
Шаг 1. Используйте произвольные значения в программе HTML
Создайте программу HTML и используйте нотацию квадратных скобок с любым пользовательским значением для создания нужных классов. Например, мы использовали «bg-[#e9e516]», «w-[600px]», «h-[400px]», «p-[13px]», и другие классы:
< тело >
< див сорт '=' 'bg-[#e9e516] w-[600px] h-[400px] p-[13px] m-[19px]' >
< h1 сорт '=' 'текст-[30px]' > Подсказка для Linux < / h1 >
< h2 сорт '=' 'текст-[#7405ab]' > Добро пожаловать < / h2 >
< п сорт '=' 'отслеживание-[0.5rem]' > Узнать о попутном ветре < / п >
< / див >
< / тело >
Здесь:
- «бг-[#e9e516]» класс устанавливает цвет фона на “#e9e516” (желтый).
- «w-[600px]» класс устанавливает ширину
в 600 пикселей.- «ч-[400px]» класс применяет высоту 400 пикселей к элементу
.- «р-[13px]» класс устанавливает отступ
равным 13 пикселям.- «м-[19px]» класс устанавливает поле
равным 19 пикселям.- «текст-[30px]» class устанавливает размер шрифта элемента
равным 30 пикселям.
- «текст-[#7405ab]» класс устанавливает фиолетовый цвет текста элемента
(#7405ab).
- «отслеживание-[0,5 бэр]» класс применяет межбуквенный интервал 0,5 rem к элементу
.
Шаг 2: проверьте вывод
Чтобы убедиться, что произвольные значения работают правильно, просмотрите веб-страницу в формате HTML:
Приведенный выше вывод показывает, что произвольные значения работают правильно, как они были определены.
Заключение
Чтобы использовать произвольные значения в Tailwind, используйте обозначение квадратных скобок с любым пользовательским значением в программе HTML для динамического создания классов. Пользователи могут использовать значения для любого свойства, которое принимает числовое значение или значение цвета, например размер шрифта, цвет, ширину, высоту, поля, отступы и т. д. В этой статье объясняется метод использования произвольных значений в Tailwind CSS.
- «w-[600px]» класс устанавливает ширину