CREA.MBAshadcn/ui 2.3.0 trae soporte de primera para Tailwind v4. Qué cambió, cómo montarlo en Next.js 16 y los gotchas que evitar.
Durante casi todo 2025, mezclar shadcn/ui con Tailwind v4 significaba vivir al filo: flags canary, ajustes manuales y CSS que se rompía en la siguiente actualización. Con shadcn/ui 2.3.0 esa era se acabó. Tailwind v4 ya es ciudadano de primera.
Esto es lo que cambió de verdad, cómo montarlo en un proyecto Next.js 16, y los gotchas que aún muerden.
tailwind.config.js en favor de configuración por CSS. shadcn 2.3.0 genera componentes que lo asumen: tus tokens viven en @theme dentro del CSS, no en un objeto JS.@import "tailwindcss" sustituye a las tres directivas @tailwind de antes.bunx shadcn@latest) detecta v4 y hace el scaffold acorde.@tailwindcss/postcss).globals.css con @import "tailwindcss"; y tu bloque @theme inline { ... } mapeando variables CSS a tokens de Tailwind.bunx shadcn@latest init — elige la ruta v4 cuando lo pregunte.bunx shadcn@latest add button card dialog.El cambio mental clave: en v4 no hay config JS que extender. Un color o una fuente nuevos son una variable CSS más una entrada en @theme inline, y Tailwind la recoge.
1. @theme vs @theme inline. Si tus tokens referencian otras variables CSS (el patrón shadcn: --primary → --color-primary), necesitas @theme inline. El @theme a secas inlinea el valor en build time y tus overrides de dark mode dejan de funcionar. Es el bug número uno de "por qué se me rompe el modo oscuro".
2. OKLCH en todo o en nada. No mezcles restos de HSL con los defaults OKLCH — los dos espacios de color interpolan distinto y tus hovers se verán raros. Convierte la paleta entera.
3. El plugin typography / prose. @tailwindcss/typography necesitó ajustes para v4. Si el contenido de tu blog se ve sin estilo, suele ser esto.
4. Componentes de terceros. Librerías que aún asumen clases de v3 pueden chocar. Revisa cualquier cosa que inyecte sus propias clases de Tailwind.
Si empiezas de cero: sí, sin duda. v4 + shadcn 2.3.0 es el default para un Next.js 16 nuevo, y la config-en-CSS es genuinamente mejor una vez te entra.
Si tienes un código v3 que funciona: la migración es real pero acotada — sobre todo el movimiento de config y la conversión del espacio de color. Reserva media jornada para una app mediana, y hazlo en su propia PR, no mezclado con features.
shadcn/ui 2.3.0 convierte Tailwind v4 de "posible con esfuerzo" en "la ruta recomendada". El modelo de config en CSS y los tokens OKLCH son el futuro; el único trabajo real es la migración, y es un coste de una sola vez.
CREA.MBA va exactamente sobre este stack — Next.js 16, Tailwind v4, shadcn/ui 2.3.0 con tokens OKLCH y @theme inline ya cableados, modo oscuro incluido. Los gotchas de arriba ya están resueltos en el boilerplate, así que arrancas desde un sistema de styling que funciona en vez de debugar espacios de color.
Suscríbete para más tutoriales y tips sobre crear productos con IA