Ang artikulong ito ay magpapaliwanag:
- Ano ang ginagawa ng Mga Screen, Kulay, at Spacing sa Tailwind Theme?
- Paano Gamitin ang Mga Screen, Kulay, at Spacing sa Tailwind Theme?
- Paano I-configure ang Mga Screen, Kulay, at Spacing sa Tailwind Theme?
Ano ang ginagawa ng Mga Screen, Kulay, at Spacing sa Tailwind Theme?
Ang mga screen Pinahihintulutan ng key ang mga user na baguhin ang mga tumutugon na breakpoint sa proyekto ng Tailwind. Ang mga breakpoint ay ang mga punto kung saan nagbabago ang layout batay sa lapad ng screen. Bilang default, ang Tailwind ay may kasamang limang screen i.e., sm (maliit), md (medium), lg (malaki), at xl (extra-large). Gayunpaman, maaaring tukuyin ng mga user ang kanilang mga breakpoint gamit ang 'screens' key, at pagkatapos ay gamitin ang mga ito sa HTML program.
Mga kulay key ay ginagamit upang baguhin ang paleta ng kulay. Ang mga kulay ay isa sa pinakamahalagang katangian ng disenyo. Ang tema ng Tailwind ay nagbibigay ng default na paleta ng kulay na may malawak na hanay ng mga shade, ngunit maaari din itong i-customize o i-extend ng mga user gamit ang kanilang mga kulay. Maaaring tukuyin ng mga user ang mga kulay gamit ang 'colors' key, at pagkatapos ay gamitin ang mga ito sa anumang klase ng utility na nauugnay sa kulay sa HTML code.
Ang spacing Ang key ay ginagamit upang baguhin ang spacing at sizing scale. Ang espasyo ay isa pang mahalagang aspeto ng disenyo, dahil nakakaapekto ito sa pagiging madaling mabasa, pagkakahanay, at balanse ng mga elemento. Ang tema ng Tailwind ay nagbibigay ng pare-parehong sukat ng espasyo batay sa isang batayang halaga na 4 na pixel (0.25rem). Gayunpaman, maaari rin itong i-customize o palawigin gamit ang mga custom na halaga. Maaaring tukuyin ng mga user ang mga value ng spacing gamit ang 'spacing' key, at pagkatapos ay gamitin ang mga ito sa anumang klase ng utility na nauugnay sa spacing sa program file.
Paano Gamitin ang Mga Screen, Kulay, at Spacing sa Tailwind Theme?
Upang gumamit ng mga screen, kulay, at espasyo sa tema ng Tailwind, gumawa ng HTML program at gamitin ang default na screen, mga kulay, at mga katangian ng spacing kung kinakailangan. Pagkatapos, patakbuhin ang HTML program at tingnan ang HTML web page. Sundin natin ang mga nabanggit na hakbang:
Hakbang 1: Lumikha ng HTML Web Page
Una, gumawa ng HTML program at gamitin ang default na screen, mga kulay, at mga katangian ng spacing:
= 'text-3xl m-5 sm:text-white text-center' >
Hint sa Linux!
>
= 'text-2xl m-5 md:text-white text-center' >
Maligayang pagdating sa Tutorial na ito
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind CSS
>
Maligayang pagdating sa Tutorial na ito
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind CSS
>
= 'text-2xl m-5 xl:text-white text-center' >
Mga tema
>
>
>
dito:
- “ -p-10 'at' m-5 ” ay ang spacing property.
- “ sm ”, “ md ”, “ lg ”, at “ xl ” ay ang mga katangian ng screen.
- “ pula-700 ”, “ asul-600 ”, “ berde-500 ”, “ pink-700 ”, at “ puti ” ay ang mga katangian ng kulay.
Hakbang 2: Patakbuhin ang HTML Program
Pagkatapos, patakbuhin ang HTML program upang tingnan ang HTML web page:
Sa output sa itaas, makikita ang mga default na screen, kulay, at mga katangian ng spacing.
Paano I-configure ang Mga Screen, Kulay, at Spacing sa Tailwind Theme?
Upang i-configure ang mga screen, kulay, at espasyo sa tema ng Tailwind, tingnan ang ibinigay na mga hakbang:
- Buksan ang ' tailwind.config.js ” file.
- Pumunta sa ' tema ” at i-customize ang mga screen, kulay, at mga katangian ng spacing kung kinakailangan.
- Gamitin ang mga customized na katangian sa HTML program.
- Tingnan ang HTML web page para sa pagpapatunay.
Hakbang 1: I-configure ang Mga Screen, Kulay, at Spacing sa Tailwind Config File
Nasa ' tema 'seksyon ng' tailwind.config.js ” file, i-customize ang mga screen, kulay, at mga katangian ng spacing ayon sa pangangailangan. Halimbawa, na-customize namin ang mga property na ito gaya ng sumusunod:
modyul .exports = {nilalaman : [ './index.html' ] ,
tema : {
//pag-customize ng mga screen
mga screen : {
sm : '480px' ,
md : '668px' ,
lg : '876px' ,
xl : '1100px' ,
} ,
//pag-customize ng mga kulay
mga kulay : {
puti : #ffffff ,
itim : '#000000' ,
asul : '#08609c' ,
berde : '#089c28' ,
pula : '#9c0306' ,
dilaw : '#ede60e' ,
kulay rosas : '#ed0e55' ,
} ,
//pag-customize ng espasyo
spacing : {
px : '1px' ,
'0' : '0' ,
'1' : '0.25rem' ,
'2' : '0.5rem' ,
'3' : '0.75rem' ,
'4' : '1 bagay' ,
'5' : '1.25rem' ,
'6' : '1.5rem' ,
'8' : '2rem' ,
'10' : '2.5rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'dalawampu' : '5rem' ,
}
} ,
} ;
Sa code na ito:
- Ang ' mga screen ” Tinutukoy ng property ang mga breakpoint ng screen para sa iba't ibang laki. Nagbibigay ito ng mga alias (tulad ng sm, md, lg, xl) at ang mga katumbas na halaga ng mga ito.
- Ang ' mga kulay Tinutukoy ng ” property ang mga custom na kulay gamit ang kanilang pangalan at mga pares ng halaga ng hexadecimal.
- Ang ' spacing Tinutukoy ng ” property ang mga custom na value ng spacing para sa maraming laki. Gumagamit ito ng mga alias (gaya ng px, 0, 1, 2, atbp.) upang kumatawan sa mga partikular na value ng spacing sa mga 'rem' na unit.
Hakbang 2: Gamitin ang Mga Configured Properties sa HTML Program
Ngayon, gamitin ang mga customized na katangian sa HTML program:
= 'text-3xl m-5 sm:text-white text-center' >
Hint sa Linux!
>
= 'text-2xl m-5 md:text-white text-center' >
Maligayang pagdating sa Tutorial na ito
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind CSS
>
Maligayang pagdating sa Tutorial na ito
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind CSS
>
= 'text-2xl m-5 xl:text-white text-center' >
Mga tema
>
>
>
Hakbang 3: Tingnan ang HTML Web Page
Panghuli, i-verify ang output sa pamamagitan ng pagtingin sa HTML web page:
Mapapansing nagbabago ang nilalaman ng web page ayon sa mga na-configure na screen, kulay, at mga katangian ng espasyo.
Konklusyon
Ang mga screen pinahihintulutan ng key ang mga user na i-customize/baguhin ang mga tumutugon na breakpoint, ang mga kulay key ay ginagamit upang i-customize ang color palette para sa proyekto at ang spacing Ang key ay ginagamit upang i-customize ang spacing at sizing scale. Bukod dito, maaaring i-customize ng mga user ang mga key o property na ito ayon sa kanilang mga pangangailangan. Ipinaliwanag ng artikulong ito ang mga screen, kulay, at espasyo sa tema ng Tailwind.