5 Tips para dominar Tailwind CSS

Tailwind CSS se ha convertido en mi framework de CSS favorito. Aquí te comparto algunos tips que me han ayudado a ser más productivo.

1. Usa @apply con moderación

Aunque @apply es útil, abusar de él va en contra de la filosofía de Tailwind:

/* ❌ Evita esto */
.btn {
  @apply px-4 py-2 bg-blue-500 text-white rounded;
}

/* ✅ Mejor usa componentes */
<button class="px-4 py-2 bg-blue-500 text-white rounded">
  Click me
</button>

2. Personaliza tu paleta de colores

No te limites a los colores por defecto. Crea tu propia paleta:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': {
          50: '#f0f9ff',
          // ... más tonos
          900: '#0c4a6e',
        }
      }
    }
  }
}

3. Aprovecha las variantes responsive

Tailwind hace el responsive design muy fácil:

<div class="text-sm md:text-base lg:text-lg xl:text-xl">
  Texto que escala según el viewport
</div>

4. Usa arbitrary values cuando lo necesites

Para valores específicos que no están en tu configuración:

<div class="top-[117px] w-[347px]">
  Valores arbitrarios
</div>

5. Organiza tus clases con plugins

Usa plugins como prettier-plugin-tailwindcss para ordenar automáticamente tus clases.

Conclusión

Tailwind CSS es increíblemente poderoso cuando entiendes sus patrones. Estos tips te ayudarán a escribir código más limpio y mantenible.

¿Tienes algún tip adicional? ¡Compártelo!