Aquest article explicarà:
- Què fan les pantalles, els colors i l'espai al tema Tailwind?
- Com utilitzar les pantalles, els colors i l'espai al tema Tailwind?
- Com configurar pantalles, colors i espais al tema Tailwind?
Què fan les pantalles, els colors i l'espai al tema Tailwind?
El pantalles La clau permet als usuaris modificar els punts d'interrupció de resposta al projecte Tailwind. Els punts d'interrupció són els punts on el disseny canvia en funció de l'amplada de la pantalla. De manera predeterminada, Tailwind inclou cinc pantalles, és a dir, sm (petita), md (mitjana), lg (gran) i xl (extragran). Tanmateix, els usuaris poden definir els seus punts d'interrupció mitjançant la tecla 'pantalles' i després utilitzar-los al programa HTML.
Colors La tecla s'utilitza per modificar la paleta de colors. Els colors són una de les característiques més clau del disseny. El tema Tailwind proporciona una paleta de colors predeterminada amb una àmplia gamma de tons, però els usuaris també poden personalitzar-la o ampliar-la amb els seus colors. Els usuaris poden definir colors mitjançant la clau 'colors' i després utilitzar-los amb qualsevol classe d'utilitat relacionada amb el color del codi HTML.
El espaiat La tecla s'utilitza per modificar l'espaiat i l'escala de mida. L'espaiat és un altre aspecte essencial del disseny, ja que afecta la llegibilitat, l'alineació i l'equilibri dels elements. El tema Tailwind proporciona una escala d'espaiat consistent basada en un valor base de 4 píxels (0,25 rem). Tanmateix, també es pot personalitzar o ampliar amb valors personalitzats. Els usuaris poden definir valors d'espaiat utilitzant la tecla 'espaiat' i després utilitzar-los amb qualsevol classe d'utilitat relacionada amb l'espaiat al fitxer de programa.
Com utilitzar les pantalles, els colors i l'espai al tema Tailwind?
Per utilitzar pantalles, colors i espaiat al tema Tailwind, creeu un programa HTML i utilitzeu les propietats predeterminades de pantalla, colors i espaiat segons sigui necessari. A continuació, executeu el programa HTML i visualitzeu la pàgina web HTML. Seguim els passos esmentats a continuació:
Pas 1: creeu una pàgina web HTML
Primer, feu un programa HTML i utilitzeu les propietats predeterminades de pantalla, colors i espaiat:
Pista de Linux!
>
Benvinguts a aquest tutorial
>
CSS de vent de cua
>
= 'text-2xl m-5 xl:text-text-centre blanc' >
Temes
>
>
Aquí:
- “ -p-10 ' i ' m-5 ” són la propietat de l'espaiat.
- “ sm ”, “ md ”, “ lg ”, i “ xl ” són les propietats de la pantalla.
- “ vermell-700 ”, “ blau-600 ”, “ verd-500 ”, “ rosa-700 ”, i “ blanc ” són les propietats del color.
Pas 2: executeu el programa HTML
A continuació, executeu el programa HTML per veure la pàgina web HTML:
A la sortida anterior, es poden veure les pantalles predeterminades, els colors i les propietats d'espaiat.
Com configurar pantalles, colors i espais al tema Tailwind?
Per configurar les pantalles, els colors i l'espaiat al tema Tailwind, mireu els passos proporcionats:
- Obriu el ' tailwind.config.js ' dossier.
- Aneu a la ' tema ” secció i personalitzar les pantalles, els colors i les propietats d'espaiat segons sigui necessari.
- Utilitzeu les propietats personalitzades al programa HTML.
- Consulteu la pàgina web HTML per verificar-la.
Pas 1: configureu les pantalles, els colors i l'espai al fitxer de configuració de Tailwind
En el ' tema ' secció de ' tailwind.config.js ”, personalitzeu les pantalles, els colors i les propietats d'espaiat segons les necessitats. Per exemple, hem personalitzat aquestes propietats de la següent manera:
mòdul .exportacions = {contingut : [ './index.html' ] ,
tema : {
//personalització de pantalles
pantalles : {
sm : '480 px' ,
md : '668 px' ,
lg : '876 px' ,
xl : '1100 px' ,
} ,
//personalització de colors
colors : {
blanc : #ffffff ,
negre : '#000000' ,
blau : '#08609c' ,
verd : '#089c28' ,
vermell : '#9c0306' ,
groc : '#ede60e' ,
rosa : '#ed0e55' ,
} ,
//personalització de l'espaiat
espaiat : {
px : '1px' ,
'0' : '0' ,
'1' : '0,25 rem' ,
'2' : '0,5 rem' ,
'3' : '0,75 rem' ,
'4' : '1 cosa' ,
'5' : '1,25 rem' ,
'6' : '1,5 rem' ,
'8' : '2rem' ,
'10' : '2,5 rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'20' : '5rem' ,
}
} ,
} ;
En aquest codi:
- El ' pantalles ” defineix punts de ruptura de pantalla per a mides variades. Proporciona àlies (com ara sm, md, lg, xl) i els seus valors equivalents.
- El ' colors ” defineix colors personalitzats utilitzant el seu nom i parells de valors hexadecimals.
- El ' espaiat ” La propietat especifica valors d'espaiat personalitzats per a moltes mides. Utilitza àlies (com ara px, 0, 1, 2, etc.) per representar valors d'espaiat específics en unitats 'rem'.
Pas 2: utilitzeu les propietats configurades al programa HTML
Ara, utilitzeu les propietats personalitzades al programa HTML:
Pista de Linux!
>
Benvinguts a aquest tutorial
>
CSS de vent de cua
>
= 'text-2xl m-5 xl:text-text-centre blanc' >
Temes
>
>
Pas 3: visualitza la pàgina web HTML
Finalment, verifiqueu la sortida visualitzant la pàgina web HTML:
Es pot observar que el contingut de la pàgina web canvia segons les pantalles configurades, els colors i les propietats d'espaiat.
Conclusió
El pantalles La clau permet als usuaris personalitzar/modificar els punts d'interrupció de resposta, el colors s'utilitza per personalitzar la paleta de colors per al projecte i el espaiat s'utilitza per personalitzar l'espaiat i l'escala de mida. A més, els usuaris poden personalitzar aquestes claus o propietats segons les seves necessitats. Aquest article ha explicat les pantalles, els colors i l'espaiat al tema Tailwind.