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

Тази статия ще обясни метода за използване на произволни стойности в Tailwind CSS.

Как да използваме произволни стойности в Tailwind?

Произволните стойности са персонализираните стойности, които могат да бъдат записани директно в атрибута на HTML класа, без да ги дефинирате в конфигурационния файл на Tailwind. Те имат префикс с нотация в квадратни скоби, като например [24px], [2.5rem] и т.н. За да използвате произволните стойности в Tailwind, използвайте нотация в квадратни скоби и задайте произволна персонализирана стойност, за да генерирате динамично полезни класове.

Вижте изброените по-долу стъпки за по-добро разбиране:

Стъпка 1: Използвайте произволни стойности в HTML програма

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

Тук:

• “bg-[#e9e516]” клас задава цвета на фона на
  на „#e9e516“ (жълто).
• „w-[600px]“ клас задава ширината на
  на 600 пиксела.
• „h-[400px]“ класът прилага височина от 400 пиксела към елемента
  .
• „p-[13px]“ клас задава подпълването на
  на 13 пиксела.
• „m-[19px]“ клас задава границата на
  на 19 пиксела.

• „текст-[30px]“ клас задава размера на шрифта на елемента

  на 30 пиксела.

• „текст-[#7405ab]“ клас задава цвета на текста на елемента

  на лилав (#7405ab).

• „проследяване-[0,5 rem]“ класът прилага разстоянието между буквите до 0,5 rem към елемента

  .

Стъпка 2: Проверете изхода

За да се уверите, че произволните стойности работят правилно, прегледайте HTML уеб страницата:

Горният резултат показва, че произволните стойности работят правилно, както са дефинирани.

Заключение

За да използвате произволните стойности в Tailwind, използвайте нотация в квадратни скоби с всяка персонализирана стойност в HTML програмата, за да генерирате динамично класове. Потребителите могат да използват стойности за всяко свойство, което приема числова или цветна стойност, като размер на шрифта, цвят, ширина, височина, поле, подложка и т.н. Тази статия обяснява метода за използване на произволни стойности в Tailwind CSS.