En rubrik ser balanserad ut på datorn men blir trång på mobilen, medan brödtexten känns gles på båda skärmarna. I Tailwind styr du radavståndet med klasser som leading-relaxed eller leading-6, men valet beror på om du vill att avståndet ska följa textstorleken.
Välj radavstånd efter textstorlek och användning
leading-normalger ett relativt radavstånd som följer teckenstorleken.leading-6sätter ett fast avstånd från Tailwinds avståndsskala.text-lg/7ställer in textstorlek och radavstånd i samma klass.leading-[1.7]passar när du behöver ett eget värde.md:leading-6låter radavståndet ändras vid en brytpunkt.
Välj mellan ett skalbart och ett fast radavstånd
Två klasser kan se likadana ut i en viss rubrik, men reagera olika när teckenstorleken ändras. leading-normal använder ett relativt värde, medan leading-6 hämtar ett fast mått från avståndsskalan.
Relativa klasser som leading-tight, leading-snug, leading-normal, leading-relaxed och leading-loose skalar med textstorleken. De passar när samma typografiska stil ska fungera med flera storlekar. Ett fast värde som leading-6 passar bättre när du vill låsa radboxens höjd, exempelvis i en kompakt knapp eller en etikett.
Jag tycker att relativa värden är en bättre start för vanlig brödtext, eftersom de inte låser radavståndet till ett enda mått. För täta komponenter kan ett fast värde däremot ge mer förutsägbara mått.
text-lg/7 samlar storlek och radavstånd
När textstorleken och radavståndet hör ihop kan du sätta båda med en klass, till exempel text-lg/7. I Tailwind blir den ungefär 18 pixlar stor med ett radavstånd på 28 pixlar, så du slipper kombinera text-lg och leading-7 separat.
Det finns en detalj som lätt missas: en storleksklass som text-lg har redan ett standardvärde för radavstånd. Om du lägger till en leading-*-klass skriver du över det standardvärdet. Tailwinds dokumentation om textstorlekar visar hur storlek och radavstånd kan anges tillsammans, vilket är praktiskt när du vill hålla dem nära varandra i koden.
För en ingress kan text-lg/7 ge ett tydligt, jämnt resultat. Om du testar en egen storlek med text-[19px], behöver du däremot ange radavståndet separat eller använda en kombinerad storleks- och radavståndssyntax med ett anpassat värde.
Enhetslösa värden följer texten bättre än pixlar
En enhetslös klass som leading-[1.7] betyder att radavståndet är 1,7 gånger textstorleken. Om texten växer följer radavståndet med, till skillnad från exempelvis ett fast värde uttryckt i pixlar.
Det är en användbar skillnad för responsiv text och förstoring. MDN:s beskrivning av CSS-egenskapen line-height förklarar också att enhetslösa värden skalar proportionerligt när texten förstoras. Ett fast mått kan fortfarande vara rätt val i en kontroll med bestämd höjd, men i löptext kan det bli trångt när tecknen blir större.
Om du behöver ett värde utanför standardklasserna kan du använda leading-[1.7] eller koppla radavståndet till en CSS-variabel med leading-(--line-height-body). Anpassade värden är smidiga, men jag skulle reservera dem för återkommande designbehov i stället för att ge varje textblock ett eget tal.
Ändra radavståndet när layouten faktiskt behöver det
En smal mobilvy kan göra att en rubrik bryts över tre rader, medan den ligger på en rad på en bred skärm. Med en responsiv variant kan du justera radavståndet där det behövs, till exempel leading-tight md:leading-snug.
Prefixet md: aktiverar den klassen från Tailwinds medelstora brytpunkt och uppåt. Tabellen hjälper dig välja ett första test utan att behandla klasserna som universella recept:
| Situation | Trolig effekt | Testa |
|---|---|---|
| Brödtextens rader känns hoptryckta | Texten får för lite vertikalt utrymme | leading-relaxed |
| En stor rubrik ser glest staplad ut | Standardavståndet kan kännas för stort för rubrikstorleken | leading-tight |
| Radavståndet ska vara lika på alla skärmar | Ett fast värde ger ett mer låst mått | leading-6 |
| Rubriken behöver mer luft på mobil än på dator | En enda regel passar inte båda layouterna | leading-snug md:leading-tight |
Kontrollera resultatet med den faktiska fonten och texten, inte bara i en kort förhandsvisning. Bokstäver med höga upp- och nedstaplar kan kännas trängre än en exempelrad, även när klassen är densamma.
Kontrollera Tailwind-versionen innan du ändrar temat
En klass kan se korrekt ut i markupen men ändå sakna den effekt du väntar dig om den anpassade skalan hör till ett annat versionsupplägg. I Tailwind CSS v4 definieras temavärden vanligtvis i CSS med @theme, medan många v3-projekt använder tailwind.config.js.
I v4 kan ett återanvänt relativt värde läggas till så här:
@theme {
--leading-reading: 1.7;
}Då kan du använda leading-reading i markupen. I ett v3-projekt lägger du i stället till värdet under theme.extend.lineHeight i konfigurationsfilen. Tailwinds uppgraderingsguide från v3 till v4 beskriver versionsskillnaderna; särskilt värt att kontrollera är att JavaScript-konfiguration inte upptäcks automatiskt på samma sätt i v4.
Finjustera först när texten är på plats
Radavstånd går lätt att justera, men bedöm det tillsammans med radlängd, teckenstorlek och font. Börja med en standardklass, granska en hel paragraf på mobil och dator och välj ett anpassat värde först när standardstegen inte räcker.
Om layouten känns fel trots att radavståndet är rimligt kan orsaken vara den fasta bredden på textkolumnen eller en font med annorlunda proportioner. Då hjälper det sällan att pressa ihop varje rad. Justera den minsta möjliga mängden och låt textens läsbarhet styra snarare än att försöka få alla komponenter att dela samma klass.