Tailwind CSS

Tailwind CSS

​Que es Tailwind?

Tailwind CSS es un framework CSS que permite un desarrollo ágil, basado en clases de utilidad que se pueden aplicar con facilidad en el código HTML y unos flujos de desarrollo que permiten optimizar mucho el peso del código CSS.

da un enfoque basado en clases de utilidad ​

Enfoque de clases de utilidad

En Tailwind le llaman "Utility-first workflow" y básicamente consiste en el modo de trabajo que nos propone el framework, en el que tenemos que modificar el HTML para insertar las clases que sean necesarias para aplicar estilo a los componentes.

Las clases de utilidad son atómicas, es decir, afectan a un estilo muy concreto, aportando un valor determinado. Por ejemplo:

• p-8: altera el padding para que sea de 2rem (0.25 * 8 rem)

• mt-2: altera el margin-top para que sea 0.5rem (0.25 * 2 rem)

• flex: pone display a flex

• items-center: aplica el estilo "aling-items: center"

• text-orange-300: pone el color del texto a naranja más bien claro.

• bg-gray-800: pone el color de fondo gris muy oscuro.

Ventajas y desventajas

• Los estilos se pueden escribir sin necesidad de tocar el CSS

• El CSS de un proyecto no aumenta cuando se realizan especializaciones de estilo para algún elemento en particular.

• En las clases de utilidad podemos escribir estilos que sólo afectarán en determinadas variantes de pseudo-clases, como hover o focus

• Mediante las clases de utilidad podemos aplicar estilos que solo afectarán a un contenido en determinada anchura de pantalla.

• Las clases de utilidad se pueden personalizar, creando un tema gráfico que se acompaña durante todo el diseño.

• Tailwind CSS permite crear componentes por medio de especificación de diversas clases de utilidad, de modo que se puede reducir el uso de las mismas en los casos en los que se juzgue oportuno.

• El desarrollo se hace mucho más rápido.

Ejemplo Usado en HTML

​Da un enfoque basado en clases de utilidad por tanto se escriben muchas mas clases en el HTML

REFERENCIA

​https://desarrolloweb.com/home/tailwind-css