Crea interfaces más rápido y sin dolor con Tailwind CSS

Bootstrap, Bulma, Foundation, Materialize, etc no son tan flexibles, cuando trabajamos con esos frameworks muchas veces tenemos que usar cosas como “important” y mucha re-escritura para hacer que nuestros componentes luzcan como en nuestros sueños, lo cuál hace que muchas empresas prefieran no usar esos frameworks en sus desarrollos.

Los frameworks CSS deberían ayudarnos a desarrollar más rápido y no entorpecernos, algo muy valorado en una herramienta y en el lado de nuestros clientes es que podamos entregar código de manera eficiente que es cuando la calidad y la velocidad se juntan y eso lo perdemos cuando re escribimos, sobre escribimos y aplicamos mañas para forzar al framework a hacer lo que necesitamos.

El problema es que los frameworks css hacen demasiado, al tener componentes definidos y formas tan estrictas para que sus componentes luzcan de las maneras básicas nos obliga a hacer lo mencionado arriba, una solución a tener que escribir CSS desde cero sería tener un framework con utilidades de CSS lo suficientemente flexibles y poderosas para crear los componentes acordes a nuestras necesidades y con mucha flexibilidad para no tener que sobre escribir nada y entregar código de calidad.

TailwindCSS es la respuesta

TailwindCSS es un framework que no tiene componentes sino utilidades de CSS, en vez de preocuparte por decidir que componente usar TailwindCSS te da clases que hacen algo específico en CSS como poner texto en negritas, redondear bordes, poner sombras y cosas atómicas y pequeñas.

Parecería que es más fácil escribir CSS y no usar ningún framework, sin embargo algo con lo que se lucha como desarrollador es saber que valores de padding, margin, etc se ven mejor o que medidas serían las más adecuadas para mantener la proporción y equilibrio visual entre elementos, qué colores usar, además de tener utilidades que nos ayuden con la parte responsiva para que los componentes se adapten como nosotros queramos y no como un equipo externo cree que sería una buena solución para todos los casos.

Algo que podríamos observar cómo crítica es que nuestro código HTML podría tener muchísimas clases, sin embargo TailwindCSS esta basado en PostCSS y tiene una utilidad muy buena para extraer componentes llamada apply.

Aquí podemos ver como se hace un botón extrayendo clases de TailwindCSS

<!-- Usando utilidades: -->
<button 
    class="
    bg-blue-500
    hover:bg-blue-600
    text-white
    font-bold
    py-2
    px-4
    rounded
">
  Button
</button>

<!-- Usando @apply para crear componentes : -->
<style>
  .btn {
    // Decimos que el botón tiene:
    // Fuente en negrita
    // Pading vertical en 2
    // Padding horizontal en 4
    // Que tenga un borde redondeado (hay varias medidas)
    @apply font-bold py-2 px-4 rounded;
  }
  .btn-blue {
    // Decimos que cuando el botón tenga la clase btn-blue tendrá:
    // Fondo azul en su variante 500 (100 más claro al 900 más oscuro)
    // Texto en blanco
    @apply bg-blue-500 text-white;
  }
  .btn-blue:hover {
    // Decimos que cuando el botón tenga la clase btn-blue y este en estado hover tendrá:
    // Fondo azul en 600 (más oscuro ligeramente que la variante 500)
    @apply bg-blue-600;
  }
</style>

Al estar basado en PostCSS también podemos configurarlo para definir nuestras propias utilidades, re escribir lo que necesitemos para casos en que necesitemos algo para hacer responsive nuestros sitios o aplicaciones y definir nuevos colores de acuerdo a la guia de diseño de nuestra empresa y utilizarlos de manera fácil en nuestro proyecto.

Aquí un ejemplo de la configuración de TailwindCSS:

// Vista del archivo tailwind.config.js
module.exports = {
  // Definición de un tema para TailwindCSS
  theme: {
    // Aquí podemos escribir definiciones para responsive
    screens: {
      tablet: '768px',
      desktop: '1024px',
    },
    // Aquí podemos definir nuestras propias paletas de color
    // En este caso vemos una definición para variantes
    // del color primario y secundario
    colors: {
      primary: {
        100: '#ebf8ff',
        300: '#90cdf4',
        500: '#4299e1',
        700: '#2b6cb0',
        900: '#2a4365',
      },
      secondary: {
        100: '#fffff0',
        300: '#faf089',
        500: '#ecc94b',
        700: '#b7791f',
        900: '#744210',
      },
    },
    // Aquí definimos una extensión a los estilos de TailwindCSS
    // A la utilidad boxShadow se le agrega otro nuevo estado
    // a los ya existentes, este nuevo se llama "huge"
    // y aquí se puede escribir el css correspondiente para que
    // podamos usarlo en nuestro código
    extend: {
      boxShadow: {
        huge: '0 30px 60px -15px rgba(0, 0, 0, .25)'
      }
    }
  }
}

Cómo habrás notado TailwindCSS es un framework muy flexible que te permite ser muy rápido y preciso a la hora de maquetar tus interfaces. El creador de TailwindCSS esta lanzando un curso gratuito para poder sacar jugo a su framework mostrando como diseña el frontend de una aplicación web con TailwindCSS; para ver el curso puedes entrar aquí: https://tailwindcss.com/course/

Espero que esta herramienta te facilite la vida y logres interfaces asombrosas con menos esfuerzo 😃🚀❤️