Diseño de Componentes con Tailwind CSS: Guía Práctica Component Design with Tailwind CSS: Practical Guide

1. Configuración con Vite + React (o cualquier framework)1. Setup with Vite + React (or any framework)

Tailwind v4 (2026) tiene instalación simplificada con un único plugin sin archivo tailwind.config.js. Para proyectos Vite + React: Tailwind v4 (2026) has a simplified install with a single plugin and no tailwind.config.js file. For Vite + React projects:

npm install tailwindcss @tailwindcss/vite

# vite.config.ts
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

# src/index.css — una sola línea de setup
@import "tailwindcss";

Para Tailwind v3 (compatible con la mayoría de proyectos existentes), usa npx tailwindcss init y configura content para apuntar a tus archivos: For Tailwind v3 (compatible with most existing projects), use npx tailwindcss init and configure content to point to your files:

// tailwind.config.js (v3)
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,astro}'],
  darkMode: 'class',
  theme: { extend: {} },
  plugins: [],
};

2. Metodología utility-first en práctica2. Utility-First Methodology in Practice

En lugar de escribir clases semánticas (.card, .button--primary), aplicas utilidades directamente en el HTML. Esto parece verboso al principio pero elimina el problema clásico de "cómo nombro esto": Instead of writing semantic class names (.card, .button--primary), you apply utilities directly in the HTML. This seems verbose at first but eliminates the classic "what do I name this" problem:

<!-- Tarjeta de producto -->
<div class="group relative bg-white dark:bg-gray-900 rounded-2xl
            border border-gray-100 dark:border-gray-700 p-6
            shadow-sm hover:shadow-lg transition-shadow duration-300">
  <img class="w-full h-48 object-cover rounded-xl mb-4"
       src={product.image} alt={product.name} />
  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">
    {product.name}
  </h3>
  <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
    {product.description}
  </p>
  <button class="w-full bg-emerald-500 hover:bg-emerald-600 active:scale-95
                 text-white font-medium py-2.5 rounded-xl transition-all">
    Añadir al carrito
  </button>
</div>

3. Diseño responsivo sin media queries personalizadas3. Responsive Design Without Custom Media Queries

Tailwind usa prefijos breakpoint que siguen el enfoque mobile-first: sm: (640px), md: (768px), lg: (1024px), xl: (1280px), 2xl: (1536px): Tailwind uses breakpoint prefixes following the mobile-first approach: sm: (640px), md: (768px), lg: (1024px), xl: (1280px), 2xl: (1536px):

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  {/* Mobile: 1 columna | Tablet: 2 | Desktop: 3 */}
</div>

<h1 class="text-2xl sm:text-3xl lg:text-5xl font-bold">
  Título responsivo
</h1>

<nav class="hidden md:flex items-center gap-4">
  {/* Oculto en mobile, visible en tablet+ */}
</nav>

4. Dark mode con la clase dark4. Dark Mode with the dark Class

Con darkMode: 'class', el dark mode se activa añadiendo la clase dark al elemento <html>. Esto te da control total sobre cuándo se aplica: With darkMode: 'class', dark mode activates by adding the dark class to the <html> element. This gives you full control over when it applies:

// Alternar dark mode
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
  localStorage.setItem('theme',
    document.documentElement.classList.contains('dark') ? 'dark' : 'light'
  );
}

// Aplicar al cargar (evita el FOUC)
const saved = localStorage.getItem('theme');
if (saved === 'dark' || (!saved && matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark');
}

5. Componentes reutilizables con @apply5. Reusable Components with @apply

Cuando un patrón de clases se repite muchas veces, extráelo con @apply en un archivo CSS para mantener el HTML limpio. Úsalo con moderación: When a class pattern repeats many times, extract it with @apply in a CSS file to keep the HTML clean. Use it sparingly:

/* src/styles/components.css */
@layer components {
  .btn {
    @apply inline-flex items-center gap-2 font-medium py-2.5 px-5
           rounded-xl transition-all duration-200 focus:outline-none
           focus-visible:ring-2 focus-visible:ring-offset-2;
  }
  .btn-primary {
    @apply btn bg-emerald-500 text-white hover:bg-emerald-600
           focus-visible:ring-emerald-500;
  }
  .btn-ghost {
    @apply btn bg-transparent border border-gray-300 dark:border-gray-600
           text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800;
  }
  .card {
    @apply bg-white dark:bg-gray-900 rounded-2xl border border-gray-100
           dark:border-gray-700 p-6 shadow-sm;
  }
}

ConclusiónConclusion

Tailwind CSS en 2026 es el estándar para UI development rápido y mantenible. El JIT compiler garantiza bundles mínimos, la API utility-first elimina problemas de especificidad y la integración con frameworks como React, Astro o Vue es first-class. Tailwind CSS in 2026 is the standard for fast, maintainable UI development. The JIT compiler guarantees minimal bundles, the utility-first API eliminates specificity issues and integration with frameworks like React, Astro or Vue is first-class.

¿Necesitas una interfaz moderna y rápida para tu producto? Contáctame. Diseño e implemento UIs con Tailwind CSS, React y Astro para empresas en Colombia y el mundo. Need a modern, fast interface for your product? Contact me. I design and implement UIs with Tailwind CSS, React and Astro for companies in Colombia and worldwide.