Tailwind CSS — Guía de referencia
Recetario de utilidades y patrones implementados en este repositorio (Tailwind CSS v4).
Abre cualquier HTML en src/ con Live Server. El CSS compilado está en dist/output.css.
1. Configuración (src/styles.css)
| Feature |
Sintaxis / uso |
| Import Tailwind v4 |
@import "tailwindcss" |
| Variante dark custom |
@custom-variant dark (&:where(.dark, .dark *)) |
| Tokens de color |
@theme { --color-gold-50 … --color-gold-950 } (OKLCH) |
| Fuente custom |
@theme { --font-montserrat-alternates: '…' } → font-montserrat-alternates |
| Estilos base |
@layer base { body, h1, button } + @apply |
| Componentes |
@layer components { .link, .form-control } |
2. Pseudo-clases estructurales
| Clase |
Uso en el repo |
first:mt-4 |
Primer <li> de lista |
last:mb-4 |
Último <li> de lista |
odd:bg-white even:bg-gray-50 |
Filas de tabla (zebra) |
odd:bg-gray-900/50 even:bg-gray-950 |
Zebra en dark |
| Clase |
Efecto |
list-decimal |
Numeración |
list-inside |
Marcador dentro del bloque |
| Clase |
Efecto |
overflow-x-auto |
Scroll horizontal en móvil |
w-full min-w-max |
Ancho tabla |
border-separate border-spacing-1 |
Separación entre celdas |
hidden md:table-header-group |
Ocultar <thead> en móvil |
flex flex-col … md:table-row |
Filas como cards en móvil, tabla en md+ |
w-12 h-12 rounded-full |
Avatar circular |
5. Formularios — estados del input
| Clase |
Cuándo aplica |
focus:border-sky-500 |
Foco |
invalid:border-pink-500 invalid:text-pink-500 |
:invalid |
focus:invalid:border-pink-500 |
Foco + inválido |
disabled:bg-gray-300/10 disabled:text-gray-500 |
Deshabilitado |
placeholder:text-sm placeholder:italic |
Placeholder |
outline-none |
Sin outline nativo |
transition-colors |
Transición de borde/color |
Componente reutilizable: .form-control (agrupa lo anterior).
6. peer — estilo según hermano anterior
| Patrón |
Ejemplo en el repo |
peer en el input |
Email, password, checkboxes |
peer-invalid:visible |
Mensaje de error al lado del input |
peer-checked:line-through |
Texto tachado si checkbox marcado |
peer-has-checked:block |
Icono visible si el peer está checked |
peer-checked:border-white peer-checked:bg-white |
Radio custom (círculo interior) |
Peers con nombre (varios en el mismo contenedor)
<input class="peer/draft" />
<div class="peer-checked/draft:block">…</div>
<input class="peer/published" />
<div class="peer-checked/published:block">…</div>
| Clase |
Efecto |
has-checked:bg-indigo-500/50 |
<label> cambia si tiene un hijo :checked |
has-checked:text-indigo-100 |
Texto cuando hay radio/check marcado |
Útil cuando el estado vive en un hijo y quieres pintar el padre (label).
8. group — estilo según estado del padre
| Clase |
Efecto |
group |
Marca el contenedor padre |
group-hover:bg-sky-400 |
Hijo/padre al hover del grupo |
group-hover:text-sky-800 |
Color de texto/enlace al hover |
group-has-[a]:text-sky-400 |
Si el grupo contiene un <a> |
group-has-[a]:block |
Mostrar texto solo si hay enlace |
hidden group-has-[a]:block |
Ocultar hasta que exista <a> |
| Clase |
Efecto |
group/item |
Grupo del <li> |
group-hover/item:visible |
Botón "Call" visible al hover del item |
group/call |
Grupo del enlace Call |
group-hover/call:text-gray-200 |
Hover solo del enlace, no del item entero |
group-hover/call:translate-x-0.5 |
Flecha se desplaza |
9. Grupos implícitos (Tailwind v4) — in-*
| Clásico (v3+) |
Implícito (v4) |
Padre: group focus:ring-2 |
Padre: solo focus:ring-2 |
Hijo: group-focus:opacity-100 |
Hijo: in-focus:opacity-100 |
No hace falta group en el padre si usas in-focus:, in-hover:, etc.
| Clase / JS |
Uso |
dark:odd:bg-gray-900/50 |
Variante en filas |
dark:border-slate-700 dark:bg-slate-800 |
Tarjetas |
dark:hidden / hidden dark:block |
Mostrar texto según tema |
document.documentElement.classList.toggle('dark') |
Toggle manual |
localStorage.theme |
Persistencia |
prefers-color-scheme: dark |
Fallback inicial |
Requiere clase .dark en <html> (definida con @custom-variant).
11. Breakpoints responsivos
| Prefijo |
Típico en el repo |
sm: |
2 columnas grid, color de fondo |
md: |
Tabla real, 3 columnas |
lg: |
4 columnas |
xl: |
5 columnas, color naranja |
2xl: |
6 columnas, color rojo |
Grid responsivo (patrón repetido)
grid grid-cols-1 gap-6
sm:grid-cols-2
md:grid-cols-3
lg:grid-cols-4
xl:grid-cols-5
2xl:grid-cols-6
Fondos por breakpoint (demo)
sm:bg-purple-500 md:bg-blue-500 lg:bg-sky-500 xl:bg-orange-500 2xl:bg-red-500
12. Colores custom (gold)
Definidos en @theme → usados como utilidades normales:
| Tipo |
Ejemplos |
| Texto |
text-gold-50 … text-gold-950 |
| Fondo |
bg-gold-500 |
| Iconos |
text-gold-500 en SVG |
| Clase |
Peso |
font-montserrat-alternates |
Familia del @theme |
font-thin |
100 |
font-light |
300 |
font-normal |
400 |
font-bold |
700 |
14. Utilidades de layout / UI (recurrentes)
| Área |
Clases usadas |
| Flex |
flex, flex-col, flex-1, items-center, gap-2 gap-4 gap-6, justify-center, justify-end |
| Espaciado |
p-2 p-6 p-8, px-4 py-3, mt-10, mb-2, space-y-4 |
| Bordes |
rounded-md rounded-lg rounded-xl, border, border-gray-600 border-gray-700 |
| Sombras |
shadow-lg shadow-xl |
| Texto |
text-3xl text-xl, font-semibold font-bold, text-white, text-slate-400 |
| Opacidad |
opacity-30, bg-indigo-500/50 |
| Transiciones |
transition, transition-all, transition-colors, transition-opacity, duration-300, ease-in-out |
| Interacción |
cursor-pointer, hover:bg-sky-600, hover:text-blue-600 |
| Focus ring |
focus:ring-2, focus:ring-sky-500, focus:ring-offset-2, focus:ring-offset-slate-900, focus:outline-none |
| Visibilidad |
hidden, invisible, visible |
| Checkbox custom |
appearance-none, checked:after:content-['✓'], posicionamiento con after:absolute after:top-1/2 etc. |
| Grid util |
grid, grid-cols-2 |
| Necesitas… |
Usa |
| Estilar según primer/último/par/impar hijo |
first: last: odd: even: |
| Estilar hermano siguiente del input |
peer + peer-*: en el hermano |
| Varios peers en el mismo padre |
peer/nombre + peer-checked/nombre: |
| Estilar el padre si un hijo está checked |
has-checked: |
| Estilar hijos cuando el padre tiene hover/focus |
group + group-hover: / group-focus: |
| Varios grupos anidados |
group/nombre + group-hover/nombre: |
Sin clase group en el padre (v4) |
in-focus: in-hover: en hijos |
| Tema oscuro |
dark: + clase .dark en <html> |
| Colores/fuentes propios |
@theme → text-gold-500, font-montserrat-alternates |
| Archivo |
Tema Tailwind |
01-listas.html |
first: last: listas |
02-tablas.html |
Responsive, odd: even: dark: |
03-formularios.html |
Estados input, peer, .form-control |
04-has.html |
has-checked: |
05-grupos.html |
group, group-has-[a]: |
06-hermanos.html |
peer, peer-checked:, peer-has-checked: |
07-grupos-anidados.html |
group/item, group/call |
08-grupos-implicitos.html |
in-focus: vs group-focus: |
09-diferenciando-peers.html |
peer/draft, peer/published |
responsive.html |
Breakpoints, grid responsivo |
02-dark.html |
dark:, toggle manual |
03-variantes-color.html |
gold-* desde @theme |
04-fuente.html |
font-montserrat-alternates |
17. Orden sugerido de estudio
- Pseudo estructurales + listas
- Responsive +
odd/even + dark:
- Estados de formulario +
@apply
peerhas-*group / group-has-*group/nombre anidadoin-* (v4)peer/nombre@theme + breakpoints en grid
