Tailwind v4 + shadcn/ui en 2026: el sistema de diseño que funciona

En 2026 el debate "¿librería de componentes o utilidades?" ya no tiene sentido. La respuesta es Tailwind v4 para utilidades + shadcn/ui para componentes. No es un trade-off: son dos piezas que encajan.

Esta guía explica por qué este combo se ha convertido en el default y cómo encajarlo bien en un SaaS Next.js.

Tailwind v4: lo nuevo que importa

Tailwind v4 (2025) trajo cambios fuertes:

• Engine en Rust (Lightning CSS): builds ~10x más rápidos
• Configuración en CSS (no más tailwind.config.js salvo edge cases)
• Variables CSS nativas para tokens del sistema de diseño
• @theme para definir tu paleta directamente en CSS

Ejemplo de globals.css:

@import 'tailwindcss';

@theme {
  --color-brand: #d62828;
  --font-display: 'Inter', sans-serif;
  --radius-card: 0.75rem;
}

Y en cualquier sitio:

<button className="bg-brand rounded-card text-white">Click</button>

Sin configurar, sin importar nada extra.

shadcn/ui: ni librería ni boilerplate

shadcn/ui es un sistema raro y genial. No es una librería que instalas (npm install). Es componentes que copias a tu repo.

bunx shadcn@latest add button
bunx shadcn@latest add dialog

El comando crea el archivo src/shared/components/ui/button.tsx en tu repo. A partir de ahí, es tuyo: lo modificas, lo extiendes, lo borras. No hay update que rompa porque no hay paquete que versione.

Ventajas:

• Tienes el código fuente, lo controlas
• Sin lock-in con la librería
• Cero peso de runtime extra
• Personalización trivial

Desventaja: si un componente se actualiza, tienes que decidir manualmente si quieres mergear los cambios.

Los dos juntos en un SaaS

Mi flujo típico en un nuevo proyecto:

1. Tailwind v4 instalado y configurado (5 minutos)
2. shadcn/ui init: bunx shadcn@latest init
3. Añadir 5-10 componentes core: Button, Input, Dialog, Tabs, Select, Card, DataTable, Form
4. Listo: ya tengo el sistema de diseño base

Para componentes específicos del dominio (un BlogPostCard, un ProjectKanbanColumn), los hago yo con Tailwind directamente. Para todo lo "plataforma" (botones, inputs, modales), shadcn/ui.

Patrón "extender, no copiar"

Si necesitas variaciones del Button, no creas BotónPrimario, BotónSecundario, BotónPeligro copiando código. Extiendes:

import { Button } from '@/shared/components/ui/button';

export function DangerButton(props: React.ComponentProps<typeof Button>) {
  return <Button variant="destructive" {...props} />;
}

O añades una variante al button.tsx con cva. Mantienes una sola fuente.

Dark mode

Tailwind v4 + shadcn/ui traen dark mode integrado. Con next-themes:

import { ThemeProvider } from 'next-themes';

<ThemeProvider attribute="class" defaultTheme="system">
  {children}
</ThemeProvider>;

Y todos los componentes shadcn ya respetan dark: automáticamente. No tienes que escribir CSS extra.

Errores comunes

1. Mezclar shadcn con MUI / Chakra: si tienes ya un Material UI a medias, no añadas shadcn encima. Decide uno y migra. Tener dos sistemas duplica todo.

2. Sobre-personalizar button.tsx: si haces 800 líneas de variantes, la idea de "código a mi gusto" se vuelve "código que da miedo tocar". Mantén pequeño.

3. No usar variables CSS para tokens: si tu marca usa #D62828 en 47 sitios hardcoded, el día que cambia el rebrand lloras. Defínelo en @theme.

4. Olvidar el plugin de Tailwind para Prettier: sin él, las clases largas se vuelven un infierno. prettier-plugin-tailwindcss ordena las clases automáticamente.

Cuándo NO usar shadcn/ui

• Equipo grande con design system propio en producción ya — mantén el vuestro
• Aplicación con design exótico (animaciones complejas, layout no estándar) — shadcn es pragmático, no creativo
• Necesitas componentes muy específicos (calendarios complejos, gráficos) — usa una librería especializada para esos

Para el 90% de SaaS indie, shadcn/ui cubre la base.

Conclusión

Tailwind v4 + shadcn/ui es la combinación con mejor ratio velocidad / control / mantenimiento para SaaS en 2026. Setup en una tarde, control sobre el código, sistema de diseño coherente.

Si tu boilerplate todavía usa Bootstrap o MUI, mira shadcn. La diferencia en DX desde el día 1 es notable.