Tailwind är ett CSS-ramverk som erbjuder en uppsättning fördefinierade värden för olika egenskaper, såsom färger, mellanrum, teckenstorlekar, etc. Men ibland kanske användare vill använda ett värde som inte ingår i standardkonfigurationen, till exempel en anpassad färg eller en specifik marginal. I den här situationen kan de använda godtyckliga värden.

Den här artikeln kommer att förklara metoden för att använda godtyckliga värden i Tailwind CSS.

Hur kan man använda godtyckliga värden i medvind?

Godtyckliga värden är de anpassade värden som kan skrivas direkt i HTML-klassattributet utan att definiera dem i Tailwind-konfigurationsfilen. De är prefixerade med en hakparentesnotation, såsom [24px], [2.5rem], etc. För att använda de godtyckliga värdena i Tailwind, använd en hakparentesnotation och specificera ett anpassat värde för att generera verktygsklasser dynamiskt.

Kolla in stegen nedan för bättre förståelse:

Steg 1: Använd godtyckliga värden i HTML-programmet

Gör ett HTML-program och använd hakparentesnotationen med valfritt anpassat värde för att skapa de önskade klasserna. Till exempel har vi använt 'bg-[#e9e516]', 'w-[600px]', 'h-[400px]', 'p-[13px]', och andra klasser:

Här:

• 'bg-[#e9e516]' klass ställer in bakgrundsfärgen för
  till “#e9e516” (gul).
• 'w-[600px]' klass ställer in bredden på
  till 600 pixlar.
• 'h-[400px]' klass tillämpar höjden på 400 pixlar på
  -elementet.
• 'p-[13px]' class ställer in utfyllnaden för
  till 13 pixlar.
• 'm-[19px]' klass anger marginalen för
  till 19 pixlar.

• 'text-[30px]' class ställer in teckenstorleken för

  -elementet till 30 pixlar.

• 'text-[#7405ab]' klass ställ in

  -elementets textfärg till lila (#7405ab).

• 'spårning-[0.5rem]' class tillämpar bokstavsmellanrummet på 0,5 rem till

  -elementet.

Steg 2: Verifiera utdata

Se HTML-webbsidan för att säkerställa att de godtyckliga värdena fungerar korrekt:

Ovanstående utdata indikerar att de godtyckliga värdena fungerar korrekt som de definierades.

Slutsats

För att använda de godtyckliga värdena i Tailwind, använd en notation med hakparenteser med valfritt anpassat värde i HTML-programmet för att generera klasser dynamiskt. Användare kan använda värden för vilken egenskap som helst som accepterar ett numeriskt eller färgvärde, såsom teckenstorlek, färg, bredd, höjd, marginal, utfyllnad, etc. Den här artikeln har förklarat metoden för att använda godtyckliga värden i Tailwind CSS.