Tailwind — это среда CSS, которая предлагает набор предопределенных значений для различных свойств, таких как цвета, интервалы, размеры шрифта и т. д. Однако иногда пользователям может потребоваться использовать значение, не включенное в конфигурацию по умолчанию, например пользовательское цвет или определенное поле. В этой ситуации они могут использовать произвольные значения.

В этой статье объясняется, как использовать произвольные значения в Tailwind CSS.

Как использовать произвольные значения в Tailwind?

Произвольные значения — это пользовательские значения, которые можно записать непосредственно в атрибут класса HTML, не определяя их в файле конфигурации Tailwind. Перед ними стоит квадратная скобка, например [24px], [2.5rem] и т. д. Чтобы использовать произвольные значения в Tailwind, используйте квадратную скобку и укажите любое пользовательское значение для динамического создания служебных классов.

Ознакомьтесь с приведенными ниже шагами для лучшего понимания:

Шаг 1. Используйте произвольные значения в программе HTML

Создайте программу HTML и используйте нотацию квадратных скобок с любым пользовательским значением для создания нужных классов. Например, мы использовали «bg-[#e9e516]», «w-[600px]», «h-[400px]», «p-[13px]», и другие классы:

Здесь:

• «бг-[#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.