Cet article vous expliquera :
- Que font les écrans, les couleurs et l'espacement dans le thème Tailwind ?
- Comment utiliser les écrans, les couleurs et l'espacement dans le thème Tailwind ?
- Comment configurer les écrans, les couleurs et l'espacement dans le thème Tailwind ?
Que font les écrans, les couleurs et l'espacement dans le thème Tailwind ?
Le écrans La clé permet aux utilisateurs de modifier les points d'arrêt réactifs dans le projet Tailwind. Les points d'arrêt sont les points où la disposition change en fonction de la largeur de l'écran. Par défaut, Tailwind comprend cinq écrans, c'est-à-dire sm (petit), md (moyen), lg (grand) et xl (très grand). Cependant, les utilisateurs peuvent définir leurs points d'arrêt à l'aide de la touche 'écrans', puis les utiliser dans le programme HTML.
Couleurs La touche est utilisée pour modifier la palette de couleurs. Les couleurs sont l'une des caractéristiques les plus importantes du design. Le thème Tailwind fournit une palette de couleurs par défaut avec une large gamme de nuances, mais les utilisateurs peuvent également la personnaliser ou l'étendre avec leurs couleurs. Les utilisateurs peuvent définir des couleurs à l'aide de la touche 'colors', puis les utiliser avec n'importe quelle classe utilitaire liée aux couleurs dans le code HTML.
Le espacement La touche est utilisée pour modifier l'espacement et l'échelle de dimensionnement. L'espacement est un autre aspect essentiel de la conception, car il affecte la lisibilité, l'alignement et l'équilibre des éléments. Le thème Tailwind fournit une échelle d'espacement cohérente basée sur une valeur de base de 4 pixels (0,25 rem). Cependant, il peut également être personnalisé ou étendu avec des valeurs personnalisées. Les utilisateurs peuvent définir des valeurs d'espacement à l'aide de la touche 'espacement', puis les utiliser avec n'importe quelle classe d'utilitaires liés à l'espacement dans le fichier programme.
Comment utiliser les écrans, les couleurs et l'espacement dans le thème Tailwind ?
Pour utiliser les écrans, les couleurs et l'espacement dans le thème Tailwind, créez un programme HTML et utilisez les propriétés d'écran, de couleurs et d'espacement par défaut selon vos besoins. Ensuite, exécutez le programme HTML et affichez la page Web HTML. Suivons les étapes ci-dessous :
Étape 1 : créer une page Web HTML
Tout d'abord, créez un programme HTML et utilisez les propriétés d'écran, de couleurs et d'espacement par défaut :
= 'text-3xl m-5 sm:text-white text-center' >
Astuce Linux !
>
= 'text-2xl m-5 md:text-white text-center' >
Bienvenue dans ce tutoriel
>
= 'text-2xl m-5 lg:text-white text-center' >
CSS vent arrière
>
= 'text-2xl m-5 xl:text-white text-center' >
Thèmes
>
>
Bienvenue dans ce tutoriel
>
CSS vent arrière
>
= 'text-2xl m-5 xl:text-white text-center' >
Thèmes
>
>
Ici:
- ' -p-10 ' et ' m-5 ” sont la propriété d'espacement.
- ' nm ”, “ Maryland ”, “ lg ', et ' XL ” sont les propriétés de l'écran.
- ' rouge-700 ”, “ bleu-600 ”, “ vert-500 ”, “ rose-700 ', et ' blanc ” sont les propriétés de couleur.
Étape 2 : exécuter le programme HTML
Exécutez ensuite le programme HTML pour afficher la page Web HTML :
Dans la sortie ci-dessus, les écrans, les couleurs et les propriétés d'espacement par défaut sont visibles.
Comment configurer les écrans, les couleurs et l'espacement dans le thème Tailwind ?
Pour configurer les écrans, les couleurs et l'espacement dans le thème Tailwind, consultez les étapes fournies :
- Ouvrez le ' tailwind.config.js ' déposer.
- Allez dans le ' thème ” et personnalisez les écrans, les couleurs et les propriétés d'espacement selon vos besoins.
- Utilisez les propriétés personnalisées dans le programme HTML.
- Affichez la page Web HTML pour vérification.
Étape 1 : Configurer les écrans, les couleurs et l'espacement dans le fichier de configuration Tailwind
Dans le ' thème « partie du « tailwind.config.js ', personnalisez les écrans, les couleurs et les propriétés d'espacement en fonction des besoins. Par exemple, nous avons personnalisé ces propriétés comme suit :
module .exportations = {contenu : [ './index.html' ] ,
thème : {
//personnalisation des écrans
écrans : {
nm : '480px' ,
Maryland : '668px' ,
lg : '876px' ,
XL : '1100px' ,
} ,
//personnalisation des couleurs
couleurs : {
blanc : #ffffff ,
noir : '#000000' ,
bleu : '#08609c' ,
vert : '#089c28' ,
rouge : '#9c0306' ,
jaune : '#ede60e' ,
rose : '#ed0e55' ,
} ,
// personnalisation de l'espacement
espacement : {
pixels : '1px' ,
'0' : '0' ,
'1' : '0.25rem' ,
'2' : '0.5rem' ,
'3' : '0.75rem' ,
'4' : '1 chose' ,
'5' : '1.25rem' ,
'6' : '1.5rem' ,
'8' : '2rem' ,
'dix' : '2.5rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'vingt' : '5rem' ,
}
} ,
} ;
Dans ce code :
- Le ' écrans ” La propriété définit des points d'arrêt d'écran pour différentes tailles. Il fournit des alias (tels que sm, md, lg, xl) et leurs valeurs équivalentes.
- Le ' couleurs ” définit les couleurs personnalisées en utilisant leur nom et leurs paires de valeurs hexadécimales.
- Le ' espacement ” La propriété spécifie des valeurs d'espacement personnalisées pour de nombreuses tailles. Il utilise des alias (tels que px, 0, 1, 2, etc.) pour représenter des valeurs d'espacement spécifiques en unités 'rem'.
Étape 2 : Utiliser les propriétés configurées dans le programme HTML
Maintenant, utilisez les propriétés personnalisées dans le programme HTML :
= 'text-3xl m-5 sm:text-white text-center' >
Astuce Linux !
>
= 'text-2xl m-5 md:text-white text-center' >
Bienvenue dans ce tutoriel
>
= 'text-2xl m-5 lg:text-white text-center' >
CSS vent arrière
>
= 'text-2xl m-5 xl:text-white text-center' >
Thèmes
>
>
Bienvenue dans ce tutoriel
>
CSS vent arrière
>
= 'text-2xl m-5 xl:text-white text-center' >
Thèmes
>
>
Étape 3 : Afficher la page Web HTML
Enfin, vérifiez le résultat en affichant la page Web HTML :
On peut observer que le contenu de la page Web change en fonction des écrans, des couleurs et des propriétés d'espacement configurés.
Conclusion
Le écrans La clé permet aux utilisateurs de personnaliser/modifier les points d'arrêt réactifs, la couleurs est utilisée pour personnaliser la palette de couleurs pour le projet et la espacement La clé est utilisée pour personnaliser l'espacement et l'échelle de dimensionnement. De plus, les utilisateurs peuvent personnaliser ces clés ou propriétés en fonction de leurs besoins. Cet article a expliqué les écrans, les couleurs et l'espacement dans le thème Tailwind.