Tailwind CSS
En las lecciones anteriores organizamos la estructura de nuestra aplicación web por features y aprendimos a comunicar la interfaz con servicios de backend. Sin embargo, para crear experiencias digitales memorables y profesionales, necesitamos un sistema de diseño visual ágil, mantenible y consistente.
En esta lección exploraremos Tailwind CSS v4, el motor de estilos utilitarios más moderno para la web. Como diseñadores de entornos digitales, descubrirás cómo Tailwind traduce los fundamentos del diseño (escalas tipográficas, ritmos de espaciado, paletas cromáticas coherentes y diseño responsivo mobile-first) directamente al código de tus interfaces, sin necesidad de escribir hojas de estilo complejas ni lidiar con nombres de clases arbitrarios.
1. Utility-first
El paradigma de Tailwind CSS se denomina Utility-First (utilidades primero). En lugar de escribir selectores CSS personalizados para cada clase de componente (como en BEM tradicional) o de inyectar estilos imperativos directamente en el DOM, Tailwind proporciona clases atómicas altamente especializadas (por ejemplo, p-4, flex, bg-blue-600, rounded-xl) que componen el diseño directamente en el marcado JSX.
Es común que los desarrolladores que recién conocen Tailwind pregunten: ¿acaso usar clases utilitarias no es lo mismo que volver a los estilos en línea (style={{ ... }})? La respuesta técnica es un rotundo no. Existen diferencias arquitectónicas fundamentales entre ambos enfoques:
| Característica | Estilos en Línea (style={{ ... }}) | CSS Tradicional / BEM (.css) | Utility-First (Tailwind CSS v4) |
|---|---|---|---|
| Escala de Diseño | Valores arbitrarios dispersos (padding: 15px, 18px). Inconsistencia visual. | Definida manualmente mediante variables CSS (--spacing-4). | Escala numérica estandarizada basada en múltiplos de 4px (p-1, p-2, p-4). |
| Pseudo-clases | Imposible usar :hover, :focus, :active o :disabled sin JavaScript. | Soporte nativo escribiendo reglas para cada selector. | Prefijos declarativos directos (hover:bg-blue-700, focus:ring-2, active:scale-95). |
| Diseño Responsivo | Imposible usar Media Queries en el atributo style. | Requiere bloques @media dispersos en múltiples archivos. | Modificadores de pantalla integrados (sm:, md:, lg:, xl:) con enfoque mobile-first. |
| Peso en Producción | Duplicación masiva en el DOM HTML por cada nodo. | El CSS crece continuamente a medida que el proyecto añade pantallas. | Zero-runtime y Purga Automática: el compilador genera únicamente las clases usadas (~15-20 KB). |
| Caché del Navegador | Cada elemento envía sus propios bytes; sin caché. | Cacheado como archivo .css estático independiente. | Archivo CSS estático global altamente comprimible y cacheable en CDN. |
Componente de Referencia: Tarjeta de Usuario
Para ilustrar el enfoque en el dominio del curso, observemos cómo se compone una tarjeta de usuario (UserCard) combinando clases utilitarias para espaciado, tipografía, bordes, estados y transiciones suaves:
// Tarjeta de usuario estilizada íntegramente con clases utilitarias de Tailwind CSS v4
interface UserCardProps {
id: string;
name: string;
role: string;
email: string;
isActive: boolean;
onToggleStatus: (id: string) => void;
}
export function UserCard({
id,
name,
role,
email,
isActive,
onToggleStatus,
}: UserCardProps) {
return (
<article className="flex flex-col justify-between p-6 bg-white dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-sm hover:shadow-md transition-all duration-200">
<div>
{/* Encabezado: Avatar y Rol */}
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-300 flex items-center justify-center font-bold text-sm">
{name.slice(0, 2).toUpperCase()}
</div>
<div>
<h3 className="text-base font-bold text-gray-900 dark:text-white leading-tight">
{name}
</h3>
<p className="text-xs text-gray-500 dark:text-gray-400">
{email}
</p>
</div>
</div>
<span className="text-xs font-semibold px-2.5 py-1 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300">
{role}
</span>
</div>
<p className="text-sm text-gray-600 dark:text-gray-400">
Miembro registrado en el sistema con permisos de visualización.
</p>
</div>
{/* Pie de tarjeta: Estado y Acción */}
<div className="mt-6 pt-4 border-t border-gray-100 dark:border-gray-700 flex items-center justify-between">
<span
className={`text-xs font-semibold ${
isActive
? 'text-emerald-600 dark:text-emerald-400'
: 'text-amber-600 dark:text-amber-400'
}`}
>
{isActive ? 'Activo' : 'Inactivo'}
</span>
<button
onClick={() => onToggleStatus(id)}
className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 active:scale-95 rounded-lg transition-transform cursor-pointer"
>
{isActive ? 'Suspender' : 'Activar'}
</button>
</div>
</article>
);
}
Nota cómo no fue necesario crear un archivo UserCard.module.css con nombres de clases inventados (.card-footer-action-button-active). La tarjeta describe con precisión matemática su geometría, sus colores en modo claro y oscuro, y sus estados interactivos directamente en el elemento JSX.
2. Configuración en Next.js
Al inicializar un proyecto moderno de Next.js mediante el comando oficial npx create-next-app@latest, el entorno se configura automáticamente con Tailwind CSS v4 y Next.js 16 (App Router). En versiones anteriores (Tailwind v3), la configuración requería mantener un archivo tailwind.config.js con rutas content para que el escáner detectara las clases, además de configurar plugins en arreglos de JavaScript.
En Tailwind CSS v4, la arquitectura se simplificó radicalmente con el motor Oxide (construido en Rust y Lightning CSS):
- Configuración CSS-First: Ya no existe
tailwind.config.js. Todo se configura directamente en la hoja de estilos principal (src/app/globals.cssoapp/globals.css). - Detección Automática de Fuentes: Tailwind v4 detecta automáticamente todos los archivos de plantilla y componentes (
.tsx,.jsx,.ts,.html) sin necesidad de especificar un arraycontent. - Integración con PostCSS: Se conecta mediante el paquete oficial
@tailwindcss/postcss.
Observemos la configuración estándar en el archivo de estilos globales:
@import "tailwindcss";
Y su respectivo archivo de configuración de PostCSS en la raíz del proyecto:
const config = {
plugins: {
"@tailwindcss/postcss": {},
},
};
export default config;
En Tailwind v3 se utilizaban tres directivas separadas: @tailwind base;, @tailwind components; y @tailwind utilities;. En Tailwind v4, estas directivas fueron reemplazadas por una única sentencia estándar de CSS: @import "tailwindcss";.
3. Espaciado
El espaciado en Tailwind se controla mediante clases de margin y padding. Tailwind usa una escala numérica donde cada número representa un múltiplo de 0.25rem (4px).
Margin
El margin controla el espacio exterior alrededor de un elemento. Se puede aplicar en todas las direcciones:
m-{tamaño}: margin en todas direccionesmx-{tamaño}: margin horizontal (izquierda y derecha)my-{tamaño}: margin vertical (arriba y abajo)mt-{tamaño},mr-{tamaño},mb-{tamaño},ml-{tamaño}: margin específico por lado
Ejemplo:
m-4: margin de 1rem (16px) en todos lados
mx-8 my-2: margin horizontal de 2rem, vertical de 0.5rem
mt-6: margin-top de 1.5rem (24px)
Padding
El padding controla el espacio interior de un elemento (entre el contenido y el borde). Usa la misma nomenclatura que margin:
p-{tamaño}: padding en todas direccionespx-{tamaño}: padding horizontalpy-{tamaño}: padding verticalpt-{tamaño},pr-{tamaño},pb-{tamaño},pl-{tamaño}: padding específico por lado
Ejemplo:
p-2: padding de 0.5rem (8px) en todos lados
px-8 py-4: padding horizontal de 2rem, vertical de 1rem
pt-6 pb-2: padding-top de 1.5rem, padding-bottom de 0.5rem
4. Dimensiones
Las dimensiones en Tailwind te permiten controlar el ancho y alto de los elementos. Tailwind ofrece clases utilitarias para tamaños fijos, porcentajes, y tamaños especiales como viewport.
Width (Ancho)
El width controla el ancho de un elemento. Tailwind ofrece diferentes opciones:
w-{número}: ancho en escala de Tailwind (w-4 = 1rem, w-64 = 16rem)w-{fracción}: ancho en porcentajes (w-1/2 = 50%, w-1/3 = 33.33%, w-full = 100%)w-screen: ancho del viewport (100vw)w-auto: ancho automático según el contenido
Ejemplo:
w-full: ancho del 100% del contenedor
w-1/2: ancho del 50% del contenedor
w-64: ancho fijo de 16rem (256px)
w-auto: ancho según contenido
Height (Altura)
El height controla la altura de un elemento. Similar al width, ofrece múltiples opciones:
h-{número}: altura en escala de Tailwind (h-4 = 1rem, h-64 = 16rem)h-full: altura del 100% del contenedorh-screen: altura del viewport (100vh)h-auto: altura automática según el contenido
Ejemplo:
h-full: 100% de altura
h-32: altura de 8rem (128px)
h-16: altura de 4rem (64px)
h-auto
Size (Ancho y Altura simultáneos)
La clase size-{tamaño} establece el mismo valor para width y height, útil para elementos cuadrados:
size-16: width y height de 4rem (64px)size-32: width y height de 8rem (128px)
Ejemplo:
size-16
size-24
size-32
Min/Max Width y Height
Tailwind permite establecer límites mínimos y máximos para las dimensiones:
min-w-{tamaño}: ancho mínimomax-w-{tamaño}: ancho máximo (max-w-md = 28rem, max-w-lg = 32rem, max-w-xl = 36rem)min-h-{tamaño}: altura mínimamax-h-{tamaño}: altura máxima
Ejemplo:
max-w-md: ancho máximo de 28rem (448px). Este texto tiene un límite de ancho sin importar el tamaño del contenedor.
min-h-32: altura mínima de 8rem (128px)
max-h-20: altura máxima de 5rem (80px). Si el contenido es muy largo, aparecerá scroll. Este es un ejemplo de texto largo que excede la altura máxima establecida para demostrar el comportamiento.
5. Tipografía
La tipografía en Tailwind te permite controlar el aspecto visual del texto mediante clases utilitarias. Puedes modificar el tamaño, peso, alineación, color, y más propiedades de tus textos.
Font Size (Tamaño de fuente)
El tamaño de fuente controla qué tan grande o pequeño es el texto. Tailwind ofrece una escala predefinida:
text-xs: extra pequeño (0.75rem / 12px)text-sm: pequeño (0.875rem / 14px)text-base: base (1rem / 16px)text-lg: grande (1.125rem / 18px)text-xl: extra grande (1.25rem / 20px)text-2xlatext-9xl: tamaños progresivamente más grandes
Ejemplo:
text-xs: Texto extra pequeño (12px)
text-sm: Texto pequeño (14px)
text-base: Texto base (16px)
text-lg: Texto grande (18px)
text-xl: Texto extra grande (20px)
text-2xl: Texto 2XL (24px)
text-3xl: Texto 3XL (30px)
Font Weight (Peso de fuente)
El peso de fuente controla qué tan gruesa o delgada se ve la tipografía:
font-thin: peso 100font-light: peso 300font-normal: peso 400font-medium: peso 500font-semibold: peso 600font-bold: peso 700font-extrabold: peso 800font-black: peso 900
Ejemplo:
font-thin: Texto muy delgado (100)
font-light: Texto ligero (300)
font-normal: Texto normal (400)
font-medium: Texto medio (500)
font-semibold: Texto semi-negrita (600)
font-bold: Texto en negrita (700)
font-extrabold: Texto extra negrita (800)
font-black: Texto negro (900)
Text Align (Alineación de texto)
La alineación de texto controla cómo se distribuye el texto horizontalmente:
text-left: alineado a la izquierdatext-center: centradotext-right: alineado a la derechatext-justify: justificado
Ejemplo:
text-left: Este texto está alineado a la izquierda
text-center: Este texto está centrado
text-right: Este texto está alineado a la derecha
text-justify: Este texto está justificado, lo que significa que se distribuye uniformemente entre los márgenes izquierdo y derecho.
Text Color (Color de texto)
Tailwind ofrece una amplia paleta de colores para el texto:
text-{color}-{intensidad}: ejemplotext-blue-500,text-red-600- Colores disponibles: gray, red, yellow, green, blue, indigo, purple, pink, etc.
- Intensidades: de 50 (más claro) a 950 (más oscuro)
Ejemplo:
text-red-500: Texto en rojo
text-blue-500: Texto en azul
text-green-500: Texto en verde
text-purple-500: Texto en púrpura
text-amber-500: Texto en ámbar
text-gray-500: Texto en gris
Text Decoration y Transform
Tailwind también ofrece clases para decoración y transformación de texto:
underline: subrayadoline-through: tachadouppercase: mayúsculaslowercase: minúsculascapitalize: primera letra en mayúscula
Ejemplo:
underline: Este texto está subrayado
line-through: Este texto está tachado
uppercase: este texto está en mayúsculas
lowercase: ESTE TEXTO ESTÁ EN MINÚSCULAS
capitalize: cada palabra inicia con mayúscula
Line Height (Altura de línea)
La altura de línea controla el espaciado vertical entre líneas de texto:
leading-none: sin espacio adicionalleading-tight: espaciado reducidoleading-normal: espaciado normalleading-relaxed: espaciado relajadoleading-loose: espaciado amplio
Ejemplo:
leading-none: Esta es una línea de texto con altura de línea sin espacio adicional. Nota cómo las líneas están muy juntas.
leading-normal: Esta es una línea de texto con altura de línea normal. Es el espaciado estándar y cómodo para leer.
leading-loose: Esta es una línea de texto con altura de línea amplia. Hay mucho espacio entre las líneas.
6. Colores
Los colores en Tailwind son fundamentales para dar vida a tus diseños. Tailwind ofrece una paleta extensa de colores con diferentes intensidades que puedes aplicar a fondos, textos, bordes y más.
Background Color (Color de fondo)
El color de fondo se aplica con la clase bg-{color}-{intensidad}:
- Colores disponibles: slate, gray, red, orange, yellow, green, blue, indigo, purple, pink, etc.
- Intensidades: 50 (muy claro) hasta 950 (muy oscuro)
- Ejemplos:
bg-blue-500,bg-red-600,bg-green-400
Ejemplo:
bg-red-500: Fondo rojo
bg-blue-500: Fondo azul
bg-green-500: Fondo verde
bg-purple-500: Fondo púrpura
bg-amber-500: Fondo ámbar
bg-pink-500: Fondo rosa
Intensidades de color
Cada color tiene diferentes intensidades que van del 50 al 950. Mientras mayor sea el número, más oscuro es el color:
Ejemplo:
bg-blue-50: Azul muy claro
bg-blue-100: Azul claro
bg-blue-300: Azul medio claro
bg-blue-500: Azul base
bg-blue-600: Azul medio oscuro
bg-blue-800: Azul oscuro
bg-blue-900: Azul muy oscuro
Border Color (Color de borde)
Los bordes también pueden tener color usando border-{color}-{intensidad}. Recuerda que necesitas definir el ancho del borde primero:
border: borde de 1pxborder-2: borde de 2pxborder-4: borde de 4pxborder-8: borde de 8px
Ejemplo:
border-2 border-red-500: Borde rojo
border-4 border-blue-500: Borde azul de 4px
border-8 border-green-500: Borde verde grueso de 8px
border-2 border-purple-500 border-dashed: Borde púrpura punteado
Opacity (Opacidad)
Puedes controlar la opacidad de colores de fondo, texto y bordes usando el modificador de opacidad:
bg-{color}-{intensidad}/{opacidad}: ejemplobg-blue-500/50(50% de opacidad)- Opacidades comunes: 25, 50, 75, 100
Ejemplo:
bg-blue-500/100: Opacidad 100% (completamente opaco)
bg-blue-500/75: Opacidad 75%
bg-blue-500/50: Opacidad 50%
bg-blue-500/25: Opacidad 25% (muy transparente)
Gradientes
En Tailwind CSS v4, las utilidades de gradientes lineales se renombraron de bg-gradient-to-* a bg-linear-to-* (bg-linear-to-r, bg-linear-to-b, bg-linear-to-br, etc.) para converger con la especificación estándar de CSS (linear-gradient). La sintaxis previa de v3 sigue siendo común en proyectos existentes, pero en proyectos modernos como el del curso se utiliza bg-linear-to-*.
Tailwind permite crear gradientes lineales de forma intuitiva combinando la dirección con los puntos de parada de color:
bg-linear-to-r: gradiente lineal de izquierda a derechabg-linear-to-b: gradiente lineal de arriba hacia abajobg-linear-to-br: gradiente lineal hacia la esquina inferior derechafrom-{color}: color inicialto-{color}: color finalvia-{color}: color intermedio (opcional)
Ejemplo:
bg-linear-to-r from-blue-500 to-purple-500 (v3: bg-gradient-to-r)
bg-linear-to-b from-red-500 to-amber-500 (v3: bg-gradient-to-b)
bg-linear-to-r from-green-500 via-blue-500 to-purple-500
bg-linear-to-br from-pink-500 to-purple-500
7. Flexbox
Flexbox y Grid son sistemas de diseño fundamentales en CSS que Tailwind hace muy fáciles de usar. Te permiten crear layouts complejos y responsivos de manera eficiente. Flexbox es ideal para organizar elementos en una dirección (horizontal o vertical) y controlar cómo se distribuyen y alinean.
Flex Direction (Dirección del flex)
La dirección del flex controla si los elementos se alinean horizontal o verticalmente:
flex-row: elementos en fila (horizontal, por defecto)flex-col: elementos en columna (vertical)flex-row-reverse: fila inversaflex-col-reverse: columna inversa
Ejemplo:
flex-row:
1
2
3
flex-col:
1
2
3
Justify Content (Justificación horizontal)
Controla cómo se distribuyen los elementos en el eje principal:
justify-start: al iniciojustify-center: centradojustify-end: al finaljustify-between: espacio entre elementosjustify-around: espacio alrededor de elementos
Ejemplo:
justify-start:
A
B
C
justify-center:
A
B
C
justify-between:
A
B
C
Align Items (Alineación vertical)
Controla cómo se alinean los elementos en el eje cruzado:
items-start: al inicioitems-center: centradoitems-end: al finalitems-stretch: estirado (por defecto)
Ejemplo:
items-start:
A
B
C
items-center:
A
B
C
Gap (Espacio entre elementos)
El gap crea espacio entre elementos flex sin necesidad de margins:
gap-{tamaño}: espacio en todas direccionesgap-x-{tamaño}: espacio horizontalgap-y-{tamaño}: espacio vertical
Ejemplo:
gap-2 (8px):
1
2
3
gap-8 (32px):
1
2
3
8. Grid
Grid es perfecto para crear layouts bidimensionales complejos con filas y columnas.
Grid Columns (Columnas)
Define cuántas columnas tendrá tu grid:
grid-cols-{número}: número de columnas (grid-cols-2, grid-cols-3, grid-cols-4, etc.)grid-cols-12: sistema de 12 columnas (como Bootstrap)
Ejemplo:
grid-cols-2:
1
2
3
4
grid-cols-3:
1
2
3
4
5
6
Grid Rows (Filas)
Define cuántas filas tendrá tu grid:
grid-rows-{número}: número de filas (grid-rows-2, grid-rows-3, etc.)
Ejemplo:
grid-rows-3:
1
2
3
4
5
6
Col Span (Expansión de columnas)
Permite que un elemento ocupe múltiples columnas:
col-span-{número}: expande el elemento a través de N columnascol-span-full: ocupa todas las columnas disponibles
Ejemplo:
grid-cols-3 con col-span:
col-span-3 (ocupa 3 columnas)
col-span-2
1
1
col-span-2
Grid Gap
Similar a Flexbox, Grid también usa gap para espaciar elementos:
gap-{tamaño}: espacio entre filas y columnas
Ejemplo:
gap-2 (8px):
1
2
3
gap-6 (24px):
1
2
3
9. Posicionamiento
El posicionamiento en Tailwind controla cómo se ubica un elemento en la página. Esto es fundamental para crear layouts complejos, modales, menús flotantes, y más.
Position Types (Tipos de posición)
Tailwind ofrece diferentes tipos de posicionamiento:
static: posición normal (por defecto)relative: posición relativa a su posición originalabsolute: posición absoluta respecto al contenedor padre posicionadofixed: posición fija respecto al viewportsticky: mezcla entre relative y fixed
Ejemplo:
relative:
relative top-10 left-10: Desplazado 10px desde su posición original
absolute:
absolute top-10 right-10
absolute bottom-10 left-10
Positioning Values (Valores de posición)
Puedes controlar exactamente dónde se posiciona un elemento:
top-{tamaño},right-{tamaño},bottom-{tamaño},left-{tamaño}inset-{tamaño}: aplica el mismo valor a todos los lados- Valores comunes: 0, 1, 2, 4, 8, 16, etc. (en múltiplos de 0.25rem)
Ejemplo:
top-0 left-0
top-0 right-0
Centrado
bottom-0 left-0
bottom-0 right-0
Z-Index (Índice de apilamiento)
El z-index controla qué elementos aparecen encima de otros:
z-0: índice 0z-10,z-20,z-30,z-40,z-50: índices predefinidos- Mayor número = más arriba en el apilamiento
Ejemplo:
z-10 (arriba)
z-20 (más arriba)
z-30 (encima)
10. Estados y pseudo-clases
Los estados y pseudo-clases en Tailwind permiten aplicar estilos cuando el usuario interactúa con elementos o cuando se cumplen ciertas condiciones.
Hover (Pasar el mouse)
El estado hover aplica estilos cuando el cursor está sobre un elemento:
- Sintaxis:
hover:{clase} - Ejemplo:
hover:bg-blue-500,hover:text-white
Ejemplo:
Pasa el mouse sobre los botones:
Focus (Enfoque en inputs)
El estado focus se aplica cuando un input o elemento interactivo está enfocado:
- Sintaxis:
focus:{clase} - Ejemplo:
focus:border-blue-500,focus:ring-2
Ejemplo:
Haz clic en los inputs para ver el efecto:
Active (Al hacer clic)
El estado active se aplica cuando estás haciendo clic en un elemento:
- Sintaxis:
active:{clase} - Ejemplo:
active:bg-blue-700,active:scale-95
Ejemplo:
Haz clic y mantén presionado:
Disabled (Deshabilitado)
El estado disabled aplica estilos a elementos deshabilitados:
- Sintaxis:
disabled:{clase} - Ejemplo:
disabled:opacity-50,disabled:cursor-not-allowed
Ejemplo:
Botones con estado disabled:
Group Hover (Hover en grupo)
Group hover aplica estilos a un elemento cuando se hace hover sobre su contenedor padre:
- Sintaxis: Aplicar
groupal padre ygroup-hover:{clase}al hijo - Útil para cards y componentes complejos
Ejemplo:
Pasa el mouse sobre las cards:
Card 1
group-hover en el título
Card 2
group-hover con transform
11. Personalización
Tailwind CSS permite personalizar valores más allá de su escala predefinida usando valores arbitrarios. Esto te da la flexibilidad de usar valores exactos cuando los necesites, sin salir del sistema de utilidades de Tailwind.
Valores Arbitrarios
Los valores arbitrarios te permiten especificar valores personalizados para cualquier clase de Tailwind usando corchetes [].
6. Colores, Bordes, Opacidad y Gradientes Personalizados
Puedes usar cualquier color en formato hexadecimal, RGB, HSL, o incluso nombres de color CSS:
bg-[#1da1f2]: color de fondo personalizadotext-[rgb(255,0,0)]: color de texto en RGBborder-[#ff6347]: color de borde personalizado
Ejemplo:
bg-[#1da1f2]: Color azul Twitter personalizado
bg-[#ff6b6b]: Color rojo coral personalizado
border-[#fdcb6e] border-[3px]: Borde amarillo personalizado
text-[rgb(255,107,107)]: Texto en formato RGB
Tamaños Personalizados
Puedes especificar dimensiones exactas en px, rem, em, %, vw, vh, etc.:
w-[347px]: ancho de 347 píxelesh-[32rem]: altura de 32remtext-[22px]: tamaño de fuente de 22pxp-[18px]: padding de 18px
Ejemplo:
w-[347px] h-[100px]: Ancho de 347px exacto
w-[75%] p-[18px]: Ancho del 75% con padding personalizado
text-[22px]: Tamaño de fuente exacto de 22 píxeles
3. Espaciado: Margin y Padding Personalizado
Crea espaciados exactos para margin y padding:
m-[13px]: margin de 13pxp-[2.5rem]: padding de 2.5remgap-[25px]: gap de 25px entre elementos
Ejemplo:
p-[13px] mb-[25px]: Padding personalizado de 13px
gap-[25px]
gap-[25px]
gap-[25px]
Border Radius Personalizado
Define radios de borde exactos:
rounded-[12px]: border radius de 12pxrounded-[50%]: círculo perfecto
Ejemplo:
rounded-[12px]
rounded-[25px]
rounded-[50%]
Sombras Personalizadas
En Tailwind CSS v4, la escala de sombras y bordes fue reajustada para mayor consistencia:
- La clase base
shadowde v3 ahora se llamashadow-sm, mientras que el antiguoshadow-smse convirtió enshadow-xs. - La escala moderna incluye
shadow-2xs,shadow-xs,shadow-sm,shadow-md,shadow-lg,shadow-xlyshadow-2xl. - Para radios de borde ocurre lo mismo: el antiguo
rounded-smes ahorarounded-xs, yroundedequivale arounded-sm.
Crea efectos de sombra personalizados:
shadow-[0_4px_6px_rgba(0,0,0,0.1)]: sombra personalizada
Ejemplo:
shadow-[0_4px_6px_rgba(0,0,0,0.1)]: Sombra suave
shadow-[0_10px_30px_rgba(59,130,246,0.3)]: Sombra azul
shadow-[0_20px_50px_rgba(0,0,0,0.2)]: Sombra pronunciada
Font Weight y Line Height Personalizados
Especifica pesos de fuente y alturas de línea exactos:
font-[450]: peso de fuente personalizadoleading-[1.75]: altura de línea específica
Ejemplo:
font-[350]: Peso de fuente 350 (entre light y normal)
font-[550]: Peso de fuente 550 (entre medium y semibold)
font-[650]: Peso de fuente 650 personalizado
leading-[1.75]: Esta línea tiene una altura de línea de 1.75, lo que proporciona un espaciado cómodo para lectura. Puedes notar cómo el texto respira mejor con este espaciado personalizado.
Grid Template Columns/Rows Personalizado
Define estructuras de grid completamente personalizadas:
grid-cols-[200px_1fr_2fr]: columnas con tamaños específicosgrid-rows-[100px_auto_100px]: filas personalizadas
Ejemplo:
grid-cols-[200px_1fr_2fr]:
200px
1fr
2fr
grid-cols-[100px_auto_100px]:
100px
auto (se expande)
100px
Transformaciones Personalizadas
Aplica transformaciones CSS personalizadas:
rotate-[17deg]: rotación personalizadascale-[1.15]: escala específicatranslate-x-[13px]: traslación exacta
Ejemplo:
rotate-[17deg]
scale-[1.25]
-translate-y-[15px]
Combinando Valores Arbitrarios
Puedes combinar múltiples valores arbitrarios para crear diseños únicos:
Ejemplo:
Card personalizada con:
- bg-[#1da1f2]
- p-[24px]
- rounded-[15px]
- text-[19px]
- font-[550]
- shadow-[0_8px_20px_rgba(29,161,242,0.3)]
Gradiente personalizado con sombra y bordes redondeados
bg-[linear-gradient(135deg,#667eea_0%,#764ba2_100%)]
Propiedades CSS Arbitrarias
Tailwind también permite usar propiedades CSS completamente personalizadas con la sintaxis de corchetes:
[clip-path:circle(50%)]: aplica cualquier propiedad CSS[backdrop-filter:blur(10px)]: efectos de fondo
Ejemplo:
clip-path: circle
clip-path: polygon
Configuración de Tokens con la Directiva @theme (Tailwind v4)
En versiones anteriores de Tailwind (v3), la personalización de temas requería un archivo JavaScript tailwind.config.js con un objeto theme.extend. En Tailwind CSS v4, la configuración es 100% nativa en CSS mediante la directiva @theme. Esto elimina la necesidad de archivos de configuración externos, mejora los tiempos de compilación gracias al motor Oxide y expone automáticamente los tokens como variables CSS nativas.
Puedes definir colores de marca, fuentes y nuevos breakpoints directamente en app/globals.css:
@import "tailwindcss";
/* Definición de tokens de diseño del proyecto */
@theme {
/* Nuevos colores semánticos accesibles como bg-brand-primary, text-brand-primary */
--color-brand-primary: #2563eb;
--color-brand-secondary: #0d9488;
--color-brand-accent: #f59e0b;
--color-surface-card: #f8fafc;
/* Tipografías personalizadas */
--font-display: "Inter", system-ui, sans-serif;
/* Breakpoint personalizado para monitores ultra-anchos */
--breakpoint-3xl: 1920px;
}
Al declarar --color-brand-primary, Tailwind genera automáticamente toda la familia de utilidades correspondientes: bg-brand-primary, text-brand-primary, border-brand-primary, ring-brand-primary y variantes de opacidad como bg-brand-primary/80.
12. Breakpoints y responsive
El diseño responsivo en Tailwind CSS está fundamentado en la filosofía Mobile-First (móvil primero). Esto significa que cualquier clase aplicada sin prefijo de breakpoint se aplica a todos los dispositivos, comenzando desde la pantalla más pequeña (0px en adelante). Los prefijos (sm:, md:, lg:, xl:, 2xl:) representan puntos de quiebre donde se aplican mejoras progresivas mediante reglas @media (min-width: ...).
Breakpoints Predefinidos del Sistema
Tailwind CSS v4 incluye cinco breakpoints predefinidos estándar:
| Prefijo | Tamaño Mínimo (min-width) | Tipo de Dispositivo Típico | Consulta CSS Generada |
|---|---|---|---|
| (sin prefijo) | 0px | Teléfonos móviles en vertical | Regla base general |
sm: | 640px | Teléfonos grandes / Tablets en vertical | @media (min-width: 640px) |
md: | 768px | Tablets en horizontal / Laptops compactas | @media (min-width: 768px) |
lg: | 1024px | Laptops estándar y pantallas de escritorio | @media (min-width: 1024px) |
xl: | 1280px | Monitores de escritorio amplios | @media (min-width: 1280px) |
2xl: | 1536px | Monitores de alta resolución y gran formato | @media (min-width: 1536px) |
Cómo se aplican los breakpoints
Toma grid-cols-1 md:grid-cols-2 lg:grid-cols-3. Cada clase aplica desde su ancho en adelante, y cuando dos chocan gana la de prefijo mayor. Arriba ves desde dónde aplica cada una; abajo, qué columnas ve cada pantalla:
Desglose Técnico del Diagrama
- Base Móvil (
0px+): Establece la estructura mínima indispensable. Por ejemplo, una sola columna (grid-cols-1), ancho completo (w-full) y tamaños de fuente compactos (text-sm). - Activación Progresiva (
min-width): A diferencia de los enfoques desktop-first antiguos que usabanmax-widthpara ocultar o encoger elementos, el enfoque mobile-first añade complejidad gradualmente. - Sobreescritura Específica: Si declaras
text-sm md:text-base lg:text-lg, un móvil de 390px leerátext-sm; una tablet de 800px aplicarátext-base; y un monitor de 1440px aplicarátext-lg.
Un error muy común al comenzar con Tailwind es escribir sm:grid-cols-1 md:grid-cols-2. El prefijo sm: para una columna es redundante y dañino: en pantallas móviles menores a 640px el elemento quedaría sin regla de columna definida. Lo correcto es escribir grid-cols-1 md:grid-cols-2, dejando la regla base sin prefijo.
Ejemplo de Implementación: Directorio Responsivo de Usuarios
Veamos cómo construir una cuadrícula completa de perfiles de usuario que se adapta fluidamente desde un teléfono móvil hasta un monitor de escritorio:
// Cuadrícula responsiva que escala de 1 columna (móvil) a 4 columnas (pantalla grande)
import { UserCard } from './UserCard';
interface UserItem {
id: string;
name: string;
role: string;
email: string;
isActive: boolean;
}
interface UserGridProps {
users: UserItem[];
onToggleStatus: (id: string) => void;
}
export function UserGrid({ users, onToggleStatus }: UserGridProps) {
return (
<section className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Encabezado con disposición responsiva: columna en móvil, fila en tablet/desktop */}
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-8">
<div>
<h2 className="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white tracking-tight">
Directorio de Usuarios
</h2>
<p className="text-sm sm:text-base text-gray-500 dark:text-gray-400 mt-1">
Gestiona los miembros registrados en la plataforma y supervisa sus roles
</p>
</div>
{/* Acciones: ancho completo en móvil, auto en escritorio */}
<div className="flex items-center gap-3 w-full md:w-auto">
<button className="w-full md:w-auto px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-xl shadow-sm transition-colors cursor-pointer">
Nuevo Usuario
</button>
</div>
</div>
{/* Cuadrícula responsiva adaptativa:
- Móvil (< 768px): 1 columna (grid-cols-1)
- Tablet (≥ 768px): 2 columnas (md:grid-cols-2)
- Laptop (≥ 1024px): 3 columnas (lg:grid-cols-3)
- Escritorio Amplio (≥ 1280px): 4 columnas (xl:grid-cols-4)
*/}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
{users.map((user) => (
<UserCard
key={user.id}
id={user.id}
name={user.name}
role={user.role}
email={user.email}
isActive={user.isActive}
onToggleStatus={onToggleStatus}
/>
))}
</div>
</section>
);
}
En el siguiente documento exploraremos daisyUI 5, una librería de componentes semánticos construida sobre Tailwind que nos permitirá acelerar aún más el desarrollo con botones, tarjetas, formularios y sistemas de temas listos para usar.