Tailwind este un cadru CSS care oferă un set de valori predefinite pentru diverse proprietăți, cum ar fi culori, spațiere, dimensiuni de font etc. Cu toate acestea, uneori, utilizatorii pot dori să folosească o valoare care nu este inclusă în configurația implicită, cum ar fi o personalizată. culoare sau o marjă specifică. În această situație, ei pot folosi valori arbitrare.

Acest articol va explica metoda de utilizare a valorilor arbitrare în Tailwind CSS.

Cum să utilizați valorile arbitrare în Tailwind?

Valorile arbitrare sunt valorile personalizate care pot fi scrise direct în atributul clasei HTML fără a le defini în fișierul de configurare Tailwind. Acestea sunt prefixate cu o notație pentru paranteze drepte, cum ar fi [24px], [2.5rem], etc. Pentru a utiliza valorile arbitrare din Tailwind, utilizați o notație pentru paranteze pătrate și specificați orice valoare personalizată pentru a genera clase de utilitate în mod dinamic.

Consultați pașii enumerați mai jos pentru o mai bună înțelegere:

Pasul 1: Utilizați valori arbitrare în programul HTML

Creați un program HTML și utilizați notația paranteze drepte cu orice valoare personalizată pentru a crea clasele dorite. De exemplu, am folosit „bg-[#e9e516]”, „w-[600px]”, „h-[400px]”, „p-[13px]”, si alte clase:

Aici:

• „bg-[#e9e516]” clasa setează culoarea de fundal a
  la „#e9e516” (galben).
• „w-[600px]” clasa setează lățimea
  la 600 de pixeli.
• „h-[400px]” clasa aplică înălțimea de 400 de pixeli elementului
  .
• „p-[13px]” clasa setează umplutura
  la 13 pixeli.
• „m-[19px]” clasa setează marginea
  la 19 pixeli.

• „text-[30px]” class setează dimensiunea fontului elementului

  la 30 de pixeli.

• „text-[#7405ab]” clasa setează culoarea textului elementului

  la violet (#7405ab).

• „urmărire-[0.5rem]” clasa aplică spația dintre litere la 0,5 rem la elementul

  .

Pasul 2: Verificați ieșirea

Pentru a vă asigura că valorile arbitrare funcționează corect, vizualizați pagina web HTML:

Ieșirea de mai sus indică faptul că valorile arbitrare funcționează corect așa cum au fost definite.

Concluzie

Pentru a utiliza valorile arbitrare din Tailwind, utilizați o notație pentru paranteze drepte cu orice valoare personalizată în programul HTML pentru a genera clase în mod dinamic. Utilizatorii pot folosi valori pentru orice proprietate care acceptă o valoare numerică sau de culoare, cum ar fi dimensiunea fontului, culoarea, lățimea, înălțimea, marginea, umplutura etc. Acest articol a explicat metoda de utilizare a valorilor arbitrare în CSS Tailwind.