Tämä artikkeli selittää:
- Mitä näytöt, värit ja välit tekevät Tailwind-teemassa?
- Kuinka käyttää näyttöjä, värejä ja välilyöntejä Tailwind-teemassa?
- Kuinka määrittää näytöt, värit ja välit Tailwind-teemassa?
Mitä näytöt, värit ja välit tekevät Tailwind-teemassa?
The näytöt -näppäimen avulla käyttäjät voivat muokata Tailwind-projektin responsiivisia keskeytyskohtia. Katkaisupisteet ovat pisteitä, joissa asettelu muuttuu näytön leveyden mukaan. Oletusarvoisesti Tailwind sisältää viisi näyttöä, eli sm (pieni), md (keskikokoinen), lg (suuri) ja xl (erittäin suuri). Käyttäjät voivat kuitenkin määrittää keskeytyspisteensä käyttämällä 'näytöt'-näppäintä ja käyttää niitä sitten HTML-ohjelmassa.
värit -näppäintä käytetään väripaletin muokkaamiseen. Värit ovat yksi suunnittelun tärkeimmistä ominaisuuksista. Tailwind-teema tarjoaa oletusväripaletin, jossa on laaja valikoima sävyjä, mutta käyttäjät voivat myös muokata sitä tai laajentaa sitä väreillään. Käyttäjät voivat määrittää värit 'värit'-näppäimellä ja sitten käyttää niitä minkä tahansa HTML-koodin väriin liittyvän hyödyllisyysluokan kanssa.
The välilyönti -näppäintä käytetään etäisyyden ja kokoasteikon muuttamiseen. Välit ovat toinen olennainen osa suunnittelua, koska se vaikuttaa elementtien luettavuuteen, kohdistukseen ja tasapainoon. Tailwind-teema tarjoaa johdonmukaisen väliasteikon, joka perustuu 4 pikselin (0,25 rem) perusarvoon. Sitä voidaan kuitenkin myös mukauttaa tai laajentaa mukautetuilla arvoilla. Käyttäjät voivat määrittää väliarvot käyttämällä välilyöntinäppäintä ja sitten käyttää niitä minkä tahansa välilyöntiin liittyvän hyödyllisyysluokan kanssa ohjelmatiedostossa.
Kuinka käyttää näyttöjä, värejä ja välilyöntejä Tailwind-teemassa?
Jos haluat käyttää näyttöjä, värejä ja välilyöntejä Tailwind-teemassa, tee HTML-ohjelma ja käytä oletusnäyttöä, värejä ja väliasetuksia tarpeen mukaan. Suorita sitten HTML-ohjelma ja tarkastele HTML-verkkosivua. Noudatetaan alla olevia vaiheita:
Vaihe 1: Luo HTML-verkkosivu
Tee ensin HTML-ohjelma ja käytä oletusnäyttö-, väri- ja väliominaisuuksia:
= 'teksti-3xl m-5 sm:teksti-valkoinen tekstikeskus' >
Linux-vinkki!
>
= 'teksti-2xl m-5 md:teksti-valkoinen tekstikeskus' >
Tervetuloa tähän opetusohjelmaan
>
= 'teksti-2xl m-5 lg:teksti-valkoinen tekstikeskus' >
Tailwind CSS
>
Tervetuloa tähän opetusohjelmaan
>
= 'teksti-2xl m-5 lg:teksti-valkoinen tekstikeskus' >
Tailwind CSS
>
= 'teksti-2xl m-5 xl:teksti-valkoinen tekstikeskus' >
Teemat
>
>
>
Tässä:
- ' -p-10 ' ja ' m-5 ” ovat väliomaisuus.
- ' sm ”, “ md ”, “ lg ”, ja ” xl ” ovat näytön ominaisuudet.
- ' punainen - 700 ”, “ sininen - 600 ”, “ vihreä - 500 ”, “ pinkki-700 ”, ja ” valkoinen ” ovat värin ominaisuudet.
Vaihe 2: Suorita HTML-ohjelma
Suorita sitten HTML-ohjelma tarkastellaksesi HTML-verkkosivua:
Yllä olevassa lähdössä näkyvät oletusnäytöt, värit ja väliominaisuudet.
Kuinka määrittää näytöt, värit ja välit Tailwind-teemassa?
Jos haluat määrittää näytöt, värit ja välit Tailwind-teemassa, katso annettuja ohjeita:
- Avaa ' tailwind.config.js ” tiedosto.
- mene kohtaan ' teema ” -osion ja mukauta näyttöjä, värejä ja väliominaisuuksia tarpeen mukaan.
- Käytä mukautettuja ominaisuuksia HTML-ohjelmassa.
- Tarkastele HTML-verkkosivua vahvistusta varten.
Vaihe 1: Määritä näytöt, värit ja välit Tailwind Config -tiedostossa
' teema '-osio ' tailwind.config.js ”-tiedostoa, mukauta näyttöjä, värejä ja väliominaisuuksia tarpeen mukaan. Olemme esimerkiksi mukauttaneet näitä ominaisuuksia seuraavasti:
moduuli .vienti = {sisältö : [ './index.html' ] ,
teema : {
//näyttöjen mukauttaminen
näytöt : {
sm : '480px' ,
md : '668px' ,
lg : '876px' ,
xl : '1100px' ,
} ,
//värien mukauttaminen
värit : {
valkoinen : #ffffff ,
musta : '#000000' ,
sininen : '#08609c' ,
vihreä : '#089c28' ,
punainen : '#9c0306' ,
keltainen : '#ede60e' ,
vaaleanpunainen : '#ed0e55' ,
} ,
//mukautetaan välilyöntejä
välilyönti : {
px : '1px' ,
'0' : '0' ,
'1' : '0,25 rem' ,
'2' : '0,5 rem' ,
'3' : '0,75 rem' ,
'4' : '1 asia' ,
'5' : '1,25 rem' ,
'6' : '1,5 rem' ,
'8' : '2rem' ,
'10' : '2,5 rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'kaksikymmentä' : '5rem' ,
}
} ,
} ;
Tässä koodissa:
- ' näytöt ”-ominaisuus määrittää näytön keskeytyskohdat eri kokoisille. Se tarjoaa aliaksia (kuten sm, md, lg, xl) ja niitä vastaavia arvoja.
- ' värit ”-ominaisuus määrittää mukautetut värit käyttämällä niiden nimeä ja heksadesimaaliarvopareja.
- ' välilyönti ”-ominaisuus määrittää mukautetut väliarvot useille kokoille. Se käyttää aliaksia (kuten px, 0, 1, 2 jne.) edustamaan tiettyjä väliarvoja 'rem'-yksiköissä.
Vaihe 2: Käytä määritettyjä ominaisuuksia HTML-ohjelmassa
Käytä nyt mukautettuja ominaisuuksia HTML-ohjelmassa:
= 'teksti-3xl m-5 sm:teksti-valkoinen tekstikeskus' >
Linux-vinkki!
>
= 'teksti-2xl m-5 md:teksti-valkoinen tekstikeskus' >
Tervetuloa tähän opetusohjelmaan
>
= 'teksti-2xl m-5 lg:teksti-valkoinen tekstikeskus' >
Tailwind CSS
>
Tervetuloa tähän opetusohjelmaan
>
= 'teksti-2xl m-5 lg:teksti-valkoinen tekstikeskus' >
Tailwind CSS
>
= 'teksti-2xl m-5 xl:teksti-valkoinen tekstikeskus' >
Teemat
>
>
>
Vaihe 3: Näytä HTML-verkkosivu
Tarkista lopuksi tulos katsomalla HTML-verkkosivua:
Voidaan havaita, että verkkosivun sisältö muuttuu määritettyjen näyttöjen, värien ja välitysominaisuuksien mukaan.
Johtopäätös
The näytöt -näppäimen avulla käyttäjät voivat mukauttaa/muokata reagoivia keskeytyskohtia värit -näppäintä käytetään väripaletin mukauttamiseen projektille ja välilyönti -näppäintä käytetään väli- ja kokoasteikon mukauttamiseen. Lisäksi käyttäjät voivat mukauttaa näitä avaimia tai ominaisuuksia tarpeidensa mukaan. Tässä artikkelissa on selitetty Tailwind-teeman näytöt, värit ja välit.