Tailwind CSS es un marco CSS de utilidad repleto de clases que se pueden componer para crear cualquier diseño, directamente en su marcado.

Características:

Primero la utilidad:

Tailwind css es un marco CSS de utilidad que proporciona clases de utilidad de bajo nivel para crear diseños personalizados sin escribir CSS. Este enfoque nos permite implementar un diseño de componente completamente personalizado sin escribir una sola línea de CSS personalizado. "No estás desperdiciando energía inventando nombres de clases".

Purga de contenido:

Es el proceso de eliminar las clases CSS no utilizadas del archivo CSS final que se utilizará en el entorno de producción. Es un proceso de optimización en el que el tamaño CSS final es más pequeño, más fácil de mantener y muestra un rendimiento mejorado.

Comandos:

Subrayar:

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

Estilo de texto

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

Color de fondo

bg--

Radio del borde

rounded- 

Estilo de fuente

font-

Itálico:

italic

Visibilidad

Ocultar elementos:

hidden

Mostrar (opuesto a ocultar):

block

Relleno

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

Margen

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

Justificar contenido

justify-

Alinear elementos

items- //start,end,center

Diseño responsivo

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

Apresto

h-
w-

Fronteras

border
border-
border-

Estados de desplazamiento

hover: