Tailwind er en CSS-ramme, der tilbyder et sæt foruddefinerede værdier for forskellige egenskaber, såsom farver, mellemrum, skriftstørrelser osv. Nogle gange vil brugere dog måske bruge en værdi, der ikke er inkluderet i standardkonfigurationen, såsom en brugerdefineret farve eller en bestemt margen. I denne situation kan de bruge vilkårlige værdier.

Denne artikel vil forklare metoden til at bruge vilkårlige værdier i Tailwind CSS.

Hvordan udnytter man vilkårlige værdier i medvind?

Vilkårlige værdier er de brugerdefinerede værdier, der kan skrives direkte i HTML-klasseattributten uden at definere dem i Tailwind-konfigurationsfilen. De er præfikset med en firkantet parentes-notation, såsom [24px], [2.5rem] osv. For at bruge de vilkårlige værdier i Tailwind, skal du bruge en firkantet parentes-notation og specificere enhver brugerdefineret værdi for at generere værktøjsklasser dynamisk.

Tjek nedenstående trin for bedre forståelse:

Trin 1: Brug vilkårlige værdier i HTML-program

Lav et HTML-program og brug den firkantede parentes med en hvilken som helst brugerdefineret værdi til at oprette de ønskede klasser. For eksempel har vi brugt 'bg-[#e9e516]', 'w-[600px]', 'h-[400px]', 'p-[13px]', og andre klasser:

Her:

• 'bg-[#e9e516]' klasse indstiller baggrundsfarven for
  til '#e9e516' (gul).
• 'w-[600px]' klasse indstiller bredden af ​​
  til 600 pixels.
• 'h-[400px]' klasse anvender højden på 400 pixels på
  -elementet.
• 'p-[13px]' klasse indstiller udfyldningen af ​​
  til 13 pixels.
• 'm-[19px]' klasse indstiller marginen for
  til 19 pixels.

• 'tekst-[30px]' klasse indstiller skriftstørrelsen på

  -elementet til 30 pixels.

• 'tekst-[#7405ab]' klasse sæt

  elementets tekstfarve til lilla (#7405ab).

• 'sporing-[0.5rem]' klasse anvender bogstavmellemrummet til 0,5 rem til

  element.

Trin 2: Bekræft output

Se HTML-websiden for at sikre, at de vilkårlige værdier fungerer korrekt:

Ovenstående output indikerer, at de vilkårlige værdier fungerer korrekt, som de blev defineret.

Konklusion

For at bruge de vilkårlige værdier i Tailwind skal du bruge en notation med firkantet parentes med en hvilken som helst brugerdefineret værdi i HTML-programmet for at generere klasser dynamisk. Brugere kan bruge værdier for enhver egenskab, der accepterer en numerisk eller farveværdi, såsom skriftstørrelse, farve, bredde, højde, margen, polstring osv. Denne artikel har forklaret metoden til at bruge vilkårlige værdier i Tailwind CSS.