Leveysutilityt
Asettakaa kiinteitä leveyksiä, kuten w-4 ja w-64, käyttäkää murtolukuleveyksiä, kuten w-1/2, ja venyttäkää kohde täyteen leveyteen w-full- ja w-screen-luokilla.
Leveysutilityt on ilmainen Tailwind CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Tailwind CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Leveyden hallinta Tailwindissa
Elementtien leveyksien määrittäminen on yksi CSS:n yleisimmistä asettelutehtävistä. Tailwind tarjoaa w-*-apuohjelmien perheen, joka kattaa kiinteät ja murtolukuihin perustuvat koot, prosenttipohjaiset koot sekä näkymän kokoon suhteutetut koot. Pikseliarvojen ulkoa opettelun sijaan käytät Tailwindin yhtenäistä välistysasteikkoa ja semanttisia avainsanoja, jotka vastaavat huolellisesti suunniteltuja CSS-arvoja.
<!-- Width examples side by side -->
<div class="space-y-2">
<div class="w-32 bg-blue-100 p-2">w-32 (128px)</div>
<div class="w-1/2 bg-blue-200 p-2">w-1/2 (50%)</div>
<div class="w-full bg-blue-300 p-2">w-full (100%)</div>
</div>Kiinteä leveys välistysasteikolla
Kiinteät leveydet noudattavat Tailwindin välistysasteikkoa, jossa yksi yksikkö vastaa 4 pikseliä (0,25 rem). Siksi w-4 on 16 pikseliä, w-16 on 64 pikseliä ja w-64 on 256 pikseliä. Asteikko ulottuu arvoon w-96 (384 pikseliä). Nämä arvot sopivat erinomaisesti kuvakkeille, avatareille, sivupaneeleille ja kaikille elementeille, joiden tunnetun kiinteän koon ei pidä muuttua näkymän leveyden mukaan.
<!-- Fixed-size avatar and sidebar examples -->
<div class="flex gap-4 items-center">
<!-- Avatar: 12 x 12 = 48px -->
<div class="w-12 h-12 rounded-full bg-indigo-400 flex items-center justify-center text-white font-bold">
JD
</div>
<!-- Sidebar: 64 = 256px -->
<div class="w-64 bg-gray-100 p-4 rounded">
Sidebar panel (256px)
</div>
</div>Murtolukuihin perustuvat leveydet
Murtolukuihin perustuvat leveysapuohjelmat ilmaisevat leveyden suhteena ylätason säilöön. Tailwind tukee puolikkaita (w-1/2), kolmanneksia (w-1/3, w-2/3), neljänneksiä (w-1/4–w-3/4), viidenneksiä ja kuudenneksia. Ne käännetään prosenttiarvoiksi — esimerkiksi w-1/3 muuttuu muotoon width: 33.333333% — joten ne sopivat erinomaisesti vierekkäisten sarakkeiden asetteluihin.
<!-- Two-thirds / one-third split layout -->
<div class="flex gap-4">
<div class="w-2/3 bg-emerald-100 p-4 rounded">Main (2/3 wide)</div>
<div class="w-1/3 bg-emerald-200 p-4 rounded">Sidebar (1/3 wide)</div>
</div>w-full ja w-screen
w-full asettaa leveydeksi 100 % ylätason säilön leveydestä, kun taas w-screen asettaa leveydeksi 100vw eli näkymän leveyden. Ero on merkityksellinen, kun ylätason säilö ei kata koko näkymää: w-full täyttää säilön, mutta w-screen täyttää aina koko selainikkunan ja voi aiheuttaa vaakasuuntaisen ylivuodon vierityspalkin vuoksi. Käytä w-screen-luokkaa koko näkymän peittävissä tasoissa ja w-full-luokkaa muissa tapauksissa.
<!-- w-full fills the parent, regardless of parent width -->
<div class="w-1/2 bg-gray-100 p-4">
<button class="w-full bg-blue-500 text-white py-2 rounded">
Full-width button inside half-width parent
</button>
</div>
<!-- w-screen fills the entire viewport -->
<div class="w-screen bg-indigo-800 text-white py-3 text-center">
Full-viewport-width banner
</div>w-auto luonnolliselle leveydelle
w-auto antaa elementille sen luonnollisen eli sisällön määrittämän leveyden. Tämä on useimpien lohkoelementtien selaimen oletustoiminta, mutta saatat joutua määrittämään sen erikseen ohittaaksesi toisessa rajakohdassa asetetun suuremman leveyden. Sitä käytetään usein, kun mobiililaitteiden w-full-asetuksesta siirrytään työpöydällä takaisin automaattiseen kokoon, esimerkiksi painikkeessa, jonka halutaan olevan vain tekstinsä levyinen.
<!-- Full-width on mobile, natural width on desktop -->
<button class="w-full md:w-auto bg-purple-500 text-white px-6 py-3 rounded">
Get Started
</button>w-fit, w-min ja w-max
Kolmen nykyaikaisen leveysavainsanan avulla elementit voivat mitoittaa itsensä sisällön perusteella: w-fit tekee elementistä sisältönsä levyisen (kuten fit-content), w-min asettaa leveydeksi sisällön vähimmäisleveyden (kutistuen pisimmän katkeamattoman sanan levyiseksi) ja w-max laajentaa elementin sisällön enimmäisleveyteen ilman rivinvaihtoja. Näistä on hyötyä tunnisteissa, pill-tyylisissä elementeissä, työkaluvihjeissä ja tekstinsisäisissä nimikkeissä.
<!-- Tags that size to their text content -->
<div class="flex gap-2">
<span class="w-fit bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
Design
</span>
<span class="w-fit bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">
Development
</span>
<span class="w-fit bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">
Marketing
</span>
</div>Mielivaltaiset leveysarvot
Kun valmis asteikko ei kata tarkkaa tarvettasi, käytä mielivaltaisten arvojen syntaksia: w-[347px] tai w-[calc(100%-2rem)]. JIT-moottori kääntää tämän täsmälleen kyseiseksi CSS-arvoksi. Vaikka mielivaltaiset arvot ovat käteviä, ne ohittavat suunnittelujärjestelmän, joten käytä niitä säästeliäästi — tarkista ensin, saavuttaisitko saman visuaalisen tuloksen murtoluku- tai kiinteällä asteikkoarvolla.
<!-- One-off width for a specific UI element -->
<div class="w-[280px] bg-amber-100 p-4 rounded">
Tooltip or popover of exact width
</div>
<!-- Calc inside brackets -->
<div class="w-[calc(100%-3rem)] bg-amber-200 p-4 rounded">
Full width minus 3rem padding
</div>Leveyden muuttaminen responsiivisesti
Responsiivisten etuliitteiden yhdistäminen leveysapuohjelmiin on yksi Tailwindin tehokkaimmista käyttötavoista. Yleinen yhdistelmä on w-full sm:w-1/2 lg:w-1/3: mobiilissa täysi leveys, pienillä näytöillä puolet ja suurilla näytöillä kolmannes. Näin saat responsiivisen korttiasettelun yhdellä apuluokkien kokonaisuudella ilman media query -CSS:ää.
<!-- Responsive-width cards in a flex wrap container -->
<div class="flex flex-wrap gap-4">
<div class="w-full sm:w-1/2 lg:w-1/3 bg-rose-100 p-6 rounded">
Card A
</div>
<div class="w-full sm:w-1/2 lg:w-1/3 bg-rose-100 p-6 rounded">
Card B
</div>
<div class="w-full sm:w-1/2 lg:w-1/3 bg-rose-100 p-6 rounded">
Card C
</div>
</div>max-w-* luettavaa sisältöä varten
Kun w-* määrittää tarkan leveyden, max-w-* asettaa ylärajan. Tärkein enimmäisleveyden apuohjelma on max-w-prose, joka rajoittaa tekstin noin 65 merkkiin riviä kohden — typografiatutkijoiden määrittämään luettavuuden kannalta ihanteelliseen määrään. max-w-sm–max-w-7xl tarjoavat semanttiset säilöleveydet, jotka vastaavat yleisiä suunnittelun rajakohtia.
<!-- Readable article column with max-width -->
<article class="max-w-prose mx-auto px-4">
<h1 class="text-2xl font-bold mb-4">Article Title</h1>
<p class="text-gray-700 leading-relaxed">
This paragraph stays at a comfortable reading width regardless
of the viewport size. max-w-prose limits it to about 65 characters
per line for optimal readability.
</p>
</article>Leveys flex-säilöissä
Flex-säilön sisällä w-*-luokat toimivat yhdessä flex-grow- ja flex-shrink-ominaisuuksien kanssa. w-full-luokalla oleva alikohde pyrkii olemaan 100 % leveä, mutta flex-säilö voi kutistaa sitä. Estä kutistuminen lisäämällä leveyden rinnalle shrink-0. Tätä käytetään usein kuvakkeissa ja avatareissa, joiden ei pidä koskaan litistyä, kun sisaruksena oleva tekstisisältö käyttää jäljelle jäävän tilan.
<!-- Icon stays fixed width, text takes remaining space -->
<div class="flex items-center gap-3 p-4 border rounded">
<!-- Icon: fixed 40px, never shrinks -->
<div class="w-10 h-10 shrink-0 bg-blue-500 rounded-full flex items-center justify-center">
<span class="text-white font-bold">AI</span>
</div>
<!-- Text: takes all remaining width -->
<div class="min-w-0">
<p class="font-semibold truncate">Long title that might overflow</p>
<p class="text-sm text-gray-500">Subtitle text</p>
</div>
</div>Kiinteälevyisten elementtien keskittäminen
Klassinen asettelumalli on sivulle keskitetty kiinteälevyinen säilö. max-width-apuluokan ja mx-auto-luokan (automaattiset vaakasuuntaiset marginaalit) yhdistelmä toteuttaa tämän siististi. Kääri sivun sisältö luokkiin max-w-5xl mx-auto px-4, niin saat kaikilla näyttökooilla keskitetyn ja helposti luettavan sarakkeen, jossa on sopivasti sivuttaista täytettä.
<!-- Classic centered page layout -->
<div class="max-w-5xl mx-auto px-4 py-8">
<header class="mb-6">
<h1 class="text-3xl font-bold">Page Title</h1>
</header>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-gray-100 p-4 rounded">Column 1</div>
<div class="bg-gray-100 p-4 rounded">Column 2</div>
<div class="bg-gray-100 p-4 rounded">Column 3</div>
</div>
</div>Pikatarkistus
Testaa, miten hyvin hallitset tämän oppitunnin Tailwind CSS Mastery -käsitteet.
Oppitunnin kertaus
Tässä oppitunnissa opit, että kiinteät w-*-apuluokat noudattavat 4 pikselin välistysasteikkoa kokoon w-96 asti, murtolukuapuluokat, kuten w-1/2, määrittävät prosentuaalisen leveyden suhteessa yläelementtiin ja w-full, w-screen, w-fit, w-min ja w-max kattavat semanttiset mitoitustarpeet. Seuraavaksi tutustumme korkeuden apuluokkiin, jotka täydentävät leveyden hallintaa.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Leveysutilityt” ilmainen?
Kyllä – oppitunnin ”Leveysutilityt” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Tailwind CSS Academy-kurssin, päivitä CoddyKit PROhon. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Leveysutilityt”?
Asettakaa kiinteitä leveyksiä, kuten w-4 ja w-64, käyttäkää murtolukuleveyksiä, kuten w-1/2, ja venyttäkää kohde täyteen leveyteen w-full- ja w-screen-luokilla. Harjoittelet Tailwind CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Tailwind CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Tailwind CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Leveysutilityt”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Tailwind CSS Academy-oppitunnilla?
Kyllä. Jokainen Tailwind CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Leveysutilityt
- Korkeusutilityt
- Minimi- ja maksimirajoitteet
- Kuvasuhde