Conociendo Tailwind CSS

¿Cómo funciona Tailwind? Y otros frameworks de CSS

Framework CSS → Conjunto de herramientas para construir una interfaz web con CSS, que nos permite agilizar el desarrollo.

Tailwind es un framework utility-first y está diseñado para acelerar el proceso de diseño al eliminar por completo la necesidad de usar CSS.

Características:

Representado mediante clases, definimos nuestros estilos.
Orientado a utilidades, vuelve el desarrollo más personalizable.
Personalizable, Tailwind es 100% personalizable a diferencia de otros frameworks.

Otros frameworks de CSS:

Bootstrap:
- Basado en componentes.
- Abstracción en la creación de los componentes.
- Poco personalizable.
Material UI:
- Basado en componentes pre-construidos.
- Basado en el tema de Material.
- Design System.
Bulma:
- Framework modular, permite importar los archivos que se necesiten utilizar.
- Personalizable, mediante la creación de variables en SASS se pueden agregar estilos personalizados.
- Basado en Flexbox.

Hay dos principios para trabajar con Tailwind:

Mobile First → Pensado principalmente para mejorar la experiencia de usuario. Permite identificar las partes más importantes de nuestro proyecto. En otras palabras, prioriza el desarrollo pensando en los dispositivos móviles.
Utility First → Basado en utilidades el cual permite tener una estructura más limpia de nuestros estilos, el desarrollo es más rápido ya que todo se trabaja dentro del mismo archivo. En otras palabras, es la forma en que se nombran y se crean las clases de estilos, realmente son clases descriptivas de la utilidad que nos dan. Se trata de construir componentes a partir de clases con nombres descriptivos.