Le formatage du texte et des éléments est souvent complexe en CSS.
Cela peut entraîner un code désorganisé et des incohérences dans le design, rendant le développement fastidieux.
Tailwind CSS simplifie ce processus avec ses classes utilitaires, facilitant la création de designs harmonieux et maintenables.
Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée
À présent qu’on a la connaissance, il est temps de noter tout cela dans notre mémo pour enrichir notre documentation. Nous allons donc reprendre la base de notre documentation et d’ajouter un nouveau tableau concernant le formatage d’une boîte :
- Code :
Mémo Tailwind CSS
Formater du texte
Propriété
class
color
text-red-50 ... text-red-950
font-family
font-sans, font-serif, font-mono
font-size
text-xs, text-sm, text-base, text-lg, text-xl
font-weight
font-light, font-normal, font-bold
font-style
italic, not-italic
letter-spacing
tracking-tighter, tracking-normal, tracking-widest
text-decoration
underline, overline, line-through, no-underline
text-align
text-left, text-center, text-right, text-justify
text-transform
uppercase, lowercase, capitalize, normal-case
Formater une boîte
Propriété
class
Propriété
class
Propriété
class
Propriété
class
Propriété
class
Propriété
class
Propriété
class
Propriété
class
Propriété
class
Propriété
class
- CodePen :
CodePen : Vous pouvez retrouver la base de la documentation via le lien ci-dessous :
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
Formatage Tailwind CSS : style de boîtes
Tout à l’heure, nous avons vu en premier lieu les propriétés CSS suivants :
- background-color :qui a son équivalence en Tailwind avec la classebg-{couleur}-{nuance}
- width :qui peut être représenté par unevaleur exacte, unevaleur fractionnaireet unevaleur littérale.
- height :pour la hauteur ou la longueur si vous voulez qui est aussi représenté de la même manière quewidth.
Je précise ici que si vous voyez ceci {couleur}, cela veut dire que la couleur est une variable. Ça sera notre petite convention pour ce chapitre.
Nous allons donc prendre des exemples et les ajouter dans notre tableau comme ceci :
Vous avez le code, vous avez les connaissances requises en HTML donc je vous laisse remplir le tableau. Mais ne vous inquiétez pas, à la fin de ce chapitre, je vous donnerai la version finale du mémo pour le formatage d’une boîte.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment formater du texte avec Tailwind CSS?
Quelles sont les classes Tailwind CSS pour les propriétés de base?
Comment utiliser Tailwind CSS pour le style de boîtes?
Quelle est l'équivalence Tailwind CSS pour 'background-color'?
Comment organiser une documentation avec Tailwind CSS?
Conclusion
En maîtrisant le formatage avec Tailwind CSS, vous pouvez créer des designs élégants et cohérents sans effort. Quels autres outils utilisez-vous pour améliorer vos interfaces utilisateur?