Tailwindin välistysasteikko

Välistysasteikko on joukko ennalta määritettyjä kokoarvoja, joita käytetään johdonmukaisesti suunnittelujärjestelmän marginaaleissa, sisäisissä tyhjissä tiloissa, väleissä, leveyksissä ja korkeuksissa. Sen sijaan että käyttäisit mielivaltaisia pikseliarvoja, kuten 13px tai 17px, valitset arvon ennalta määritetystä kokojoukosta. Tämä rajoitus tuottaa visuaalisesti harmonisia malleja, koska kaikki välistysarvot ovat perusyksikön monikertoja, mikä luo käyttöliittymään luonnollisen linjauksen ja rytmin.

Tailwindin välistysasteikko perustuu 4 pikselin (0.25rem) perusyksikköön. Kukin askelnumero kerrotaan luvulla 0.25rem: spacing-1 = 4px, spacing-2 = 8px, spacing-4 = 16px, spacing-8 = 32px ja spacing-16 = 64px. Asteikko ulottuu arvosta 0 arvoon 96 (384px), ja pienissä ko’oissa tarkempaa säätöä varten mukana ovat murtoaskeleet 0.5 (2px), 1.5 (6px), 2.5 (10px) ja 3.5 (14px).

4 pikselin perusyksikkö on käyttöliittymien suunnittelujärjestelmien de facto -standardi, jota käyttävät Google Material Design, Applen HIG ja useimmat suuret suunnittelutyökalut. Saman järjestelmän parissa työskentelevät suunnittelijat ja kehittäjät linjaavat luonnostaan työnsä: suunnittelijan määrittämä 16px vastaa suoraan Tailwindin arvoa 4 (4 × 4px = 16px). Tämä yhteinen kieli poistaa suunnittelutiedostojen ja koodin väliset käännösvirheet.

Välistysasteikon yleisin käyttökohde on sisäinen tyhjä tila. p-4 lisää 16 pikseliä tyhjää tilaa kaikille neljälle sivulle. Tämä on tavallinen sisäinen tyhjä tila tiiviille käyttöliittymäelementeille, kuten tunnisteille ja pienille korteille. Mukavankokoisissa korteissa p-6 (24px) toimii hyvin. Tilavissa osioiden säilöissä p-8–p-12 antaa runsaasti väljyyttä.

Samaa välistysasteikkoa käytetään monissa CSS-ominaisuuksissa marginaalien ja sisäisten tyhjien tilojen lisäksi. gap-4 lisää 16 pikselin välin flex- tai grid-elementtien lasten välille. w-8 asettaa leveydeksi 32 pikseliä. h-16 asettaa korkeudeksi 64 pikseliä. top-4 sijoittaa absoluutisesti asemoidun elementin 16 pikselin päähän yläreunasta. Yhtenäinen asteikko varmistaa, että kaikki nämä arvot linjautuvat automaattisesti visuaalisesti toistensa kanssa.

Kun tarvitset 4 pikseliä pienempiä säätöjä, Tailwindin murtoaskeleet tarjoavat tarkkuutta ilman mielivaltaisia arvoja. p-0.5 (2px) sopii pienten tunnisteiden ja merkkien tiiviiseen sisäiseen tyhjään tilaan. p-1.5 (6px) sijoittuu tiiviin ja tavallisen sisäisen tyhjän tilan väliin. p-2.5 (10px) antaa hieman väljemmän vaikutelman tiiviissä elementissä. Nämä murtoarvot pitävät välistyksen suunnittelujärjestelmän mukaisena.

Hyödyllinen mielikuva on seuraava: pienissä vuorovaikutuselementeissä (kuvakkeet, tunnisteet, syötekenttien sisäinen tyhjä tila) käytetään arvoja 1–4 (4–16px). Komponenttitason välistyksessä (kortin ja painikkeen sisäinen tyhjä tila, lomakekenttien välit) käytetään arvoja 4–8 (16–32px). Osiotason välistyksessä (osion sisäinen tyhjä tila, hero-osioiden marginaalit) käytetään arvoja 12–24 (48–96px). Sivutason välistyksessä (ylätason säilön sisäinen tyhjä tila) käytetään arvoja 24–32+ (96–128px).

Jos tarvitset arvon, jota oletusasteikossa ei ole, laajenna sitä tiedostossa tailwind.config.js kohdassa theme.extend.spacing. Kun lisäät arvon spacing['18'], saat uuden 72px:n askeleen, joka on käytettävissä arvoina p-18, m-18, w-18 ja niin edelleen. Näin lisäykset pysyvät osana suunnittelujärjestelmää sen sijaan, että mielivaltaisia arvoja ripoteltaisiin HTML-koodiin.

Kun tarvitset yksittäisen välistysarvon, joka ei oikeuta asetustiedoston muuttamista, käytä mielivaltaisia arvoja: p-[13px] tai mt-[22px]. Mielivaltaiset arvot hyväksyvät minkä tahansa kelvollisen CSS-pituusyksikön: px, rem, em, %, vw ja vh. Käytä niitä säästeliäästi pikselintarkkoihin erikoistapauksiin — liian monet mielivaltaiset arvot kumoavat suunnittelujärjestelmän hyödyn. Jos käytät samaa mielivaltaista arvoa useammin kuin kahdesti, lisää se sen sijaan asetustiedostoon.

Yksi ennalta määritetyn välistysasteikon suurimmista hyödyistä on tiimin johdonmukaisuus. Kun kaikki projektin kehittäjät käyttävät Tailwindin välistysluokkia, kaikki elementit linjautuvat luonnostaan toistensa kanssa. Ei tarvitse enää keskustella siitä, käytetäänkö arvoa 14px vai 16px — käytätte asteikkoa. Koodikatselmuksista tulee helpompia, koska kaikki vakioaskelten ulkopuoliset arvot näkyvät heti ja herättävät aiheellisen kysymyksen.

Välistysasteikko toimii saumattomasti responsiivisten etuliitteiden kanssa. Voit käyttää eri välistyksiä eri rajakohdissa: px-4 md:px-8 lg:px-16 antaa sivun säilölle sisäisen tyhjän tilan, joka kaksinkertaistuu jokaisessa tärkeässä rajakohdassa. Tämä skaalaus vastaa tapaa, jolla ammattimaisissa malleissa yleensä käsitellään tyhjää tilaa — mobiilissa tila on tiivis, työpöydällä väljä.

Tällä oppitunnilla opit, että Tailwindin välistysasteikko perustuu 4 pikselin (0.25rem) askeliin ja on numeroitu 0:sta 96:een, murtoaskeleet, kuten 0.5, 1.5 ja 2.5, tarjoavat tarkkaa säätöä pienissä ko’oissa ja samaa asteikkoa käytetään yhdenmukaisesti sisäisen tyhjän tilan, marginaalin, välin, leveyden ja korkeuden apuluokissa. Seuraavaksi perehdymme sisäisen tyhjän tilan apuluokkiin ja niiden kaikkiin suuntavaihtoehtoihin.