10 Tips de Tailwind CSS que todo desarrollador debería conocer

10 Tips de Tailwind CSS que todo desarrollador debería conocer
Por Toxe
25 de enero de 2024
#tailwind #css #tips #frontend

Descubre trucos y técnicas avanzadas de Tailwind CSS que te ayudarán a escribir CSS más eficiente y mantener código más limpio.

10 Tips de Tailwind CSS que cambiarán tu forma de escribir CSS

Tailwind CSS se ha convertido en una de las herramientas más populares para el desarrollo frontend. En este artículo, comparto 10 tips que he aprendido durante mi experiencia trabajando con este framework.

1. Usa @apply para componentes reutilizables

En lugar de repetir clases largas, crea componentes CSS reutilizables:

/* styles.css */
.btn-primary {
  @apply bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200;
}

.card {
  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700;
}

2. Aprovecha las variantes de estado

Tailwind incluye muchas variantes útiles que puedes combinar:

<!-- Hover, focus, active, disabled, etc. -->
<button
  class="bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 active:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
>
  Botón interactivo
</button>

3. Usa arbitrary values para casos específicos

Cuando necesites valores exactos que no están en la configuración por defecto:

<!-- Colores personalizados -->
<div class="bg-[#1a1a1a] text-[#ff6b6b]">Colores personalizados</div>

<!-- Espaciado específico -->
<div class="p-[23px] m-[1.5rem]">Espaciado exacto</div>

<!-- Tamaños de fuente personalizados -->
<h1 class="text-[2.5rem] leading-[3rem]">Título personalizado</h1>

4. Organiza tus clases con Prettier

Instala el plugin de Prettier para Tailwind y mantén tus clases organizadas:

npm install -D prettier prettier-plugin-tailwindcss
// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

5. Usa container queries (Tailwind 3.2+)

Las container queries te permiten aplicar estilos basados en el tamaño del contenedor padre:

<div class="@container">
  <div class="@lg:grid @lg:grid-cols-2 @xl:grid-cols-3">
    <!-- El grid cambia según el tamaño del contenedor, no de la ventana -->
  </div>
</div>

6. Aprovecha las funciones CSS nativas

Tailwind 3.3+ incluye soporte para funciones CSS modernas:

<!-- clamp() para responsive typography -->
<h1 class="text-[clamp(1.5rem,4vw,3rem)]">Título responsive</h1>

<!-- min() y max() para espaciado -->
<div class="p-[max(1rem,5vw)]">Padding que nunca será menor a 1rem</div>

7. Usa grupos para hover en elementos padre

El modificador group te permite aplicar estilos en elementos hijos cuando haces hover en el padre:

<div class="group cursor-pointer">
  <img
    class="group-hover:scale-105 transition-transform duration-300"
    src="image.jpg"
    alt=""
  />
  <h3 class="group-hover:text-blue-600 transition-colors">Título</h3>
  <p class="group-hover:opacity-80 transition-opacity">Descripción</p>
</div>

8. Crea sistemas de espaciado consistentes

Define un sistema de espaciado en tu configuración:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        18: "4.5rem",
        88: "22rem",
        128: "32rem",
      },
    },
  },
};

9. Usa @layer para organizar tu CSS

Organiza tu CSS personalizado en capas lógicas:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    @apply scroll-smooth;
  }

  body {
    @apply font-sans antialiased;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center rounded-md font-medium transition-colors;
  }
}

@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }
}

10. Optimiza para producción

Asegúrate de purgar las clases no utilizadas:

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  // ... resto de configuración
};

Bonus: Herramientas útiles

  • Tailwind CSS IntelliSense - Autocompletado en VS Code
  • Headless UI - Componentes accesibles para Tailwind
  • Heroicons - Iconos SVG optimizados
  • Tailwind UI - Componentes premium

Conclusión

Estos tips te ayudarán a escribir CSS más eficiente y mantenible con Tailwind. La clave está en encontrar el balance entre usar las utilidades de Tailwind y crear componentes reutilizables cuando sea necesario.

¿Tienes algún tip de Tailwind que quieras compartir? ¡Déjalo en los comentarios!

¿Te resultó útil este artículo? Compártelo con otros desarrolladores y sígueme para más contenido sobre desarrollo frontend.

Volver al blog