Verktyg för bredd

Att ange elementbredder är en av de vanligaste layoutuppgifterna i CSS. Tailwind tillhandahåller verktygsfamiljen w-*, som omfattar fasta storlekar, bråkdelar, procentbaserade storlekar och storlekar relaterade till visningsområdet. I stället för att memorera pixelvärden arbetar du med Tailwinds enhetliga skala för mellanrum och semantiska nyckelord som motsvarar väl utformade CSS-värden.

Fasta bredder följer Tailwinds skala för mellanrum, där varje enhet motsvarar 4px (0.25rem). Därför är w-4 16px, w-16 64px och w-64 256px. Skalan går upp till w-96 (384px). Dessa värden passar perfekt för ikoner, avatarer, sidopaneler och alla element med en känd, fast storlek som inte ska ändras med visningsområdets bredd.

Verktyg för bredder som bråkdelar uttrycker bredden som en andel av den överordnade behållaren. Tailwind stöder halvor (w-1/2), tredjedelar (w-1/3, w-2/3), fjärdedelar (w-1/4 till w-3/4), femtedelar och sjättedelar. Dessa kompileras till procentvärden – till exempel blir w-1/3 width: 33.333333% – vilket gör dem idealiska för layouter med kolumner sida vid sida.

w-full anger bredden till 100 % av den överordnade behållaren, medan w-screen anger bredden till 100vw (visningsområdets bredd). Skillnaden spelar roll när den överordnade behållaren inte täcker hela visningsområdet: w-full fyller den överordnade behållaren, men w-screen fyller alltid hela webbläsarfönstret och kan orsaka horisontell översvämning om det finns en rullningslist. Använd w-screen för överlägg över hela visningsområdet och w-full i övriga fall.

w-auto låter elementet få sin naturliga bredd eller den bredd som innehållet kräver. Detta är webbläsarens standard för de flesta blockelement, men du kan behöva ange det uttryckligen för att åsidosätta en större bredd som satts vid en annan brytpunkt. Det används ofta när du går från w-full på mobiler tillbaka till automatisk storleksanpassning på datorer, till exempel för en knapp som bara ska vara lika bred som sin text.

Tre moderna breddnyckelord hjälper element att anpassa storleken efter innehållet: w-fit gör elementet lika brett som innehållet (ungefär som fit-content), w-min anger den minsta innehållsbredden (krymper till det längsta ordet som inte kan brytas) och w-max expanderar till den maximala innehållsbredden utan radbrytning. Dessa är användbara för taggar, piller, verktygstips och infogade etiketter.

När den inbyggda skalan inte täcker ditt exakta behov kan du använda syntaxen för godtyckliga värden: w-[347px] eller w-[calc(100%-2rem)]. JIT-motorn kompilerar detta till exakt det CSS-värdet. Godtyckliga värden är praktiska, men kringgår designsystemet, så använd dem sparsamt – kontrollera först om ett värde från skalan, som en bråkdel eller en fast storlek, ger samma visuella resultat.

Att kombinera responsiva prefix med breddverktyg är ett av de mest kraftfulla mönstren i Tailwind. Ett vanligt mönster är w-full sm:w-1/2 lg:w-1/3: full bredd på mobiler, halva bredden på små skärmar och en tredjedel på stora skärmar. Detta skapar en responsiv kortlayout med en enda uppsättning verktygsklasser, utan CSS med mediefrågor.

Medan w-* anger en exakt bredd sätter max-w-* en övre gräns. Det viktigaste verktyget för maximal bredd är max-w-prose, som begränsar texten till ungefär 65 tecken per rad – den optimala läsbarheten enligt typografisk forskning. max-w-sm till max-w-7xl ger semantiska behållarbredder som motsvarar vanliga designbrytpunkter.

Inuti en flexbehållare samverkar w-*-klasser med flex-grow och flex-shrink. Ett underordnat element med w-full försöker bli 100 % brett, men flexbehållaren kan krympa det. Lägg till shrink-0 tillsammans med breddklassen för att förhindra att det krymper. Detta mönster används ofta för ikoner och avatarer som aldrig ska tryckas ihop, medan den intilliggande texten tar upp det återstående utrymmet.

Ett klassiskt layoutmönster är en behållare med fast bredd som centreras på sidan. Kombinationen av en max-width-utility och mx-auto (automatiska horisontella marginaler) åstadkommer detta på ett smidigt sätt. Omslut sidans innehåll med max-w-5xl mx-auto px-4 för att skapa en centrerad, lättläst kolumn med lagom sidopadding på alla skärmstorlekar.

I den här lektionen lärde ni er: w-* fixed utilities follow the 4px spacing scale up to w-96, fractional utilities like w-1/2 set percentage widths relative to the parent och w-full, w-screen, w-fit, w-min, and w-max cover semantic sizing needs. Härnäst utforskar vi height-utilities som kompletterar breddinställningarna.