Tre Tailwind-klasser som gjør hverdagen litt lettere
Av Elise Fiskeseth
Tailwind er et CSS-rammeverk som lar oss style brukergrensesnitt ved å kombinere små, enkle klasser direkte i HTML. Det har blitt en naturlig del av verktøykassa vår, men med så mange tilgjengelige klasser er det lett å overse de små, praktiske favorittene. Her er tre utilities som løser vanlige frontend-problemer på en ryddig og effektiv måte.
1. aspect-square
Når man jobber med bilder, er det ofte et eller annet som hopper rundt i det innholdet laster. aspect-square sørger for at elementet holder formen sin fra start, og at layouten ikke flytter seg ved innlasting.
<div class="w-64 aspect-square">
<img src="/julenisse.jpg" class="object-cover w-full h-full" />
</div>
Enkelt, men utrolig nyttig!
2. line-clamp-*
Bruker-input som blir litt lengre enn forventet? Klassikeren.
Med line-clamp-2 eller line-clamp-3 kan du begrense tekstmengden uten å skrive en linje JavaScript. Tailwind fikser ellipsis automatisk, og UI-en holder seg ryddig.
<p class="line-clamp-2">
Dette er en litt for lang tekst som gjerne skulle stoppet etter et par linjer...
</p>
Passer perfekt i kort, tabeller og feed-komponenter.
3. sr-only
sr-only gjør at noe er usynlig visuelt, men fortsatt tilgjengelig for skjermlesere.
En liten, men veldig nyttig detalj for bedre UX.
<button>
<svg><!-- ikon --></svg>
<span class="sr-only">Åpne meny</span>
</button>
For spesielt interesserte ligger det mye mer å utforske i Tailwinds egen dokumentasjon:
https://tailwindcss.com/docs