Aide-mémoire sur les commandes Tailwind

Tailwind CSS est un framework CSS utilitaire rempli de classes qui peuvent être composées pour créer n'importe quelle conception, directement dans votre balisage.

Caractéristiques:

L’utilitaire d’abord :

Tailwind CSS est un framework CSS axé sur les utilitaires qui fournit des classes utilitaires de bas niveau pour créer des conceptions personnalisées sans écrire de CSS. Cette approche nous permet d'implémenter une conception de composant entièrement personnalisée sans écrire une seule ligne de CSS personnalisé. "Vous ne gaspillez pas d'énergie à inventer des noms de classe".

Purge du contenu :

Il s'agit du processus de suppression des classes CSS inutilisées du fichier CSS final qui sera utilisé dans l'environnement de production. Il s'agit d'un processus d'optimisation dans lequel la taille CSS finale est plus petite, plus facile à maintenir et montre des performances améliorées.

Commandes :

Souligner :

underline 
underline-offset-<size>
decoration-<color>-<shade> //color for underline
decoration-<thickness> // size of underline
decoration-<style> // wavy, double

Style du texte

text-<color>-<shade> //color of text
text-opacity-<shade> //opacity of text
text-<size> //size of text
text-<alignment> //alignment of text

Couleur de fond

bg-<color>-<shade>

Rayon de la bordure

rounded-<size> 

Style de police

font-<style> //mono, serif, sans
font-bold
font-thin

Italique :

italic

Visibilité

Masquer les éléments :

hidden

Affichage (Ci-contre pour masquer) :

block

Rembourrage

p-<size>   /* All sides */
px-<size>  /* Horizontal (left and right) */
py-<size>  /* Vertical (top and bottom) */
pl-<size>  /* Left */
pr-<size>  /* Right */
pt-<size>  /* Top */
pb-<size>  /* Bottom */

Marge

m-<size>   /* All sides */
mx-<size>  /* Horizontal (left and right) */
my-<size>  /* Vertical (top and bottom) */
ml-<size>  /* Left */
mr-<size>  /* Right */
mt-<size>  /* Top */
mb-<size>  /* Bottom */

Flexbox

flex
flex-<direction> // row or column

Justifier le contenu

justify-<option>

Aligner les éléments

items-<option> //start,end,center

Conception réactive

sm  /* Small devices */
md  /* Medium devices */
lg  /* Large devices */
xl  /* Extra large devices */

Taille

h-<size>
w-<size>

Frontières

border
border-<size>
border-<color>

États de survol

hover:<utility>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!