¿Por qué Tailwind CSS es tan especial? 🤔 un framework de CSS diferente :: Alfredo Mendoza

¿Estás cansado de…

…personalizar las clases de un framework CSS para darle un toque propio?.
…escribir el tan criticado !important para que tus estilos hagan efecto?.
…que todos tus sitios se vean igual? (gracias Bootstrap 😜).

Si la respuesta es SÍ, en este post te presento a Tailwind CSS, veremos que lo hace tan especial y sus principales killer features 😎.

¿Qué es Tailwind CSS?⌗

Es un framework de CSS (pero no es como los demás 🤭), especificamente es un framework Utility-First (de utilería), esto significa que Tailwind nos da solo clases utilitarias para hacer margins, paddings, backgrounds, font sizes, etc; combinando estas clases puedes diseñar tus propios componentes totalmente personalizados.

En mi opinión Tailwind CSS es un framework que (casi) NO se mete con tu diseño , por eso lo hace tan especial.

A continuación te presento una infografía donde te resumo las principales características de Tailwind:

Características⌗

Utility-First⌗

Por ejemplo, Bootstrap te da componentes ya hechos para que los uses, estos te facilitan el trabajo, pero si lo que buscas es personalizar por ejemplo un botón tendrías que entrar al mismo archivo CSS de Bootstrap o sin tanta demora agregas !important, lo que implica malas prácticas o perdida de tiempo. Entonces el concepto de Utility-First soluciona ese incoveniente entregandote clases muy descriptivas para crear tus propios componentes:

<!-- Boostrap -->
<button class="btn btn-danger btn-outline-danger">Botón</button>
<button class="btn btn-outline-danger">Botón Fantasma</button>

<!-- Tailwind -->
<button class="px-4 py-2 bg-red-500 rounded">Botón</button>
<button
  class="px-4 py-2 text-red-500 border border-red-500 rounded"
>Botón Fantasma</button>

Lo sé, esas clases largas te pueden incomodar, pero como ves las clases son totalmente descriptivas que con práctica junto con la documentación te acostumbrarás.

Responsive Design⌗

Todo framework de CSS implementa este concepto, Tailwind no es la excepción y puedes personalizar los breakpoints a tu gusto:

<!-- Boostrap -->
<section class="d-none d-sm-flex d-md-block"></section>

<!-- Tailwind -->
<section class="hidden sm:flex md:grid"></section>

Si te has fijaste bien 👀 hay una clase en particular 👉 md:grid, en efecto Tailwind CSS utiliza tanto FLEXBOX como CSS GRID para su sistema de columnas cosa que en otros frameworks solo usan el primero, así que no hay excusa para hacer CSS moderno 💪 con un framework.

Variantes de Pseudo Clase⌗

En otros frameworks no hay un control para manipular los cambios de estado de un elemento, me refiero que no puedes manipular las pseudoclases como :hover, :placeholder y :focus, con Tailwind sí puedes hacerlo.

<!-- Boostrap -->
<input type="text" class="form-control">

<!-- Tailwind -->
<input
  type="text"
  class="border border-gray-400 focus:border-blue-500 text-gray-500 placeholder:text-blue-400">

Clases Personalizadas⌗

Ahora, que pasa si Tailwind no tiene lo que necesito, una medida, un color ó una fuente; NO HAY PROBLEMA, puedes agregar tu propia clase a un archivo de configuración llamado tailwind.config.file, puedes agregar colores, medidas nuevas, fuentes, etc:

module.exports = {
  theme: {
    extend: {
      height: {
        '18': '4.5rem'
      },
      colors: {
        'accent': '#A300BF',
        'primary': '#FF823F',
        'text': '#53575A',
        'dark': '#282D31',
        'darker': '#141618',
      },
      fontFamily: {
        'roboto': ["'Roboto'", 'sans-serif'],
      },
      inset : {
        '1/2': '50%',
        '12': '3rem',
      },
    }
  },
  variants: {},
  plugins: []
}

Y lo bueno de Tailwind es que sus clases hasta sus configuración son muy descriptivos, seguramente entiendes toda esa configuración sin necesidad de una gran explicación 😎.

Conclusión⌗

Tailwind CSS tiene una gran comunidad y siempre esta en costantes mejoras para todos los amantes de este framework, incluso al momento de escribir este post el creador del framework Adam Wathan en un tweet hace poco anunció que lanzará una mejora con posibilidad de hacer Dark Mode 🌗 en nuestros proyectos.

Si quieres ver un nuevo post haciendo una comparativa entre Tailwind CSS, Bootstrap y Vanilla CSS (solo CSS), házmelo saber en los comentarios 🤙.

¿Por qué Tailwind CSS es tan especial? 🤔 un framework de CSS diferente

Tabla de Contenidos