Tämä artikkeli tarjoaa oppaan tekstin muotoiluun Tailwindissä käyttämällä seuraavaa ääriviivaa:
- Käytä tekstin tasausluokkaa
- Anna värit tekstisisällölle
- Käytä erilaisia kirjasinperheitä
- Tee tekstiin alleviivauskoristeita
- Tee tekstiin sisennykset
Kuinka käyttää Text Align Class -luokkaa Tailwindissä?
Tekstin sisältöä muotoiltaessa tekstin sijoittelu on yhtä tärkeää kuin koristelu. Jos tekstiä ei ole kohdistettu oikein, koko verkkosivun ulkoasu näyttää oudolta. Tekstin tasaamiseen Tailwindissä käytetään seuraavaa luokkaa:
teksti- { linjaus }
Kohdistusvaihtoehdot sisältävät ' keskusta ', ' vasemmalle ', ' oikein ”, ja ” perustella ”. Ymmärretään jokainen näistä kohdistuksista alla olevan esittelyn avulla:
< s luokkaa = 'text-center bg-slate-200' > Tämä on esimerkkiteksti ja se on varustettu TEKSTIKESKUS-tasauksella. < / s >
< br >
< s luokkaa = 'text-right bg-slate-200' > Tämä on esimerkkiteksti ja siinä on TEKSTI OIKEA tasaus. < / s >
< br >
< s luokkaa = 'text-left bg-slate-200' > Tämä on esimerkkiteksti ja se on tasattu TEKSTI VASEMMALLE. < / s >
< br >
< s luokkaa = 'text-justify bg-slate-200' > Tämä on esimerkkiteksti ja se on varustettu TEKSTI JUSTIFY -tasauksella. < / s >
Yllä olevan koodin selitys on seuraava:
- Neljä' s ”-elementit luodaan ja erotetaan rivinvaihdolla.
- Neljän p-elementin teksti tasataan tiettyyn kohtaan käyttämällä ' teksti-{tasaus} ”luokka.
- ' bg-{väri}-{numero} 'luokka tarjoaa taustavärin jokaiselle' s ”elementtiä.
Lähtö
Alla olevasta tulosteesta näkyy, kuinka kukin tasausluokka vaikuttaa tekstin sijaintiin. Voit nähdä, että ensimmäisen elementin teksti on tasattu keskelle, toinen oikealle, kolmas vasemmalle ja neljäs elementti näyttää tasattua tekstiä:
Kuinka tarjota väriä tekstisisällölle Tailwindissä?
Värillä on tärkeä rooli elementin tekstisisällön muotoilussa. Jos sopivaa väriä ei valita, tekstistä voi tulla vaikeasti luettavaa. Tämä vaikuttaa negatiivisesti asettelun suunnitteluun. Voit määrittää tekstin värin Tailwindissä käyttämällä alla annettua luokkaa:
teksti- { väri } - { määrä }Yllä määritellyssä syntaksissa käyttäjän on annettava värin nimi ja sen jälkeen numero, joka vastaa määritetyn värin sävystä.
Alla olevassa esittelyssä on kolme ' s ” elementtejä, jotka on muotoiltu käyttämällä erilaisia tekstin väriluokkia:
< s luokkaa = 'text-violet-500 text-center' > Tämä on violetin värinen teksti < / s >< s luokkaa = 'text-red-500 text-center' > Tämä on punaista tekstiä < / s >
< s luokkaa = 'text-green-500 text-center' > Tämä on vihreä teksti < / s >
Yllä olevassa koodissa käytetyt luokat ovat seuraavat:
- Ensimmäinen ' s ' elementti on varustettu violetilla värillä käyttämällä ' teksti-{väri}-{numero} ”luokka.
- Toinen ja kolmas' s ”-elementit on varustettu punaisella ja vihreällä värillä samalla menetelmällä.
- ' tekstikeskus ” luokka sijoittaa tekstisisällön elementin keskelle.
Lähtö
Alla olevasta tulosteesta käy selvästi ilmi, että tekstin oletusmusta väri muutetaan määritetyiksi väreiksi käyttämällä luokkaa text-{color}-{number}:
Kuinka käyttää erilaisia kirjasinperheitä Tailwindissä?
Tekstielementin fontilla voidaan korostaa tiettyä tekstiä. Jokaisella fontilla on omat ominaisuutensa. Jos haluat muuttaa Tailwind-elementin fonttia, käytä seuraavaa luokkaa:
fontti- { perhe }Tailwind tarjoaa kolme oletuskirjasinperhettä eli ' ilman ', ' serif ”, ja ” mono ”. Jokaisella näistä kirjasinperheistä on erilainen kirjasintyyli.
Samoin ' font-{weight} ” -luokan avulla tekstistä voi lihavoida, vaalea tai normaali. Käytetään esittelyä kirjasinten painon antamiseen Tailwindin eri kirjasinperheille:
< s luokkaa = 'font-mono font-extrabold text-center' > Tämä on erittäin lihavoitu teksti fontilla MONO < / s >< s luokkaa = ' font-serif font-semibold text-center' > Tämä on puolilihavoitu teksti fontissa SERIF < / s >
< s luokkaa = ' font-sans font-extralight text-center' > Tämä on erittäin kevyttä tekstiä fontissa SANS < / s >
Selitys koodille:
- Kolme' s '-elementit tarjoavat 'mono', 'serf' ja 'sans' -kirjasinperheet käyttämällä ' font-{family} ”luokka.
- Samoin kolme ' s ' elementit tarjotaan muodossa ' ylipainoinen ', ' puolilihavoitu ', ja ' extralight ' fontin painot käyttämällä ' font-{weight} ”luokka.
- Kaikki nämä elementit käyttävät ' tekstikeskus ” luokka, joka sijoittaa tekstin elementin keskelle.
Lähtö
Annettu tulos osoittaa, että jokainen ' s ”-elementillä on eri kirjasinperhe ja kirjasinpainot:
Kuinka tehdä alleviivauskoristeita tekstiin Tailwindissä?
Tekstielementtejä voidaan myös muotoilla lisäämällä erilaisia alleviivauksia. Tätä voidaan käyttää korostamaan tekstin osaa. Alleviivausten lisäämiseen tekstielementtiin käytetään seuraavaa luokkaa:
korostaa koriste- { tyyli }sana ' korostaa ' tarjoaa elementille perusalleviivauksen ja ' koristelu-{tyyli} ” -luokkaa käytetään antamaan alleviivaukseen erilaisia tyylejä. Ymmärretään tämä käyttämällä alla olevaa esittelyä:
< s luokkaa = 'alleviivaus koristelu - kiinteä teksti -keskus' > Tässä tekstissä on kiinteä alleviivaus < / s >< s luokkaa = 'alleviiva koristelu - kaksoistekstikeskus' > Tässä tekstissä on kaksoisalleviivaus < / s >
< s luokkaa = 'alleviivaus koriste-aaltoileva teksti-keskus' > Tässä tekstissä on aaltoileva alaviiva < / s >
< s luokkaa = 'alleviivaa koriste-pisteinen tekstikeskus' > Tässä tekstissä on katkoviiva alaviiva < / s >
Yllä olevassa koodissa on neljä ' s ' elementtejä, jotka ovat ' kiinteä ', ' kaksinkertainen ', ' aaltoileva ”, ja ” pilkullinen ”tyylisiä alleviivauksia.
Lähtö:
Seuraavasta tuloksesta käy selvästi ilmi, että elementit on muotoiltu käyttämällä erilaisia alleviivattuja sisustusluokkia:
Kuinka tehdä sisennyksiä tekstiin Tailwindissä?
Kaikissa tekstiasiakirjoissa tekstisisällön muotoilemiseen käytetään sisennyksiä. Tailwind tarjoaa myös oletusluokan sisennyksen tarjoamiseksi tekstisisällölle käyttämällä seuraavaa luokkaa:
sisennys- { leveys }Yllä määritellyn syntaksin leveys vastaa tekstisisällölle tarjotun sisennysmarginaalin koosta.
Tyylitetään kaksi tekstielementtiä määrittämällä niille eri sisennysarvot ja katsotaan tulos:
< s luokkaa = ' sisennys-4 py-12' > Tämä on esimerkkiteksti ja se toimitetaan sisennyksen kanssa käyttämällä 'indent-4' luokkaa. < / s >< s luokkaa = ' luetelmakohta 28 ' > Tämä on esimerkkiteksti ja se toimitetaan sisennyksen kanssa käyttämällä 'indent-28' luokkaa. < / s >
Yllä olevassa koodissa kaksi ' s ” on varustettu leveyden sisennyksellä ” 4 ' & ' 28 ' vastaavasti. Ensimmäinen elementti on myös varustettu ylhäältä alas pehmusteella käyttämällä ' p-12 ”luokka.
Lähtö:
Alla olevasta tulosteesta näkyy, että toisella tekstielementillä on suurempi marginaali tekstin alussa suuremman sisennyksen leveyden vuoksi:
Siinä on kyse tekstin muotoilusta Tailwindin avulla.
Johtopäätös
Tailwind tarjoaa erilaisia luokkia tekstielementtien muotoiluun. Tekstin tyyliin Tailwindissä käyttäjä voi käyttää ' teksti-{väri}-{numero} ', ' teksti-{tasaus} ', ' alleviivaa koristelu-{style} ”, ja ” sisennys-{width} ”luokka. Tämä artikkeli on antanut oppaan tekstin muotoiluun käyttämällä Tailwindin eri luokkia.