Tailwind is een CSS-framework dat een set vooraf gedefinieerde waarden biedt voor verschillende eigenschappen, zoals kleuren, spatiëring, lettergroottes, enz. Soms willen gebruikers echter een waarde gebruiken die niet is opgenomen in de standaardconfiguratie, zoals een aangepaste kleur of een bepaalde marge. In deze situatie kunnen ze willekeurige waarden gebruiken.

In dit artikel wordt de methode uitgelegd om willekeurige waarden te gebruiken in Tailwind CSS.

Hoe gebruik je willekeurige waarden in Tailwind?

Willekeurige waarden zijn de aangepaste waarden die rechtstreeks in het HTML-klassekenmerk kunnen worden geschreven zonder ze in het Tailwind-configuratiebestand te definiëren. Ze worden voorafgegaan door een notatie tussen vierkante haken, zoals [24px], [2.5rem], enz. Om de willekeurige waarden in Tailwind te gebruiken, gebruikt u een notatie tussen vierkante haken en geeft u een aangepaste waarde op om dynamisch hulpprogrammaklassen te genereren.

Bekijk de onderstaande stappen voor een beter begrip:

Stap 1: gebruik willekeurige waarden in het HTML-programma

Maak een HTML-programma en gebruik de vierkante hakennotatie met elke aangepaste waarde om de gewenste klassen te maken. We hebben bijvoorbeeld de 'bg-[#e9e516]', 'w-[600px]', 'h-[400px]', 'p-[13px]', en andere klassen:

Hier:

• 'bg-[#e9e516]' klasse stelt de achtergrondkleur van de
  in op '#e9e516' (geel).
• 'w-[600px]' klasse stelt de breedte van de
  in op 600 pixels.
• 'h-[400px]' class past de hoogte van 400 pixels toe op het
  -element.
• 'p-[13px]' klasse stelt de opvulling van de
  in op 13 pixels.
• 'm-[19px]' klasse stelt de marge van de
  in op 19 pixels.

• 'tekst-[30px]' class stelt de lettergrootte van het

  -element in op 30 pixels.

• 'tekst- [#7405ab]' class stelt de tekstkleur van het

  -element in op paars (#7405ab).

• 'tracking-[0.5rem]' class past de letterafstand toe op 0,5 rem op het

  -element.

Stap 2: uitvoer controleren

Bekijk de HTML-webpagina om ervoor te zorgen dat de willekeurige waarden correct werken:

De bovenstaande uitvoer geeft aan dat de willekeurige waarden correct werken zoals ze zijn gedefinieerd.

Conclusie

Om de willekeurige waarden in Tailwind te gebruiken, gebruikt u een notatie tussen vierkante haken met een willekeurige aangepaste waarde in het HTML-programma om klassen dynamisch te genereren. Gebruikers kunnen waarden gebruiken voor elke eigenschap die een numerieke of kleurwaarde accepteert, zoals lettergrootte, kleur, breedte, hoogte, marge, opvulling, enz. Dit artikel heeft de methode uitgelegd om willekeurige waarden te gebruiken in Tailwind CSS.