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 affiche des performances améliorées.

Commandes :

Souligner:

underline 
underline-offset-
decoration-- //color for underline
decoration- // size of underline
decoration-

Style du texte

text-- //color of text
text-opacity- //opacity of text
text- //size of text
text- //alignment of text

Couleur d'arrière-plan

bg--

Rayon de bordure

rounded-

Style de police

font-

Italique:

italic

Visibilité

Masquer les éléments :

hidden

Afficher (en face pour masquer) :

block

Rembourrage

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

Marge

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

Flexbox

flex
flex- // row or column

Justifier le contenu

justify-

Aligner les éléments

items- //start,end,center

Conception réactive

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

Taille

h-
w-

Bordures

border
border-
border-

États de survol

hover: