¿Qué versión elegir? Qué no tendrás en la LTS

El curso usa Tailwind CSS 4.3, la última versión estable. Como referencia LTS se toma Tailwind CSS 3.4, la versión que npm etiqueta como v3-lts. Tailwind no publica una política LTS formal: esa etiqueta y la recomendación oficial de quedarse en 3.4 si se necesitan navegadores antiguos son lo que existe.

El motivo principal para elegir 3.4 son los navegadores: Tailwind 4 exige Safari 16.4, Chrome 111 o Firefox 128. Si eliges 3.4, casi todas las utilidades te sirven, pero la configuración es distinta y hay funciones que no tendrás. Esta página reúne todos esos apartados, con lo que tienes que hacer en su lugar.

Marca	Significado
🆕	No existe en la LTS (Tailwind 3.4)
🔄	Existe en la LTS, pero cambia: nombre, valor o comportamiento

⚠️ Importante: Hay clases con el mismo nombre y distinto resultado, como shadow-sm, ring o outline-none. No dan ningún error. El módulo 19 las recoge todas.

Resumen

El curso tiene 288 apartados que dependen de la versión, en 22 módulos.

Versión	🆕 Nuevo	🔄 Cambia
4.0	51	186
4.1	33	0
4.2	8	0
4.3	9	1

Detalle por módulo

00 - Introducción a Tailwind CSS

Apartado	Versión	Qué ocurre	Si usas la LTS
2. Tu primera página en dos minutos	🔄 4.0	En la LTS (Tailwind 3.4) el CDN de desarrollo tiene otra dirección.	Sustituye la etiqueta `<script>` por `<script src="https://cdn.tailwindcss.com"></script>`, que hoy sirve la 3.4.17; el resto del ejemplo funciona igual.
Qué genera una clase: v3 frente a v4	🔄 4.0	En la LTS (Tailwind 3.4) las clases generan valores directos, como `rgb(79 70 229)` o `0.5rem`, sin variables del tema, y v4 las genera con `var(--color-*)` y `oklch()`.	Las clases se escriben igual, pero si necesitas el valor de un color en tu CSS usa `theme('colors.indigo.600')`, porque las variables `--color-*` no existen.
Oxide: la reescritura de la v4	🔄 4.0	En la LTS (Tailwind 3.4) todo el procesado es JavaScript sobre PostCSS y la configuración vive en `tailwind.config.js`.	Instala `tailwindcss@v3-lts`, `postcss` y `autoprefixer`; las clases se escriben igual y solo cambia la forma de configurar y compilar, como explica el módulo 01.
Lo que se pierde en v3	🔄 4.0	En la LTS (Tailwind 3.4) no existen las funciones de la tabla de esta sección.	Usa la alternativa de la columna derecha, normalmente una propiedad arbitraria entre corchetes como `[text-shadow:...]`, o un plugin cuando se indique.
Los falsos amigos	🔄 4.0	En la LTS (Tailwind 3.4) varias clases con el mismo nombre tienen otro valor: `shadow-sm`, `rounded-sm`, `blur-sm` y `ring`, y `border` sin color es gris, no `currentColor`.	Sigue los valores de v3; en cada módulo se indica el equivalente, y al copiar código de una versión a otra revisa estas clases.
Ejemplo de novedad: sombra de texto con `text-shadow-*`	🆕 4.1	No disponible	Usa una propiedad arbitraria como `[text-shadow:0_2px_4px_rgb(0_0_0/0.5)]`, que produce el mismo efecto.
Ejemplo de cambio: la configuración con `@theme`	🔄 4.0	En la LTS (Tailwind 3.4) el tema se configura en `tailwind.config.js`.	Añade el valor en `theme.extend`, como en el segundo bloque de este apartado; la clase resultante, `bg-marca`, se usa igual.

01 - Instalación y entorno

Apartado	Versión	Qué ocurre	Si usas la LTS
Paso 2: instalar Tailwind	🆕 4.0	: el paquete `@tailwindcss/vite` es propio de v4.	Instala `tailwindcss@v3-lts`, `postcss` y `autoprefixer`, y conecta Tailwind con PostCSS como se explica en la sección 7.
Paso 3: crear la hoja de entrada	🔄 4.0	En la LTS (Tailwind 3.4) no se usa `@import "tailwindcss"`, sino tres directivas `@tailwind`.	Escribe `@tailwind base;`, `@tailwind components;` y `@tailwind utilities;` en tu hoja de entrada.
`@tailwindcss/cli`	🔄 4.0	En la LTS (Tailwind 3.4) la CLI viene dentro del paquete `tailwindcss` y se lanza con `npx tailwindcss`.	No instales `@tailwindcss/cli`; ejecuta `npx tailwindcss -i ./src/input.css -o ./dist/salida.css --watch`, con las mismas opciones `-i`, `-o`, `--watch` y `--minify`.
Opciones recientes	🆕 4.3	: `--silent` llegó en la 4.3.1, y el uso conjunto de `--watch --poll` se incorporó en la 4.3.3.	Para ocultar la salida redirígela con `> /dev/null`; la CLI de v3 tiene su propia opción `--poll` para vigilar por sondeo.
`@tailwindcss/postcss`	🔄 4.0	En la LTS (Tailwind 3.4) el plugin de PostCSS es el propio paquete `tailwindcss`, y hace falta `autoprefixer`.	Instala `tailwindcss@v3-lts postcss autoprefixer` y declara `tailwindcss: {}` y `autoprefixer: {}` en `postcss.config.js`.
`@tailwindcss/browser`	🆕 4.0	: este paquete es propio de v4.	Carga `<script src="https://cdn.tailwindcss.com"></script>`, que en v3 también es solo para desarrollo; en lugar de `@theme`, se personaliza con `tailwind.config = { ... }` en otro `<script>`.
Instalación con Vite en v3	🔄 4.0	En la LTS (Tailwind 3.4) hacen falta un fichero `tailwind.config.js`, la opción `content` y PostCSS.	Sigue esta sección completa en lugar de la sección 2; el resto del curso te indicará las diferencias en cada apartado marcado.
Detección automática	🔄 4.0	En la LTS (Tailwind 3.4) no hay detección automática: solo se leen los ficheros que indiques en `content`.	Declara en `tailwind.config.js` algo como `content: ['./index.html', './src/*/.{html,js}']`, y amplíalo cuando añadas carpetas.
Añadir rutas con `@source`	🔄 4.0	En la LTS (Tailwind 3.4) no existe `@source`.	Añade la ruta a la lista `content` de `tailwind.config.js`, por ejemplo `'./node_modules/kit-ui/*/.js'`.
Fijar la carpeta base con `source()`	🔄 4.0	En la LTS (Tailwind 3.4) no existe la función `source()`.	Las rutas de `content` son relativas a la carpeta desde la que lanzas la orden; para que lo sean al fichero de configuración, usa `content: { relative: true, files: ['./src/*/.html'] }`.
Desactivar la detección con `source(none)`	🔄 4.0	En la LTS (Tailwind 3.4) no existe `source(none)`, porque la lista `content` ya es explícita.	Tu lista `content` tiene exactamente ese efecto: solo se lee lo que aparece en ella.
Excluir rutas con `@source not`	🆕 4.1	No disponible	Añade la ruta negada a `content`, como en `content: ['./src/*/.html', '!./src/legado/**']`; lo hemos comprobado en 3.4.19 y excluye la carpeta.
Forzar clases con `@source inline`	🆕 4.1	No disponible	Usa `safelist` en `tailwind.config.js`, por ejemplo `safelist: ['underline', { pattern: /^bg-(emerald\\|amber\\|rose)-100$/, variants: ['hover'] }]`.
Cómo encuentra tu hoja en v4	🔄 4.0	En la LTS (Tailwind 3.4) la extensión busca el fichero `tailwind.config.js`.	No hace falta nada si ese fichero está en el proyecto; la opción `tailwindCSS.experimental.configFile` debe apuntar a él si tiene otro nombre o ubicación.
Por qué `tailwindStylesheet` es necesario	🔄 4.0	En la LTS (Tailwind 3.4) el plugin busca `tailwind.config.js` junto a la configuración de Prettier.	No pongas `tailwindStylesheet`; si el fichero tiene otra ubicación, indica `"tailwindConfig": "./ruta/tailwind.config.js"`.
Paso 4: ¿la regla existe, pero pierde?	🔄 4.0	En la LTS (Tailwind 3.4) `@layer` no produce capas nativas de CSS, así que decide la especificidad: `.con-capa a` también vence a `text-indigo-600`, y en 3.4.19 los dos enlaces de este ejemplo salen rojos.	Usa en tu CSS selectores de elemento o de una sola clase, o marca la utilidad como importante con `!text-indigo-600`.

02 - Fundamentos: utilidades y Preflight

Apartado	Versión	Qué ocurre	Si usas la LTS
4. Cómo se genera el CSS	🔄 4.0	En la LTS (Tailwind 3.4) hay que decirle al compilador dónde mirar.	Declara `content: ['./src/*/.{html,js}']` en `tailwind.config.js`; en v4 la detección es automática y solo se ajusta con `@source`.
5. Las capas `@layer`	🔄 4.0	En la LTS (Tailwind 3.4) `@layer` es una directiva de Tailwind que desaparece al compilar, y el orden depende de la posición en el fichero.	Escribe `@tailwind base; @tailwind components; @tailwind utilities;` y coloca tu CSS sin capa antes de esas líneas si quieres que las utilidades lo sobrescriban.
Diferencias con Preflight de v3	🔄 4.0	En la LTS (Tailwind 3.4) el borde es gris claro, el placeholder es gris 400 y los botones llevan `cursor: pointer`; v4 cambia los tres sin renombrar nada.	No tienes que hacer nada; al pasar a v4, indícalos con clases o en `@layer base`.
Desactivar Preflight	🔄 4.0	En la LTS (Tailwind 3.4) Preflight se desactiva en la configuración; en v4 `corePlugins` ya no existe y basta con no importarlo.	Añade `corePlugins: { preflight: false }` a `tailwind.config.js`.
7. Las variables del tema	🔄 4.0	En la LTS (Tailwind 3.4) el tema es un objeto JavaScript y no genera variables CSS.	Define los valores en `theme.extend` de `tailwind.config.js` y léelos en tu CSS con `theme(colors.red.500)`, que se sustituye por el valor al compilar.
8. La escala de espaciado: `--spacing`	🔄 4.0	En la LTS (Tailwind 3.4) la escala es una lista cerrada de valores en `rem`, escritos en el CSS final.	Para cambiarla, redefine `theme.spacing` o amplíala con `theme.extend.spacing` en `tailwind.config.js`; no puedes cambiarla en tiempo de ejecución.
9. Valores dinámicos	🆕 4.0	: cada valor debía estar en una lista, y `mt-17` no genera nada.	Escribe un valor arbitrario, como `mt-[4.25rem]`, o añade el valor en `theme.extend`.
Variables: `()` frente a `[]`	🔄 4.0	En la LTS (Tailwind 3.4) la forma corta para variables usa corchetes; en v4 usa paréntesis, y la antigua compila sin error, pero genera CSS no válido.	Escribe `bg-[--marca]`, que allí produce `var(--marca)`, donde v4 escribe `bg-(--marca)`.
Opacidad del color	🔄 4.0	En la LTS (Tailwind 3.4) el modificador genera `rgb(239 68 68 / 0.5)` y solo admite múltiplos de 5; v4 usa `color-mix()` y acepta cualquier número.	La clase se escribe igual, y para otro valor usa corchetes: `/37` pasa a ser `/[.37]`.
12. Forzar con `!`	🔄 4.0	En la LTS (Tailwind 3.4) el signo `!` va delante de la utilidad; en v4 va al final de la clase.	Escribe `!flex` y `hover:!flex`, porque allí `flex!` no se aplica y no da ningún error.
Marcar todo como importante	🔄 4.0	En la LTS (Tailwind 3.4) la opción está en la configuración; en v4 pasa a la importación.	Añade `important: true` a `tailwind.config.js`.
Dos clases para la misma propiedad	🔄 4.0	En la LTS (Tailwind 3.4) las clases rivales se ordenan como texto; en v4 los números se ordenan por valor, y `mt-2 mt-10` cambia de ganador sin aviso.	No dependas del orden; deja solo una de las dos clases y obtendrás lo mismo en las dos versiones.
Las variantes se apilan	🔄 4.0	En la LTS (Tailwind 3.4) las variantes apiladas se aplican de derecha a izquierda; en v4, de izquierda a derecha.	Invierte las combinaciones con selectores: escribe `first::pt-0` donde v4 escribe `:first:pt-0`.
14. Convivir con otro CSS: el prefijo	🔄 4.0	En la LTS (Tailwind 3.4) el prefijo va pegado a la utilidad; en v4 funciona como una variante al inicio de la clase.	Añade `prefix: 'tw-'` a `tailwind.config.js`; las clases son `tw-p-4` y `hover:tw-p-2`.

03 - Espaciado y tamaño

Apartado	Versión	Qué ocurre	Si usas la LTS
Multiplicadores libres	🔄 4.0	En la LTS (Tailwind 3.4) solo existen los valores de una lista cerrada, y `p-13` o `w-150` no generan CSS.	Usa un valor arbitrario como `p-[3.25rem]`, o añade el valor a `theme.extend.spacing` en `tailwind.config.js`.
Densidad local con `--spacing`	🔄 4.0	En la LTS (Tailwind 3.4) las utilidades llevan el valor escrito (`padding: 1.5rem`), así que no se puede reescalar una zona de la página.	No hay equivalente directo; define variantes a mano con clases distintas (`p-6` frente a `p-3`) para cada densidad.
`px-` y `py-` son lógicas	🔄 4.0	En la LTS (Tailwind 3.4), `px-4` genera `padding-left` y `padding-right`, y lo mismo ocurre con `py-`, `mx-` y `my-*`.	En escritura horizontal el resultado es idéntico; solo cambia en escritura vertical, donde debes usar `[padding-inline:1rem]` para el mismo efecto.
7. `space-*`: la opción antigua	🔄 4.0	En la LTS (Tailwind 3.4) el selector es `> :not([hidden]) ~ :not([hidden])` y pone el margen delante de cada hijo salvo el primero; en 4.x es `:where(> :not(:last-child))` y lo pone detrás.	Las clases son las mismas, pero el hijo oculto que da problemas es el primero, y los márgenes propios del hijo no se pueden cambiar. Lo más seguro en ambas versiones es usar `flex` y `gap-*`.
Fracciones libres	🔄 4.0	En la LTS (Tailwind 3.4) solo hay denominadores 2, 3, 4, 5, 6 y 12, y `w-7/13` no genera CSS.	Escribe un valor arbitrario como `w-[53.846%]` o `w-[calc(7/13*100%)]`.
Anchos con nombre	🆕 4.0	, donde esos nombres solo funcionan con `max-w-*`.	Convierte a la escala (`w-80` para `w-xs`, `w-96` para `w-sm`) o usa un valor arbitrario como `w-[28rem]` para `w-md`.
`h-lh`, `min-h-lh` y `max-h-lh`: una línea de texto	🆕 4.2	No disponible	Escribe un valor arbitrario como `h-[1lh]`, que genera lo mismo.
`size-dvh` y compañía	🆕 4.0	, ni tampoco `w-dvh` o `h-dvw`.	Escribe `size-[100dvh]`, `w-[100dvh]` o `h-[100dvw]`.
`min-w-auto` y `min-h-auto`	🆕 4.0	No existen en la LTS (Tailwind 3.4).	Usa valores arbitrarios: `min-w-[auto]` y `min-h-[auto]`.
Escritura vertical: `px-*` cambia de sentido	🔄 4.0	En la LTS (Tailwind 3.4) `px-` y `py-` son siempre horizontal y vertical en la pantalla. En 4.x siguen los ejes de la escritura.	Si tu interfaz emplea escritura vertical, usa `[padding-inline:2rem]` y `[padding-block:2rem]` para obtener el comportamiento de 4.x.
`pbs-`, `pbe-`, `mbs-` y `mbe-`	🆕 4.2	No disponible	En escritura horizontal usa `pt-`, `pb-`, `mt-` y `mb-`, que hacen lo mismo. Si necesitas la versión lógica, escribe `[padding-block-start:1rem]`.
`inline-` y `block-`	🆕 4.2	No disponible	En escritura horizontal usa `w-`, `h-`, `min-w-`, `max-w-`, `min-h-` y `max-h-`. Si necesitas la versión lógica, escribe `[inline-size:14rem]`.
Variables CSS	🔄 4.0	En la LTS (Tailwind 3.4) se escribe con corchetes, `w-[--ancho-lateral]`, y los paréntesis no generan nada.	Sustituye `w-(--ancho-lateral)` por `w-[--ancho-lateral]`.
Valores propios en el tema	🔄 4.0	En la LTS (Tailwind 3.4) la escala y los anchos se definen en `tailwind.config.js`, con `theme.extend.spacing` y `theme.extend.maxWidth`.	Define los mismos nombres ahí, como se muestra abajo.

04 - Tipografía

Apartado	Versión	Qué ocurre	Si usas la LTS
Declarar la familia en el tema	🔄 4.0	En la LTS (Tailwind 3.4) el tema no se escribe en CSS.	Añade la familia en `tailwind.config.js`, dentro de `theme.extend.fontFamily`, como en el ejemplo de esta sección.
Cambiar la fuente de todo el documento	🔄 4.0	En la LTS (Tailwind 3.4) no existe `@theme`, aunque Preflight también lee la familia `sans` del tema.	Define `theme.extend.fontFamily.sans` en `tailwind.config.js` y obtendrás el mismo efecto.
Por dentro: el peso también escribe una variable	🔄 4.0	En la LTS (Tailwind 3.4) `font-bold` solo genera `font-weight: 700`.	El resultado visual es el mismo; solo cambia que no puedes leer `--font-weight-bold` desde tu CSS, y debes usar `theme('fontWeight.bold')` en su lugar.
Anchura con `font-stretch-*`	🆕 4.0	No disponible	Escribe la propiedad con un valor arbitrario, por ejemplo `[font-stretch:condensed]`, que compila y da el mismo CSS.
Valores dinámicos en la altura de línea	🔄 4.0	En la LTS (Tailwind 3.4) `leading-` y `text-sm/` solo admiten los números 3 a 10; `leading-11` o `text-sm/11` no generan CSS.	Usa un valor arbitrario, como `leading-[2.75rem]` o `text-sm/[2.75rem]`.
Tamaños propios en el tema	🔄 4.0	En la LTS (Tailwind 3.4) no hay variables `--text-*`.	Añade el tamaño en `theme.extend.fontSize` de `tailwind.config.js`, con un arreglo `[tamaño, { lineHeight, letterSpacing, fontWeight }]`.
Alturas sin unidades	🔄 4.0	En la LTS (Tailwind 3.4) las alturas de `text-xs` a `text-4xl` son longitudes en `rem`; en v4 son proporciones sin unidad. Un hijo sin altura propia hereda la longitud en v3, y por eso sus líneas pueden pisarse.	Da siempre altura de línea a los tamaños arbitrarios, por ejemplo `text-[32px]/tight` o `text-[32px] leading-tight`.
Alturas propias en el tema	🔄 4.0	En la LTS (Tailwind 3.4) no existe `@theme`.	Define `theme.extend.lineHeight` y `theme.extend.letterSpacing` en `tailwind.config.js`.
Número de líneas dinámico	🔄 4.0	En la LTS (Tailwind 3.4) solo existen `line-clamp-1` a `line-clamp-6` y `line-clamp-none`.	Escribe un valor arbitrario, como `line-clamp-[7]`, que compila en las dos versiones.
`wrap-*`	🆕 4.1	No disponible	En lugar de `wrap-break-word` usa `break-words`, que genera el mismo CSS, y en lugar de `wrap-anywhere` usa el valor arbitrario `[overflow-wrap:anywhere]`.
12. Sombras de texto: `text-shadow-*`	🆕 4.1	No disponible	Escribe un valor arbitrario como `[text-shadow:0_1px_2px_rgb(0_0_0/0.3)]`, o crea la utilidad con `matchUtilities` en un plugin. Pierdes el color `text-shadow-<color>` y el modificador `/N`.
`font-features-*`	🆕 4.2	No disponible	Escribe la propiedad con un valor arbitrario, por ejemplo `[font-feature-settings:'ss02']`, que genera el mismo CSS.
14. Tabuladores: `tab-*`	🆕 4.3	No disponible	Escribe un valor arbitrario, como `[tab-size:2]`, que genera el mismo CSS.
Instalación	🔄 4.0	En la LTS (Tailwind 3.4) los plugins se registran en la configuración de JavaScript.	Añade `plugins: [require('@tailwindcss/typography')]` a `tailwind.config.js`; las clases `prose` funcionan igual.

05 - Color y fondos

Apartado	Versión	Qué ocurre	Si usas la LTS
La paleta pasa a oklch	🔄 4.0	En la LTS (Tailwind 3.4) los colores son hexadecimales y la misma clase da otro tono: `bg-red-500` es `#ef4444` en 3.4 y `#fb2c36` en 4.3.	Nada que hacer, usa la paleta de 3.4 tal cual, y si compartes diseño con un proyecto v4, fija los colores clave en `theme.extend.colors` para que coincidan.
Cualquier número y variables	🔄 4.0	En la LTS (Tailwind 3.4) `/37` no genera nada, porque solo admite múltiplos de 5 y no acepta variables.	Escribe el valor con corchetes, `bg-red-500/[.37]`. Para una opacidad variable, escribe el color entero: `bg-[rgb(79_70_229/var(--alfa))]`.
Adiós a `bg-opacity-*`	🔄 4.0	En la LTS (Tailwind 3.4) funcionan `bg-opacity-`, `text-opacity-`, `border-opacity-`, `divide-opacity-`, `ring-opacity-` y `placeholder-opacity-`; v4 las elimina.	Puedes seguir usándolas, aunque es mejor escribir ya `bg-red-500/50`: funciona igual en las dos versiones.
Opacidad sobre `currentColor`	🔄 4.0	En la LTS (Tailwind 3.4) `bg-current/5` y `border-current/30` no generan nada, porque v3 no sabe aplicar opacidad a una palabra clave.	Escribe el fondo con un valor arbitrario, `bg-[color-mix(in_srgb,currentColor_5%,transparent)]`, que funciona en navegadores con `color-mix()`, o repite el color: `bg-emerald-700/5`.
Variables en valores arbitrarios	🔄 4.0	En la LTS (Tailwind 3.4) no existe la sintaxis con paréntesis.	Escribe `bg-[var(--marca)]`, y para imágenes `bg-[image:var(--fondo)]`. Esas dos formas funcionan también en v4.
8. Gradientes lineales	🔄 4.0	En la LTS (Tailwind 3.4) la clase es `bg-gradient-to-r` e interpola en sRGB; v4 la renombra a `bg-linear-to-r` e interpola en Oklab.	Escribe `bg-gradient-to-r`, `bg-gradient-to-tl`… y deja igual `from-`, `via-` y `to-*`, que se escriben igual.
Ángulos	🆕 4.0	No disponible	Escribe el ángulo en un valor arbitrario y usa las paradas de Tailwind: `bg-[linear-gradient(65deg,var(--tw-gradient-stops))]`.
Variantes en gradientes	🔄 4.0	En la LTS (Tailwind 3.4) cambiar `from-*` en una variante reinicia el color final a transparente; en v4 se conserva.	Repite todas las paradas en la variante: `dark:from-blue-500 dark:to-yellow-400`. Tampoco existe `via-none`: en v3 el propio reinicio ya elimina el `via`.
9. Interpolación: el camino entre dos colores	🆕 4.0	, que siempre interpola en sRGB.	Escribe el degradado arbitrario con el espacio de color, `bg-[linear-gradient(to_right_in_oklab,theme(colors.blue.600),theme(colors.yellow.300))]`. Solo funciona en navegadores modernos, de modo que conviene añadir un `bg-blue-600` debajo.
10. Gradientes radiales y cónicos	🆕 4.0	No existen en la LTS (Tailwind 3.4).	Las paradas `from-` y `to-` funcionan dentro de un valor arbitrario: `bg-[radial-gradient(var(--tw-gradient-stops))]` y `bg-[conic-gradient(from_180deg,var(--tw-gradient-stops))]`.
Esquinas: `bg-top-left`	🆕 4.1	No disponible	Usa el orden antiguo: `bg-left-top`, `bg-right-top`, `bg-left-bottom` y `bg-right-bottom`. Esas clases también funcionan en 4.3.3.
Valores propios: `bg-size-` y `bg-position-`	🆕 4.1	ni en 4.0.	Indica el tipo dentro de los corchetes: `bg-[length:20px_20px]` y `bg-[position:10px_10px]`. Estas clases siguen funcionando en v4.
14. Las paletas nuevas	🆕 4.2	No existen en la LTS (Tailwind 3.4) ni en 4.0 y 4.1.	Copia los hexadecimales de la tabla de esta sección en `theme.extend.colors` del fichero `tailwind.config.js`. Admiten modificador de opacidad.
15. `color-mix()`: mezclar colores	🔄 4.0	En la LTS (Tailwind 3.4) el compilador no usa `color-mix()`: la opacidad se calcula al compilar y da `rgb(239 68 68 / 0.5)`.	Los modificadores de opacidad funcionan sin él. Para mezclar colores, escribe el valor arbitrario, `bg-[color-mix(in_oklab,theme(colors.indigo.600)_25%,white)]`, en navegadores que lo admitan.
La función `--alpha()`	🆕 4.0	No disponible	Usa `theme()` en tu CSS con la opacidad, `theme(colors.lime.300 / 50%)`, o el valor hexadecimal con alfa.
Controles en tema oscuro: `scheme-*`	🆕 4.0	No disponible	Usa una propiedad arbitraria: `[color-scheme:dark]`.

06 - Bordes, sombras y efectos

Apartado	Versión	Qué ocurre	Si usas la LTS
Color por defecto	🔄 4.0	En la LTS (Tailwind 3.4), un borde sin color es gris (`gray-200`); en v4 usa `currentColor`, el color del texto.	No tienes que hacer nada si quieres ese gris, y si quieres el color del texto añade `border-current`.
Los lados de bloque: `border-bs-` y `border-be-`	🆕 4.2	No disponible	Usa `border-t-` y `border-b-`, que coinciden salvo en escritura vertical, o escribe la propiedad con `[border-block-start-width:2px]`.
Opacidad de borde: `border-opacity-*` eliminada	🔄 4.0	En la LTS (Tailwind 3.4) existen `border-opacity-`, `divide-opacity-` y `ring-opacity-*`; en v4 están eliminadas.	Siguen funcionando, pero escribe ya `border-black/50`, `divide-black/50` y `ring-black/50`, que van en las dos versiones.
La escala de radios	🔄 4.0	En la LTS (Tailwind 3.4), `rounded-sm` vale 2 px, y en v4 vale 4 px: el mismo nombre da otro resultado.	Usa `rounded-sm` para 2 px y `rounded` para 4 px. No tienes `rounded-xs` ni `rounded-4xl`; este último se escribe `rounded-[2rem]`.
Ancho y color por defecto	🔄 4.0	En la LTS (Tailwind 3.4), `ring` mide 3 px y es azul (`blue-500` al 50 %); en v4 mide 1 px y usa `currentColor`, igual que `border`.	Escribe siempre `ring-2` o `ring-4` y un color explícito (`ring-indigo-500`), que da el mismo resultado en las dos versiones. La clase `ring-3` no existe; usa `ring-[3px]`.
`outline` y `outline-2`	🔄 4.0	En la LTS (Tailwind 3.4), `outline-2` solo da el ancho y no se ve sin la clase `outline`, que además mide 3 px por sí sola; en v4, `outline` mide 1 px y `outline-2` funciona sola.	Escribe siempre las dos clases, `outline outline-2`. La clase `outline-solid` no existe, porque `outline` ya es sólido.
`outline-none` y `outline-hidden`	🔄 4.0	En la LTS (Tailwind 3.4), `outline-none` crea un contorno transparente que reaparece en colores forzados; en v4 esa misma clase elimina el contorno del todo, y lo de antes se llama `outline-hidden`.	Sigue usando `outline-none`; es la opción accesible y `outline-hidden` no existe.
7. Foco visible y accesibilidad	🔄 4.0	En la LTS (Tailwind 3.4), `outline-2` necesita la clase `outline` y `outline-none` ya es accesible.	Escribe `focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2` para el foco, y usa `outline-none` donde esta sección dice `outline-hidden`.
Un selector distinto en cada versión	🔄 4.0	En la LTS (Tailwind 3.4), el divisor es un borde superior en cada hijo menos el primero, con más prioridad que las clases del hijo; en v4 es un borde inferior en cada hijo menos el último, y las clases del hijo ganan.	No te afecta el defecto del último hijo oculto; para anular un divisor en un hijo concreto necesitas `!border-t-0`.
La escala de sombras	🔄 4.0	En la LTS (Tailwind 3.4), `shadow-sm` es la sombra más pequeña (`0 1px 2px`); en v4 esa sombra se llama `shadow-xs`, y `shadow-sm` da la que en v3 era `shadow`.	Usa `shadow-sm` y `shadow` en lugar de `shadow-xs` y `shadow-sm`. Para `shadow-2xs`, escribe `shadow-[0_1px_rgb(0_0_0/0.05)]`.
Opacidad en la clase de tamaño: `shadow-lg/50`	🆕 4.1	No disponible	Combina el tamaño con un color: `shadow-lg shadow-black/50` da exactamente el mismo resultado que `shadow-lg/50`.
10. Capas interiores	🆕 4.0	No disponible	Usa `shadow-inner` para una sombra interior, y `ring-1 ring-inset` para un anillo interior. Si necesitas combinarlos con una sombra exterior, escríbelos juntos en un valor arbitrario, como `shadow-[inset_0_2px_4px_rgb(0_0_0/0.05),0_10px_15px_-3px_rgb(0_0_0/0.1)]`.
Por qué existen: cinco capas en una propiedad	🔄 4.0	En la LTS (Tailwind 3.4), `box-shadow` compone tres capas: `ring-offset`, `ring` y `shadow`, sin capas interiores propias.	Para combinar más de lo que permiten esas tres capas, junta todas las sombras en un solo valor arbitrario `shadow-[...]`, separadas por comas.
Brillo superior	🆕 4.0	No disponible	Consigue el mismo brillo con `dark:shadow-[inset_0_1px_rgb(255_255_255/0.2)]`, teniendo en cuenta que ocupa la capa de sombra.
Desenfoque: la escala de `blur-*`	🔄 4.0	En la LTS (Tailwind 3.4), `blur-sm` desenfoca 4 px; en v4, 8 px, justo el doble.	Usa `blur-sm` para 4 px y `blur` para 8 px. `blur-xs` no existe.
Escala de `drop-shadow-*`	🔄 4.0	En la LTS (Tailwind 3.4), `drop-shadow-md`, `-lg` y `-xl` usan dos sombras y dan otro resultado que en v4, donde usan una sola, y además `drop-shadow-sm` pasa a llamarse `drop-shadow-xs`.	Las clases de la tabla de esta sección dan los valores de v3; para el aspecto exacto de v4 usa un valor arbitrario, como `drop-shadow-[0_9px_7px_rgb(0_0_0/0.1)]`.
Sombras de filtro con color: `drop-shadow-<color>`	🆕 4.1	No disponible	Escribe el valor completo en un valor arbitrario, como `drop-shadow-[0_4px_4px_rgb(99_102_241/0.6)]`, que funciona en las dos versiones.
Escala de `backdrop-blur-*`	🔄 4.0	En la LTS (Tailwind 3.4), `backdrop-blur-sm` desenfoca 4 px; en v4, 8 px.	Usa `backdrop-blur-sm` para 4 px y `backdrop-blur` para 8 px. `backdrop-blur-xs` no existe.
17. Máscaras: `mask-*`	🆕 4.1	No disponible	Escribe la propiedad con un valor arbitrario, como `[mask-image:linear-gradient(to_bottom,black_30%,transparent_95%)]`, que da el mismo resultado que `mask-b-from-30% mask-b-to-95%`.
18. Escala de la caja: `zoom-*`	🆕 4.3	No disponible	Escribe la propiedad directamente con un valor arbitrario, por ejemplo `[zoom:1.25]`, que da el mismo resultado que `zoom-125`.
19. Escalas renombradas	🔄 4.0	En la LTS (Tailwind 3.4), las clases de `shadow`, `drop-shadow`, `blur`, `backdrop-blur` y `rounded` tienen nombres desplazados un puesto respecto a v4, y `outline-none` y `ring` cambian de significado.	Usa la columna v3 de la tabla de esta sección.
Variables con paréntesis	🔄 4.0	En la LTS (Tailwind 3.4), las variables CSS se escriben con corchetes y `var()`, como `rounded-[var(--radio)]`; la sintaxis con paréntesis de v4 no existe.	Usa corchetes y añade la pista de tipo cuando la clase sea ambigua, como `border-[length:var(--grosor)]` o `shadow-[shadow:var(--sombra)]`.
Escalas dinámicas	🔄 4.0	En la LTS (Tailwind 3.4), solo existen los valores fijos de cada escala; `border-3` y `opacity-33` no generan CSS.	Escribe `border-[3px]`, `opacity-[.33]`, `grayscale-[50%]`, `brightness-[.37]` o `sepia-[.5]`.
Tokens propios en el tema	🔄 4.0	En la LTS (Tailwind 3.4), el tema se amplía en `tailwind.config.js`, no con `@theme`.	Añade tus valores en `theme.extend`, dentro de `borderRadius`, `boxShadow` y `blur`.
21. Caso completo: tarjetas y pedidos de la tienda	🆕 4.1	No disponible	En esta tarjeta de ejemplo, cambia `drop-shadow-xl drop-shadow-black/40` por `drop-shadow-[0_9px_7px_rgb(0_0_0/0.4)]`, `inset-ring inset-ring-emerald-600/30` por `ring-1 ring-inset ring-emerald-600/30`, `shadow-xs` por `shadow-sm`, y la sombra del botón por `shadow-[inset_0_1px_rgb(255_255_255/0.3),0_1px_3px_0_rgb(0_0_0/0.1)]`.
Ejercicio 1: Insignias de estado de los pedidos	🆕 4.0	No disponible	Haz estas insignias con `ring-1 ring-inset ring-emerald-600/30` en lugar de `inset-ring inset-ring-emerald-600/30`.
Ejercicio 2: Ficha de producto	🔄 4.0	En la LTS (Tailwind 3.4), `drop-shadow-xl` y `backdrop-blur-sm` dan otro valor en esta tarjeta.	Escribe `drop-shadow-[0_9px_7px_rgb(0_0_0/0.1)]` y `backdrop-blur` para que se vea igual.
Ejercicio 5: Botones accesibles	🆕 4.0	No disponible	Cambia `inset-ring inset-ring-slate-300` por `ring-1 ring-inset ring-slate-300` y añade `focus-visible:outline` a cada botón, porque `outline-2` no se ve sola.
Ejercicio 8: Cabecera fundida en v4 y en v3	🆕 4.1	No disponible	Haz directamente la segunda parte del ejercicio, con `[mask-image:linear-gradient(...)]`.
Ejercicio 10 (propuesto): Sistema de elevación	🔄 4.0	En la LTS (Tailwind 3.4), el tema no se define con `@theme`.	Define las tres sombras en `theme.extend.boxShadow`, dentro de `tailwind.config.js`.
Ejercicio 12 (propuesto): Vista previa de factura	🆕 4.3	No disponible	Usa `[zoom:0.5]` en lugar de `zoom-50` y un valor `[mask-image:...]` para el sombreado.

07 - Layout y posicionamiento

Apartado	Versión	Qué ocurre	Si usas la LTS
Quién gana entre dos clases de `display`	🔄 4.0	En la LTS (Tailwind 3.4) `hidden` gana siempre a cualquier otra clase de `display`. En 4.0 solo gana a `block`, `contents`, `flex`, `flow-root` y `grid`, y pierde frente a `inline`, `inline-block`, `inline-flex`, `inline-grid`, `list-item` y las de tabla.	Tu código funciona, pero si migras revisa cada `classList.add('hidden')`. Lo más seguro en ambas versiones es no juntar nunca dos clases de `display`.
El atributo `hidden` de HTML	🔄 4.0	En la LTS (Tailwind 3.4) Preflight da `display: none` al atributo `hidden` sin `!important`, así que `flex` o `block` lo anulan y el elemento se ve. En 4.0 la regla lleva `!important` y el atributo gana siempre.	Añade `[&[hidden]]:hidden` a los elementos con clase de `display`, o alterna la clase `hidden` en lugar del atributo.
Valores sin escala fija	🆕 4.0	, que solo acepta los valores de su escala.	Para `top-17` escribe `top-[4.25rem]`, y para una variable, `top-[--altura]` en lugar de `top-(--altura)`.
`inset-x-` e `inset-y-` son lógicas	🔄 4.0	En la LTS (Tailwind 3.4) `inset-x-0` genera `left` y `right`; en 4.0 genera `inset-inline`. Lo mismo ocurre con `inset-y-`, `scroll-mx-` y `scroll-px-*`.	En texto horizontal, sea de izquierda a derecha o al revés, el resultado es idéntico. Solo en `writing-mode` vertical necesitas escribir `[inset-inline:0]`.
`inset-s-`, `inset-e-`, `inset-bs-` e `inset-be-`	🆕 4.2	No disponible	Usa `start-` y `end-`, que generan lo mismo que `inset-s-` e `inset-e-`. Para el eje de bloque no hay utilidad: escribe `[inset-block-start:1rem]`. Tampoco hay `scroll-pbs-` ni `scroll-mbs-`.
Valores dinámicos en `z-*`	🆕 4.0	, cuya escala llega a `z-50`.	Escribe el valor arbitrario `z-[100]`, que funciona en las dos versiones.
Una escala propia de capas	🔄 4.0	En la LTS (Tailwind 3.4) la escala se amplía en `tailwind.config.js`.	Escribe `theme: { extend: { zIndex: { modal: '100' } } }` y tendrás la misma clase `z-modal`.
Número de columnas sin escala	🆕 4.0	, que tiene una escala fija.	Para `columns-16` escribe `columns-[16]`.
Proporciones con fracción	🆕 4.0	, que solo trae `aspect-square`, `aspect-video` y `aspect-auto`.	Escribe el valor arbitrario, por ejemplo `aspect-[3/2]` en lugar de `aspect-3/2`, que funciona igual en las dos versiones.
Proporciones propias	🔄 4.0	En la LTS (Tailwind 3.4) las proporciones se definen en `tailwind.config.js`.	Escribe `theme: { extend: { aspectRatio: { retro: '4 / 3' } } }` y tendrás `aspect-retro`.
Nombres nuevos para las esquinas	🆕 4.1	No disponible	Usa `object-left-top`, `object-right-bottom`… que además siguen funcionando en 4.3.3.
10. `container`	🔄 4.0	En la LTS (Tailwind 3.4) `container` se configura con `theme.container` (`center`, `padding`) en `tailwind.config.js`; en 4.0 esas opciones desaparecen y se usa `@utility container`.	Escribe `theme: { container: { center: true, padding: '1rem' } }`. Los anchos son iguales, y en la 3.4 están en píxeles.
13. Barras de desplazamiento con `scrollbar-*`	🆕 4.3	No disponible	Las propiedades son CSS estándar, así que escribe valores arbitrarios: `[scrollbar-width:thin]`, `[scrollbar-color:#6366f1_#e0e7ff]` y `[scrollbar-gutter:stable]`. Pierdes los colores del tema y los modificadores de opacidad.

08 - Flexbox

Apartado	Versión	Qué ocurre	Si usas la LTS
`gap` frente a `space-*` con varias líneas	🔄 4.0	En la LTS (Tailwind 3.4) `space-x-*` pone el margen a la izquierda de cada hijo menos el primero, así que con `flex-wrap` la segunda fila se desplaza.	Usa `gap-*` en cualquier contenedor flex, que se comporta igual en las dos versiones.
`grow-*`	🔄 4.0	En la LTS (Tailwind 3.4) solo existen `grow` y `grow-0`, y `grow-2` o `grow-3` no generan CSS.	Escribe el valor entre corchetes, `grow-[2]` y `grow-[3]`. Medido con el ejemplo de esta sección, el reparto es idéntico.
`shrink-*`	🔄 4.0	En la LTS (Tailwind 3.4) solo existen `shrink` y `shrink-0`, y `shrink-2` no genera CSS.	Escribe el valor entre corchetes, `shrink-[2]`. Medido con el ejemplo de esta sección, el reparto es idéntico.
Valores dinámicos en `flex-*`	🆕 4.0	No disponible	Escribe el valor entre corchetes: `flex-[2]` en lugar de `flex-2` y `flex-[50%]` en lugar de `flex-1/2`. El resultado medido es idéntico.
Anchos con nombre y variables en `basis`	🆕 4.0	No disponible	Para `basis-xs` escribe `basis-[20rem]`; para `basis-17`, `basis-[4.25rem]`; para un nombre propio, añádelo en `theme.extend.flexBasis` de `tailwind.config.js`; y para una variable, `basis-[var(--ancho)]`.
6. Orden	🔄 4.0	En la LTS (Tailwind 3.4) `order-*` llega hasta `order-12`.	Para valores mayores escribe `order-[13]`. El resto de clases de esta sección funciona igual.
`justify-baseline`: una clase que no hace nada	🆕 4.0	No disponible	No pierdes nada, porque no tiene efecto. Para alinear por línea base, usa `items-baseline`.
`items-baseline-last` y `self-baseline-last`	🆕 4.1	No disponible	Usa una propiedad arbitraria: `[align-items:last_baseline]` en el contenedor o `[align-self:last_baseline]` en el elemento. Comprobado que compila y da la misma posición. No sirve `self-[last_baseline]`, que no genera CSS.
Alineación segura	🆕 4.1	No disponible	Usa una propiedad arbitraria, `[justify-content:safe_center]` o `[align-items:safe_center]`. Compila y funciona igual, con los mismos requisitos de navegador. Para no depender del navegador, usa márgenes automáticos: `first:ms-auto last:me-auto` en los hijos.

09 - CSS Grid

Apartado	Versión	Qué ocurre	Si usas la LTS
Valores dinámicos	🔄 4.0	En la LTS (Tailwind 3.4), `grid-cols-` y `grid-rows-` solo llegan a 12, y `grid-cols-15` no genera nada, sin ningún aviso.	Escribe la pista completa con `grid-cols-[repeat(15,minmax(0,1fr))]`, o añade el valor a `gridTemplateColumns` en `tailwind.config.js`.
El atajo `col-` y `row-`	🆕 4.1	No disponible	Usa `col-start-2` y `row-start-3`, que colocan el elemento en la misma pista.
Variables CSS en las pistas	🔄 4.0	En la LTS (Tailwind 3.4) no existe la sintaxis con paréntesis, y `col-span-*` no admite valores arbitrarios.	Escribe `grid-cols-[var(--columnas)]` y `col-[span_var(--ancho)]`, que funcionan igual en las dos versiones.
Pistas en el tema	🔄 4.0	En la LTS (Tailwind 3.4) no hay `@theme`.	Define las pistas en `tailwind.config.js`, dentro de `theme.extend`, con las claves `gridTemplateColumns`, `gridColumn`, `gridTemplateRows`, `gridRow` y `gridAutoRows`.
Una clase con nombre para las áreas	🔄 4.0	En la LTS (Tailwind 3.4) no existe `@utility`.	Define la clase dentro de `@layer utilities` y escribe tú la media query, como en el segundo bloque de abajo.
`justify-items-normal`	🆕 4.0	No disponible	Escribe la propiedad arbitraria `[justify-items:normal]`, que genera el mismo CSS.
Alineación segura	🆕 4.1	No disponible	Usa una propiedad arbitraria, como `[justify-items:safe_center]`, que da el mismo resultado.
Ejercicio 7: Cronograma de proyectos	🔄 4.0	En la LTS (Tailwind 3.4) no existen `col-start-(--inicio)` ni `col-span-(--meses)`.	Escribe `col-[var(--inicio)/span_var(--meses)]`, que funciona igual en las dos versiones.

10 - Diseño responsive

Apartado	Versión	Qué ocurre	Si usas la LTS
Los puntos de ruptura	🔄 4.0	En la LTS (Tailwind 3.4) los puntos de ruptura están en píxeles (`640px`, `768px`…) y compilan a `@media (min-width: 768px)`; en 4.0 están en `rem` y compilan a `@media (width >= 48rem)`.	Los nombres de las clases son los mismos y con la configuración normal del navegador cortan en los mismos sitios.
`min-[...]` y `max-[...]`	🔄 4.0	En la LTS (Tailwind 3.4) `max-[900px]:` compila a `@media (max-width: 900px)`, que incluye el valor exacto; en 4.0 compila a `width < 900px`, que lo excluye.	Escribe `max-[899.98px]:` si combinas `min-[900px]:` y `max-[900px]:` en la misma frontera, porque a 900 px se cumplirían las dos.
Valores arbitrarios en `rem`	🔄 4.0	En la LTS (Tailwind 3.4) los puntos de ruptura están en píxeles, y `min-[900px]:` se ordena bien entre ellos; en 4.0 están en `rem`, y un valor en píxeles sale antes que todos.	Escribe `min-[900px]:`; en v4, escribe `min-[56.25rem]:`, y el orden es correcto.
7. Personalizar los puntos de ruptura	🔄 4.0	En la LTS (Tailwind 3.4) se configuran en `theme.screens` de `tailwind.config.js`; en 4.0, con variables `--breakpoint-*` en `@theme`.	Escribe `theme: { extend: { screens: { xs: '480px', '3xl': '1920px' } } }`, y usa una sola unidad.
Usar un punto de ruptura desde tu CSS	🔄 4.0	En la LTS (Tailwind 3.4) se escribe `@screen md { ... }` o `@media screen(md) { ... }`.	Usa `@screen md` donde aquí aparece `@variant md`, y `theme('screens.md')` donde aparece `theme(--breakpoint-md)`.
9. Consultas de contenedor	🆕 4.0	sin ayuda.	Instala el plugin `@tailwindcss/container-queries` y añádelo a `plugins`; da `@container`, `@md:` y los nombres, aunque no `@max-`, `@min-`, `@3xs` ni `@2xs`.
Equivalente en v3 de `@max-*`	🆕 4.0	: el plugin no genera `@max-`, `@min-`, `@3xs` ni `@2xs`.	Invierte la lógica (`hidden @md:block` en lugar de `@max-md:hidden`), o usa una variante arbitraria como `[@container(max-width:28rem)]:hidden`.
Contenedores a medida	🔄 4.0	En la LTS (Tailwind 3.4) con el plugin, los tamaños se añaden con `theme.extend.containers` en `tailwind.config.js`.	Escribe `theme: { extend: { containers: { tarjeta: '22rem' } } }`.
Orden entre medios y contenedor	🔄 4.0	En la LTS (Tailwind 3.4) con el plugin, las consultas de contenedor salen antes que las de medios; en 4.0 salen después.	Con `md:block @md:flex` en v3 gana `md:block`, y en 4.0, `@md:flex`. Evita que las dos compitan por la misma propiedad.
10. Consultar la altura: `@container-size`	🆕 4.3	ni en 4.0 a 4.2.	Usa la propiedad arbitraria `[container-type:size]`, que genera el mismo CSS y también funciona en 4.0 a 4.2.

11 - Variantes y estados

Apartado	Versión	Qué ocurre	Si usas la LTS
Importante con variantes	🔄 4.0	En la LTS (Tailwind 3.4) el signo `!` va delante de la utilidad, no al final.	Escribe `hover:!flex` en lugar de `hover:flex!`; en 3.4 `hover:flex!` genera la clase sin `!important` y sin avisar.
El anillo de foco	🔄 4.0	En la LTS (Tailwind 3.4) `outline-2` solo fija el ancho, mientras que en v4 también fija el estilo.	Añade `outline`, como en `focus-visible:outline focus-visible:outline-2`. Además, `outline-hidden` de v4 se llama `outline-none` en 3.4.
El cursor de los botones	🔄 4.0	En v4, Preflight deja `cursor: default` en los botones, y en la LTS (Tailwind 3.4) deja `cursor: pointer`.	No necesitas `enabled:cursor-pointer`; si acaso, añade `disabled:cursor-not-allowed` para indicar que no se puede pulsar.
4. `hover` en pantallas táctiles	🔄 4.0	En v4, `hover:` solo se aplica en dispositivos con hover real, y en la LTS (Tailwind 3.4) se aplica también al tocar en una pantalla táctil.	Activa `future: { hoverOnlyWhenSupported: true }` en `tailwind.config.js`, que genera `@media (hover: hover) and (pointer: fine)`.
`user-valid` y `user-invalid`	🆕 4.1	No disponible	Escribe la pseudoclase como variante arbitraria: `[&:user-invalid]:border-red-500` y `[&:user-valid]:border-green-500`, que generan el mismo CSS.
Posiciones concretas con `nth-*`	🆕 4.0	No disponible	Usa una variante arbitraria: `[&:nth-child(3)]:bg-indigo-200` en lugar de `nth-3:bg-indigo-200`. Funciona igual con `nth-last-child` y `nth-of-type`.
Mensaje de error ligado al campo	🆕 4.1	`peer-user-invalid:` no existe en la LTS (Tailwind 3.4).	Escribe `peer-[:user-invalid]:block`, que genera un selector equivalente.
Variantes con nombre	🆕 4.0	`has-checked:`, `has-focus:`, `has-hover:` y similares no existen en la LTS (Tailwind 3.4).	Escribe la forma con corchetes, `has-[:checked]:`, que funciona igual en las dos versiones.
11. `in-*`: cualquier ancestro	🆕 4.0	`in-*` no existe en la LTS (Tailwind 3.4).	Marca al ancestro con `group` y usa `group-*`, o escribe una variante arbitraria, como `[[data-seccion=ofertas]_&]:text-orange-600`.
12. `not-*`: lo contrario	🆕 4.0	`not-*` no existe en la LTS (Tailwind 3.4).	Usa una variante arbitraria: `[&:not(:last-child)]:border-b` en lugar de `not-last:border-b`, y en general `[&:not(...)]:`. Las negaciones de consultas (`not-md:`) se sustituyen por `max-md:`.
`**:` para todos los descendientes	🆕 4.0	`**:` no existe en la LTS (Tailwind 3.4).	Usa una variante arbitraria con el descendiente: `[&_[data-enlace]]:underline` en lugar de `**:data-[enlace]:underline`.
Atributos ARIA sin nombre propio	🔄 4.0	En la LTS (Tailwind 3.4) solo tienen variante `aria-busy`, `aria-checked`, `aria-disabled`, `aria-expanded`, `aria-hidden`, `aria-pressed`, `aria-readonly`, `aria-required` y `aria-selected`; v4 acepta cualquiera.	Para los demás usa corchetes: `aria-[invalid=true]:border-red-500` en lugar de `aria-invalid:border-red-500`.
`data-*` sin corchetes	🔄 4.0	La forma `data-activo:` no existe en la LTS (Tailwind 3.4), donde siempre hacen falta corchetes.	Escribe `data-[activo]:`, que funciona igual en las dos versiones. Lo mismo vale para `group-data-[abierto]:`.
`open`	🔄 4.0	En la LTS (Tailwind 3.4) `open:` solo genera `[open]`, de modo que no reacciona a `popover`.	Para un `popover` usa la variante arbitraria `[&:popover-open]:`. En `<details>` y `<dialog>` funciona igual.
`details-content`	🆕 4.1	No disponible	Usa la variante arbitraria `[&::details-content]:`, o envuelve el contenido en un `<div>` y dale estilo a él, que es lo que mejor funciona en navegadores antiguos.
`inert`	🆕 4.0	No disponible	Usa `[&[inert]]:opacity-50`, teniendo en cuenta que solo afecta al propio elemento: en v4, `inert:` afecta también a sus descendientes.
17. Orden de apilado	🔄 4.0	En la LTS (Tailwind 3.4) las variantes apiladas se aplican de derecha a izquierda, y en v4 de izquierda a derecha.	Invierte el orden en las cadenas que incluyan `:`, `:` o variantes arbitrarias de descendiente: `:first:` de v4 se escribe `first:*:` en 3.4.
`pointer-` y `any-pointer-`	🆕 4.1	No existen en la LTS (Tailwind 3.4).	Escribe la consulta como variante arbitraria: `[@media(pointer:coarse)]:py-3` en lugar de `pointer-coarse:py-3`, y `[@media(any-pointer:coarse)]:` para `any-pointer-coarse:`.
`noscript` e `inverted-colors`	🆕 4.1	No existen en la LTS (Tailwind 3.4).	Escribe `[@media(scripting:none)]:` para `noscript:` y `[@media(inverted-colors:inverted)]:` para `inverted-colors:`.
19. Caso práctico: panel de pedidos	🆕 4.1	Este ejemplo usa `pointer-coarse:`, que no existe en la LTS (Tailwind 3.4).	Sustitúyelo por `[@media(pointer:coarse)]:opacity-100`. El resto de clases funciona en las dos versiones.
Ejercicio 8: Campo con error amable	🆕 4.1	Este ejercicio usa `user-invalid:` y `peer-user-invalid:`, que no existen en la LTS (Tailwind 3.4).	Escribe `[&:user-invalid]:border-red-500` y `peer-[:user-invalid]:block`.

12 - Modo oscuro y temas

Apartado	Versión	Qué ocurre	Si usas la LTS
`not-dark:`	🆕 4.0	No disponible	Escribe la clase sin variante y anúlala con `dark:`, por ejemplo `hover:bg-gray-300 dark:hover:bg-gray-600`.
Las clases `scheme-*`	🆕 4.0	No disponible	Usa propiedades arbitrarias: `[color-scheme:dark]` y `dark:[color-scheme:dark]` generan el mismo CSS.
Activar el modo manual	🔄 4.0	En la LTS (Tailwind 3.4) se configura en `tailwind.config.js`, no en el CSS.	Escribe `darkMode: 'selector'` para usar la clase `.dark`, o `darkMode: ['selector', '[data-modo="oscuro"]']` para un atributo. Genera el mismo selector `:where()` que v4.
`color-scheme` con botón: el detalle de `scheme-light`	🆕 4.0	Las clases `scheme-*` no existen en la LTS (Tailwind 3.4).	Escribe `[color-scheme:light] dark:[color-scheme:dark]` en `<html>`. Compilado con 3.4.19 y `darkMode: 'selector'`, se comporta igual.
`@variant dark` dentro de tu CSS	🆕 4.0	: `@variant` queda sin procesar y llega tal cual al navegador.	Usa `@apply dark:bg-black`, que sí funciona, o escribe el selector o la consulta de medios a mano.
Alternativa: sistema por defecto, solo con CSS	🔄 4.0	En la LTS (Tailwind 3.4) esto se define en la configuración.	Usa `darkMode: ['variant', ['@media (prefers-color-scheme: dark) { &:not(.claro ) }', '&:is(.oscuro )']]`, que genera las dos reglas, aunque con especificidad extra también en `.oscuro`.
8. Colores semánticos: menos `dark:`	🔄 4.0	En la LTS (Tailwind 3.4) los colores se declaran en `tailwind.config.js` y no generan variables.	Crea las variables tú mismo como canales RGB y regístralas como `fondo: 'rgb(var(--fondo) / <alpha-value>)'` en `theme.extend.colors`. El código completo está al final de esta sección.
La trampa de `@theme` con una variable propia	🆕 4.0	`@theme inline` no existe en la LTS (Tailwind 3.4).	No tienes esta trampa, porque `rgb(var(--fondo) / <alpha-value>)` usa la variable directamente en la clase, y funciona igual en `<html>` que en una sección.
9. Temas múltiples con `data-*`	🔄 4.0	En la LTS (Tailwind 3.4) las variantes propias se crean con un plugin.	Define los temas con las variables de canales de la sección 8; para `dark:` usa `darkMode: ['variant', '&:where([data-tema=oscuro], [data-tema=oscuro] , [data-tema=oceano], [data-tema=oceano] )']`, y para `tema-bosque:` usa `addVariant('tema-bosque', '&:where([data-tema=bosque], [data-tema=bosque] *)')` en un plugin.
11. Caso real: panel de control de la tienda	🔄 4.0	El panel depende de los tokens de `@theme`, que en la LTS (Tailwind 3.4) no existen en CSS.	Define `fondo`, `superficie`, `linea`, `tinta` y demás con el esquema de canales de la sección 8; el HTML y `tema.js` no cambian.

13 - Transiciones, animaciones y 3D

Apartado	Versión	Qué ocurre	Si usas la LTS
Listas ampliadas	🔄 4.0	En la LTS (Tailwind 3.4) `transition` y `transition-colors` no incluyen `outline-color`, los degradados ni `translate`, `scale` y `rotate`, y `transition` tampoco incluye `display`, `overlay`, `content-visibility` ni `pointer-events`.	Para animar el color del contorno usa `transition-[outline-color]` o escribe la lista completa con un valor arbitrario; las transformaciones funcionan igual porque en v3 todas viven dentro de `transform`.
Valores dinámicos de tiempo	🔄 4.0	En la LTS (Tailwind 3.4) solo existen los valores de la escala (`duration-75`, `100`, `150`, `200`, `300`, `500`, `700`, `1000`, y lo mismo en `delay-*`) y `duration-(--x)` no se genera.	Escribe `duration-[1234ms]`, `delay-[77ms]` o `duration-[var(--x)]`, que funcionan en las dos versiones.
Curvas y tiempos propios	🔄 4.0	En la LTS (Tailwind 3.4) no existe `@theme` ni `ease-(--x)`.	Define la curva en `theme.extend.transitionTimingFunction` de `tailwind.config.js`, y la duración por defecto en `theme.extend.transitionDuration.DEFAULT`. Para un valor suelto, `ease-[cubic-bezier(0.34,1.56,0.64,1)]` funciona en las dos versiones.
`--tw-duration` y las variantes	🔄 4.0	En la LTS (Tailwind 3.4) cada `transition-` fija sus 150 ms directamente, y una clase con variante puede pisar tu `duration-`: con `duration-700 hover:transition-colors`, medido en el navegador, la duración en `hover` es `0.15s`.	Repite la duración en la variante, `hover:duration-700`.
Valores dinámicos en transformaciones	🔄 4.0	En la LTS (Tailwind 3.4) solo existen los valores de la escala (`rotate-45`, `rotate-90`, `scale-110`) y no están `rotate-none`, `scale-none` ni `translate-none`.	Escribe `rotate-[17deg]` o `scale-[1.15]`, y para anular usa `rotate-0`, `scale-100` y `translate-x-0`.
6. Propiedades individuales	🔄 4.0	En la LTS (Tailwind 3.4) todas las transformaciones se escriben en `transform`, y `transform-none` las anula todas a la vez.	Las diferencias de este apartado no te afectan: `transition-[transform]` y `transform-none` funcionan como se esperaría, pero una animación con `transform` sustituye a tus transformaciones.
`@keyframes` dentro de `@theme`	🔄 4.0	En la LTS (Tailwind 3.4) no existe `@theme`.	Define la animación en `theme.extend.animation` y sus pasos en `theme.extend.keyframes` de `tailwind.config.js`, como en el ejemplo de abajo. La clase `animate-entrar` que obtienes es la misma.
`starting:` y `@starting-style`	🆕 4.0	No disponible	Usa la variante arbitraria `[@starting-style]:opacity-0`, que genera el mismo CSS y hemos comprobado que funciona en 3.4.19. Otra opción es una animación propia con `animate-entrar`.
`transition-discrete`	🆕 4.0	No disponible	Escribe `[transition-behavior:allow-discrete]`, que hemos comprobado en 3.4.19: la salida de un elemento con `hidden` se anima igual.
13. Tres dimensiones	🆕 4.0	Las clases de esta sección no existen en la LTS (Tailwind 3.4).	Escribe lo mismo con propiedades arbitrarias: `[perspective:300px]`, `[transform-style:preserve-3d]`, `[backface-visibility:hidden]` y `[transform:rotateY(180deg)]`. La última parte de la sección trae el ejemplo completo.

14 - Personalizar el tema

Apartado	Versión	Qué ocurre	Si usas la LTS
Todo el módulo	🔄 4.0	Todo este módulo trata de la configuración en CSS, y en la LTS (Tailwind 3.4) el tema vive en JavaScript.	Cada apartado te da el equivalente en `tailwind.config.js`, y la tienda de la sección 13 se compila también en 3.4.19 con un resultado idéntico.
2. `@theme` frente a `tailwind.config.js`	🔄 4.0	En la LTS (Tailwind 3.4) no existe `@theme`: el tema es un objeto JavaScript.	Escribe los tokens en `theme.extend` dentro de `tailwind.config.js`; ese fichero es obligatorio en 3.4 y `tailwindcss init` lo crea por ti.
3. Espacios de nombres	🔄 4.0	En la LTS (Tailwind 3.4) no hay espacios de nombres: cada tipo de valor es una clave del objeto `theme`.	Consulta la columna “Clave en 3.4” de la tabla de esta sección; `--color-marca` se convierte en `theme.extend.colors.marca`.
4. Colores propios	🔄 4.0	En la LTS (Tailwind 3.4) los colores se escriben anidados en `theme.extend.colors` y los valores `oklch()` no admiten el modificador de opacidad.	Usa la versión en hexadecimal de esta sección, con los niveles como claves del objeto `marca`.
5. Fuentes y texto	🔄 4.0	En la LTS (Tailwind 3.4) las fuentes van en `fontFamily` como lista y los tamaños en `fontSize` como par `[tamaño, opciones]`.	Escribe `fontSize: { titulo: ['2.25rem', { lineHeight: '1.15', letterSpacing: '-0.02em', fontWeight: '700' }] }`, que genera las mismas cuatro propiedades.
6. Espaciado, medidas y puntos de ruptura	🔄 4.0	En la LTS (Tailwind 3.4) la escala de espaciado es una lista de valores fijos en `rem`, y no existe una variable base.	Regenera la escala en `theme.spacing` con un bucle, como en el ejemplo de esta sección; el cambio solo se aplica al compilar, no a una zona de la página.
7. Usar los tokens fuera de las clases	🔄 4.0	En la LTS (Tailwind 3.4) los tokens no llegan al navegador como variables, y `--theme()`, `--spacing()` y `--alpha()` no existen.	En tu CSS usa `theme(colors.marca.500 / 50%)` y `theme(spacing.4)`, y en JavaScript `resolveConfig` de `tailwindcss/resolveConfig`, que mete el tema entero en tu paquete.
8. Qué llega al CSS: `@theme static`	🆕 4.0	No disponible	Expón a mano los tokens que necesites, con `@layer base { :root { --color-marca-500: theme(colors.marca.500); } }`.
9. `@theme inline`: el problema de la cascada	🆕 4.0	, y no hace falta: allí los valores siempre se copian en la clase.	Escribe `colors: { lienzo: 'var(--superficie)' }`; si necesitas opacidad, usa `rgb(var(--superficie) / <alpha-value>)` con la variable en canales RGB.
10. Los otros modos: `reference` y `default`	🆕 4.0	No disponible	El equivalente de `default` es un preset, porque el `theme` del proyecto ya tiene prioridad sobre él. `reference` no tiene equivalente: en 3.4 los valores se copian en las clases y nunca se generan variables.
12. Reiniciar el tema	🔄 4.0	En la LTS (Tailwind 3.4) no existe `initial`: una escala se reinicia escribiéndola en `theme` sin `extend`, y todo el tema con `presets: []`.	Para quitar los colores usa `theme: { colors: { transparent: 'transparent', current: 'currentColor', marca: '#0f766e' } }`, incluyendo esas dos entradas a mano.
13. Una marca propia completa	🔄 4.0	En la LTS (Tailwind 3.4) el reparto en capas se monta con un preset y variables con los canales RGB separados.	Define los colores como `rgb(var(--primario) / <alpha-value>)` y las variables como `--primario: 0 93 93`; el código completo está al final de esta sección.
15. Compartir un tema entre proyectos	🔄 4.0	En la LTS (Tailwind 3.4) los temas se comparten con `presets`, un objeto JavaScript.	Publica el objeto y añade `presets: [require('@empresa/tema')]` a cada `tailwind.config.js`; el `theme` del proyecto tiene prioridad sobre el del preset.

15 - Utilidades y plugins propios

Apartado	Versión	Qué ocurre	Si usas la LTS
Todo el módulo	🔄 4.0	Casi todo este módulo se escribe en CSS, y en la LTS (Tailwind 3.4) `@utility`, `@custom-variant`, `@variant`, `@plugin`, `@reference`, `--spacing()`, `--alpha()` y `--theme()` no se procesan: pasan tal cual al CSS final, sin error.	Las utilidades y variantes se escriben en `@layer utilities` o con la API de plugins en `tailwind.config.js`. Esta API es casi la misma en las dos versiones, así que las secciones 12 a 14 te sirven enteras. Cada apartado afectado incluye su equivalente concreto.
2. Utilidades estáticas con `@utility`	🔄 4.0	En la LTS (Tailwind 3.4) no existe `@utility`: se queda sin procesar en el CSS final.	Escribe la clase dentro de `@layer utilities { .fondo-rayas { ... } }`, que allí sí admite variantes y solo se genera si se usa.
3. Quién gana: el orden de tus utilidades	🔄 4.0	En la LTS (Tailwind 3.4) las clases de `@layer utilities` van detrás de las nativas y ganan siempre: en `abeto p-2` manda `abeto`. En 4.0 se ordenan junto a las nativas, y el resultado depende de sus propiedades y de su nombre.	No necesitas hacer nada, tus utilidades ganan a las nativas de igual especificidad.
4. Utilidades funcionales con `--value()`	🔄 4.0	En la LTS (Tailwind 3.4) no existe `--value()`: las utilidades con parámetro se crean con `matchUtilities()` en un plugin.	Escribe `matchUtilities({ rejilla: (v) => ({ ... }) }, { values: theme('spacing') })` en `tailwind.config.js`, como explica la sección 13.
`--value()` obligatorio y varias definiciones	🔄 4.3	En versiones anteriores, `@utility foo-* { color: red; }` generaba CSS para cualquier sufijo, y dos `@utility` con el mismo nombre y distinto tipo no se complementaban. En la LTS (Tailwind 3.4) `@utility` no existe.	Llama a `matchUtilities()` una vez por grupo de valores, con su `type`.
5. Modificadores con `--modifier()`	🔄 4.0	En la LTS (Tailwind 3.4) no existe `--modifier()`.	La función de `matchUtilities()` recibe `{ modifier }` como segundo argumento, y declaras los valores válidos con la opción `modifiers`. Con `type: 'color'`, la opacidad `/50` funciona sola.
6. Valores por defecto con `--default()`	🆕 4.3	No disponible	En `matchUtilities()` añade `DEFAULT` a `values` para el valor sin sufijo, como `values: { DEFAULT: theme('spacing.1'), 2: theme('spacing.2') }`, y para el modificador usa `modifier ?? 'currentColor'` en la función.
7. Variantes propias con `@custom-variant`	🔄 4.0	En la LTS (Tailwind 3.4) no existe `@custom-variant`: queda sin procesar y la clase `enviado:flex` no genera nada.	Registra la variante en un plugin con `addVariant('enviado', '&[data-estado="enviado"]')`. En 3.4 se admiten selectores, un `@media` y un array con varios.
8. Aplicar variantes en tu CSS con `@variant`	🆕 4.0	: `@variant` llega tal cual al navegador.	Escribe las variantes dentro de `@apply`, como `@apply hover:bg-indigo-100 dark:bg-slate-800`, que genera las mismas reglas; para declaraciones sueltas escribe el selector o la consulta de medios a mano.
Variantes apiladas y compuestas	🆕 4.3	No disponible	Apila dentro de `@apply`, como `@apply hover:focus:bg-red-500`, o escribe un selector con coma para la unión. En 4.0 a 4.2, anida un `@variant` dentro de otro para apilar y repite el bloque para la unión.
9. `@apply`	🔄 4.0	En la LTS (Tailwind 3.4) `@apply` respeta el orden escrito y acepta cualquier clase, también las de tu CSS. En 4.0 Tailwind ordena las clases por su cuenta y solo admite utilidades registradas: nativas, `@utility` o de plugins.	Tu `@apply` funciona igual, pero al migrar pasa a `@utility` las clases que apliques.
10. `@reference`: `@apply` fuera de tu hoja principal	🆕 4.0	, donde queda sin procesar.	No hace falta directiva: cada CSS lee `tailwind.config.js`, y `@apply` funciona en CSS Modules y bloques `<style>` con el tema y los plugins. Las clases de `@layer` de otra hoja no se ven: pásalas a un plugin para compartirlas.
11. Funciones de Tailwind en el CSS	🆕 4.0	`--spacing()`, `--alpha()` y `--theme()` no existen en la LTS (Tailwind 3.4), donde llegan tal cual al navegador.	Usa `theme(spacing.4)`, `theme(colors.red.500 / 50%)` y `theme(colors.red.500)`, que dan el valor directo.
12. Plugins: `@plugin` y `plugin()`	🔄 4.0	En la LTS (Tailwind 3.4) `@plugin` queda sin procesar: los plugins se registran en `tailwind.config.js`, y las opciones se pasan llamando a la función.	Escribe `plugins: [require('./plugins/tienda')({ radio: '0.375rem' })]`. El cuerpo del plugin no cambia, y la función se importa con `const plugin = require('tailwindcss/plugin')`.
`addComponents` en v4	🔄 4.0	En la LTS (Tailwind 3.4) `addComponents` escribe en la capa `components`, y cualquier utilidad lo sobrescribe. En 4.0 escribe en `utilities`, ordenado como una utilidad más.	Nada cambia, el plugin funciona igual; al migrar, comprueba los casos en que combines el componente con una utilidad.
`theme()` en un plugin: valores, no variables	🔄 4.0	En la LTS (Tailwind 3.4) `theme('fontSize.2xl')` devuelve solo el tamaño. En 4.0 devuelve el par `[tamaño, { lineHeight }]`, y usarlo tal cual en una propiedad genera CSS roto.	Escribe `theme('fontSize.2xl.0')`, que devuelve `1.5rem` en las dos versiones.
17. `@config`: traer un `tailwind.config.js` a v4	🔄 4.0	En la LTS (Tailwind 3.4) el fichero `tailwind.config.js` se detecta solo y `@config` es opcional, solo necesario si tienes varios. En 4.0 el fichero se ignora si no lo cargas.	No hace falta hacer nada; `@config "./otra.config.js";` sirve para elegir otro fichero.

16 - Reutilización y componentes

Apartado	Versión	Qué ocurre	Si usas la LTS
3. Clases propias en `@layer components`	🔄 4.0	En la LTS (Tailwind 3.4), `@layer components` no es una capa nativa: Tailwind procesa esas clases, elimina las que no usas y les permite variantes como `hover:boton`. En v4 es una capa real de CSS: la clase se emite siempre y no admite variantes.	Usa `@layer components` igual, pero sustituye las variables del tema, que no existen en 3.4, por `@apply` o `theme('colors.indigo.600')`; ganarás variantes y eliminación de clases sin uso, y no necesitarás `@utility`.
`@apply` de tus propias clases	🔄 4.0	En la LTS (Tailwind 3.4), `@apply` admite cualquier clase definida en `@layer components`. En v4 solo admite utilidades, y falla con “Cannot apply unknown utility class”.	Puedes escribir `.aviso { @apply boton; }` directamente; en v4, define `boton` con `@utility`.
5. Componentes como utilidades con `@utility`	🆕 4.0	No disponible	Define la clase en `@layer components`, que en 3.4 ya admite variantes como `md:etiqueta` y puede usarse en `@apply`.
8. `tailwind-merge`: resolver conflictos	🔄 4.0	`tailwind-merge` 3 solo admite Tailwind 4 (hasta 4.3 en la versión 3.7.0) y la LTS (Tailwind 3.4) necesita la rama 2.	Instala `tailwind-merge@2`; la API `twMerge` es la misma, pero no entiende clases de v4 y configurar tus tokens se hace de otro modo (ver más abajo).
Configuración en la rama 2	🔄 4.0	En la LTS (Tailwind 3.4), `tailwind-merge` 2 no tiene la clave `theme.text`.	Registra tu tamaño en el grupo `font-size`, como en el código de esta sección; el resultado es el mismo que en la rama 3.
10. `tailwind-variants`: receta, slots y fusión	🔄 4.0	`tailwind-variants` 1 y posteriores están pensadas para Tailwind 4 (la versión 1.0 ya depende de `tailwind-merge` 3). En la LTS (Tailwind 3.4) corresponde la 0.3.1, que incluye `tailwind-merge` 2.5.4.	Instala `tailwind-variants@0.3`; `tv()`, slots y `extend` se usan igual, pero no hay entrada `/config` y `cn` funciona en dos pasos: `cn('px-2', 'px-4')({ twMerge: true })`.
La versión para Tailwind 3.4	🔄 4.0	En la LTS (Tailwind 3.4), `focus-visible:outline-2` solo fija el ancho: no pone `outline-style`, y el contorno no se vería.	Añade `focus-visible:outline` a la base de la receta; el resto compila igual, aunque los colores y `shadow-sm` cambian de valor.
Objetivos mayores en pantallas táctiles	🆕 4.1	No disponible	Usa una variante arbitraria, `[@media(pointer:coarse)]:min-h-11`, que da el mismo resultado.
Tokens con significado	🔄 4.0	En la LTS (Tailwind 3.4) no existe `@theme`.	Declara los mismos alias en `theme.extend.colors` de `tailwind.config.js`, por ejemplo `primario: '#4f46e5'`, y obtendrás las mismas clases.

17 - Formularios y tablas

Apartado	Versión	Qué ocurre	Si usas la LTS
Otros dos cambios de Preflight	🔄 4.0	En la LTS (Tailwind 3.4) el texto de ejemplo es `gray-400` y los botones llevan `cursor: pointer`; en 4.0 el texto de ejemplo es el color actual al 50 % y los botones usan `cursor: default`.	No necesitas `cursor-pointer` en los botones; en cualquier versión, fija el color con `placeholder:text-slate-400` para no depender de este valor.
Quitar el contorno sin quitar el foco	🔄 4.0	`outline-hidden` no existe en la LTS (Tailwind 3.4), y `outline-none` no significa lo mismo en las dos versiones.	Escribe `focus:outline-none`, que en 3.4 hace lo que `outline-hidden` hace en 4.x. El resto de las clases del campo es igual.
Tarjetas de opción	🔄 4.0	`has-checked:` no existe en la LTS (Tailwind 3.4).	Usa la forma arbitraria `has-[:checked]:`, que genera el mismo selector y sirve igual en las dos versiones. Lo mismo vale para `has-focus-visible:`, que pasa a ser `has-[:focus-visible]:`.
Instalación	🔄 4.0	En v4 el plugin se carga desde el CSS con `@plugin`.	Añádelo en `tailwind.config.js`, con `plugins: [require('@tailwindcss/forms')]`. Es el mismo paquete y funciona igual en las dos versiones.
Qué gana en el foco	🔄 4.0	En la LTS (Tailwind 3.4) el plugin escribe `input:where([type='text']):focus`, más específico que una utilidad, y el borde pasa a `blue-600` aunque hayas puesto `border-slate-300`. En 4.x el plugin vive en la capa `base`, y la utilidad gana siempre.	Añade `focus:border-indigo-500` y `focus:ring-indigo-500` en cada campo para no ver el azul.
7. `field-sizing-*`: el campo que crece con su contenido	🆕 4.0	No disponible	Escribe la propiedad arbitraria `[field-sizing:content]`, que genera el mismo CSS y hemos comprobado en 3.4.19. Otra opción, si el navegador no la admite, es ajustar la altura con JavaScript en el evento `input`.
`user-invalid:`, la solución	🆕 4.1	No disponible	Escribe la pseudoclase como variante arbitraria: `[&:user-invalid]:border-red-600`, y para los hermanos `peer-[:user-invalid]:block`. Generan el mismo CSS y están comprobadas en 3.4.19.
Errores que llegan del servidor	🔄 4.0	`aria-invalid:` no existe en la LTS (Tailwind 3.4).	Escribe `aria-[invalid=true]:border-red-600`, que funciona en las dos versiones.
Animar la apertura	🆕 4.0	: faltan `starting:` y `transition-discrete`, y `transition` no incluye `display` ni `overlay`.	Escribe `[@starting-style]:open:opacity-0`, `[transition-behavior:allow-discrete]` y `transition-[opacity,display,overlay]`, con `open:` igual que aquí. El bloque que sigue al ejemplo trae el código.
Variantes para `popover`	🔄 4.0	En la LTS (Tailwind 3.4) `open:` solo genera `[open]`, y un `popover` no tiene ese atributo.	Usa `[&:popover-open]:` en lugar de `open:`, por ejemplo `[&:popover-open]:flex`. Con `<dialog>` y `<details>`, `open:` funciona igual en las dos versiones.

18 - Tailwind en React, Angular y otros

Apartado	Versión	Qué ocurre	Si usas la LTS
Instalación	🔄 4.0	En la LTS (Tailwind 3.4) no existe `@tailwindcss/vite` ni `@import "tailwindcss"`.	Instala `tailwindcss@3.4.19 postcss autoprefixer`, crea `postcss.config.js` y `tailwind.config.js` con `content`, y escribe las tres directivas `@tailwind` en `src/index.css`. El código completo está en la sección 9.
La trampa también en Tailwind 3	🔄 4.0	En la LTS (Tailwind 3.4) `@layer` no genera capas nativas de CSS: Tailwind mueve las reglas de sitio y compiten por especificidad y orden.	Tu CSS suelto ya no gana siempre, pero un selector más específico, o una regla colocada después de `@tailwind utilities`, sí vencerá a una utilidad. Coloca tus reglas antes de esa directiva o en `@layer components`.
`@reference`	🔄 4.0	En la LTS (Tailwind 3.4) no existe `@reference` ni hace falta: `tailwind.config.js` es global, y `@apply` funciona en cualquier hoja procesada por PostCSS.	Escribe el CSS Module directamente, sin esa línea, y cambia el bloque `@variant hover` por `@apply hover:border-amber-500;`.
Variables del tema en un CSS escrito a mano	🔄 4.0	En la LTS (Tailwind 3.4) no existen `--theme()` ni las variables del tema.	Lee el valor con la función `theme()` y notación de puntos, por ejemplo `color: theme('colors.exclusiva');`.
Vue	🔄 4.0	En la LTS (Tailwind 3.4) no se usa `@tailwindcss/vite` ni `@reference`.	Usa `postcss.config.js`, `tailwind.config.js` con `content: ['./index.html', './src/*/.{ts,vue}']` y las directivas `@tailwind`; `@apply` funciona en `<style scoped>` sin ninguna línea extra.
Svelte	🔄 4.0	En la LTS (Tailwind 3.4) no se usa `@tailwindcss/vite` ni `@reference`.	Usa `postcss.config.js` y `tailwind.config.js` con `content: ['./index.html', './src/*/.{ts,svelte}']`. Lo hemos probado: `@apply` funciona en `<style>` sin preprocesador y sin `lang="postcss"`.
Solución 2: una variable CSS para valores continuos	🔄 4.0	En la LTS (Tailwind 3.4) no existe la sintaxis con paréntesis.	Usa corchetes, con `w-[--avance]` y `bg-[--tono]`, que generan `var(--avance)` y `var(--tono)`. No lleves esa forma a v4, donde `bg-[--marca]` compila a CSS no válido.
Solución 3: forzar clases con `@source inline`	🆕 4.1	No disponible	Añade `safelist` a `tailwind.config.js`, por ejemplo `safelist: [{ pattern: /^bg-violet-200$/ }]`. En Tailwind 4.0 no hay equivalente directo: escribe las clases en un fichero que Tailwind lea.
Instalación con el asistente de Angular	🔄 4.0	En la LTS (Tailwind 3.4) no hay `.postcssrc.json` ni `@tailwindcss/postcss`.	Instala `tailwindcss@3.4.19`, crea `tailwind.config.js` en la raíz con `content: ['./src/*/.{html,ts}']` y pon las directivas `@tailwind` en `src/styles.css`. Angular detecta ese fichero solo, sin configurar PostCSS. El asistente `--style=tailwind` instala la versión 4, así que no te sirve.
Instalación	🔄 4.0	En la LTS (Tailwind 3.4) el plugin de PostCSS es el propio paquete `tailwindcss`.	Instala `tailwindcss@3.4.19 postcss autoprefixer`, escribe `plugins: { tailwindcss: {}, autoprefixer: {} }` en `postcss.config.mjs`, crea `tailwind.config.js` con `content: ['./app/*/.{ts,tsx}']` y pon las directivas `@tailwind` en `app/globals.css`.
`@theme inline` con `next/font`	🔄 4.0	En la LTS (Tailwind 3.4) no existe `@theme`.	En `tailwind.config.js` escribe `theme: { extend: { fontFamily: { sans: ['var(--font-inter)'] } } }`, que genera `.font-sans { font-family: var(--font-inter) }`.
React, Vue y Svelte con Vite	🔄 4.0	En la LTS (Tailwind 3.4) Vite carga Tailwind a través de PostCSS, no con un plugin propio.	Crea los tres ficheros de este apartado y quita `@tailwindcss/vite` de `vite.config.ts`.
Angular	🔄 4.0	En la LTS (Tailwind 3.4) Angular activa Tailwind por sí solo si encuentra `tailwind.config.js`.	No crees `.postcssrc.json`, porque si existe, Angular omite esa detección automática.
Next.js	🔄 4.0	En la LTS (Tailwind 3.4) se usa el plugin `tailwindcss` en PostCSS.	Usa estos tres ficheros y `app/globals.css` con las directivas `@tailwind`.
`@tailwindcss/webpack`	🆕 4.2	No disponible	Usa `postcss-loader` con `plugins: [require('tailwindcss'), require('autoprefixer')]` en `postcss.config.js`, `content` en `tailwind.config.js` y las directivas `@tailwind`. En Tailwind 4.0 y 4.1 usa `postcss-loader` con `@tailwindcss/postcss`.
Configuración de Prettier	🔄 4.0	En la LTS (Tailwind 3.4) el plugin lee la configuración de JavaScript.	Quita `tailwindStylesheet` y, si hace falta, añade `"tailwindConfig": "./tailwind.config.js"`; `tailwindFunctions` funciona igual. Lo hemos probado con la versión 0.8.1 del plugin.

19 - Migración de v3 a v4

Apartado	Versión	Qué ocurre	Si usas la LTS
Todo el módulo	🔄 4.0	Todo este módulo trata del paso de la LTS (Tailwind 3.4) a v4, y en la LTS no hay nada que migrar.	Lee la sección 1 para confirmar que quedarte es la decisión correcta y usa la sección 12 como lista de lo que te encontrarás el día que migres; empezar hoy a escribir `bg-black/50` y `gap-*`, y evitar dos clases rivales en un mismo elemento, abarata ese día.

20 - Producción y rendimiento

Apartado	Versión	Qué ocurre	Si usas la LTS
Por qué v4 pesa más que v3 en esta página	🔄 4.0	En la LTS (Tailwind 3.4) los valores del tema se escriben directamente en cada regla y hay menos código de compatibilidad, por lo que una página pequeña pesa algo menos.	No tienes que hacer nada; la tienda pesa 2995 bytes en Brotli frente a 4025 en v4, a cambio de no tener variables del tema en tiempo de ejecución.
Las variables del tema solo aparecen si se usan	🔄 4.0	En la LTS (Tailwind 3.4) el tema no genera variables CSS.	No existe este coste, y tampoco el acceso a los valores desde `var()`; usa la función `theme()` en tu CSS o declara a mano las variables que necesites en `:root`.
Las opciones de la CLI	🔄 4.0	En la LTS (Tailwind 3.4) la CLI tiene `--minify` pero no `--optimize`, y minifica con cssnano en lugar de Lightning CSS.	Usa `npx tailwindcss -i entrada.css -o salida.css --minify`, o añade `cssnano` a tu configuración de PostCSS.
En Vite	🔄 4.0	En la LTS (Tailwind 3.4) no existe `@tailwindcss/vite`: Tailwind se usa como plugin de PostCSS.	Vite minifica igualmente el CSS al hacer `vite build`, y no hay que configurar nada.
Elegir la base con `source()`	🔄 4.0	En la LTS (Tailwind 3.4) no hay detección automática: solo se escanea lo que indiques en `content`, dentro de `tailwind.config.js`.	Escribe `content: ['./src/*/.{html,js,jsx}']`; ese error de escanear de más solo te ocurre si pones un patrón demasiado amplio.
Excluir rutas con `@source not`	🆕 4.1	No disponible	Añade un patrón negativo a `content`: `content: ['./src/*/.html', '!./src/legado/**']`, comprobado en 3.4.19.
Forzar y prohibir clases con `@source inline()`	🆕 4.1	No disponible	Usa `safelist` y `blocklist` en la configuración: `safelist: ['underline', { pattern: /^bg-red-(100\\|200\\|300)$/, variants: ['hover'] }], blocklist: ['hidden']`, comprobado en 3.4.19.
8. Compatibilidad y alternativas	🔄 4.0	En la LTS (Tailwind 3.4) el CSS funciona en navegadores mucho más antiguos, porque no usa `@layer` nativo ni depende de `@property` ni de `color-mix()`.	No tienes que hacer nada; esta es la razón principal para quedarse en 3.4.
El foco: `outline-none` y `outline-hidden`	🔄 4.0	En la LTS (Tailwind 3.4) la clase `outline-none` genera lo que en v4 es `outline-hidden`, y `outline-hidden` no existe.	Escribe `outline-none`, que en v3 ya hace que el contorno reaparezca en los colores forzados, y añade tu propio `focus-visible:`.
Tamaño de los objetivos táctiles	🆕 4.1	No disponible	Usa una variante arbitraria: `[@media(pointer:coarse)]:size-11`, comprobada en 3.4.19.
Cerrar la paleta	🔄 4.0	En la LTS (Tailwind 3.4) el tema se limita en `tailwind.config.js`.	Define `theme: { colors: { marca: { 600: '#4f46e5' } }, borderRadius: { tarjeta: '0.75rem' } }` directamente bajo `theme`, sin `extend`, y el resto de valores desaparecerá.
Una hoja por aplicación	🔄 4.0	En la LTS (Tailwind 3.4) no hay `source(none)` ni `@import` de temas.	Crea un `tailwind.config.js` por aplicación, comparte el tema con `presets: [tema]` y elige la configuración con `@config "./panel.config.js";` en cada hoja. Probado en 3.4.19.

21 - Proyecto final

Apartado	Versión	Qué ocurre	Si usas la LTS
Todo el módulo	🔄 4.0	Todo este proyecto se configura con `@theme`, `@custom-variant` y `@utility`, que no existen en la LTS (Tailwind 3.4).	En la sección 12 tienes el proyecto portado y compilado de verdad con 3.4.19, con su `tailwind.config.js` y la lista completa de clases que hay que sustituir.
Colores de marca con `@theme`	🔄 4.0	En la LTS (Tailwind 3.4) el tema se define en `tailwind.config.js`.	Pasa cada color a `theme.extend.colors` en hexadecimal, porque en 3.4 un color `oklch()` del tema no admite modificadores como `/30`. Los valores están en la sección 12.
Tokens semánticos con `@theme inline`	🔄 4.0	`@theme inline` no existe en la LTS (Tailwind 3.4).	Declara `papel: 'var(--papel)'` en `theme.extend.colors`. Funciona, pero `bg-papel/85` deja de generarse sin aviso; usa `rgb(var(--papel) / <alpha-value>)` con la variable en tres números.
Modo oscuro con `@custom-variant`	🔄 4.0	`@custom-variant` no existe en la LTS (Tailwind 3.4).	Añade `darkMode: 'selector'` a `tailwind.config.js`; las clases `dark:` se escriben igual.
Una utilidad propia con `@utility`	🔄 4.0	`@utility` no existe en la LTS (Tailwind 3.4).	Escribe `.pagina { @apply ...; }` dentro de `@layer components`; `@apply` funciona igual.
La tarjeta responde a su contenedor	🆕 4.0	No disponible	Instala `@tailwindcss/container-queries` y añádelo a `plugins`. `@container` y `@md:` se escriben igual, pero `@3xs:` no existe en el plugin: usa `@[16rem]:`.
El atributo `hidden` y Preflight	🔄 4.0	En la LTS (Tailwind 3.4), el atributo `hidden` no lleva `!important` en Preflight, así que `flex` o `grid` lo vencen.	Añade `[&[hidden]]:hidden` a `#menu-movil` y `#contador-carrito`, o el menú quedará siempre abierto.
Degradados	🔄 4.0	En la LTS (Tailwind 3.4), `bg-linear-to-br` se llama `bg-gradient-to-br`.	Renómbrala; `from-`, `via-` y `to-*` no cambian.
Sombra de texto	🆕 4.1	No disponible	Usa un valor arbitrario como `[text-shadow:0_1px_2px_rgb(0_0_0/0.25)]`; el resultado es parecido, no idéntico.
Fondo de puntos con máscara	🆕 4.1	`mask-b-from-*` no existe en la LTS (Tailwind 3.4), y `bg-size-[...]` tampoco.	Escribe `[mask-image:linear-gradient(to_bottom,black_20%,transparent)]` y `bg-[length:1.5rem_1.5rem]`.
Píldoras con `has-checked:`	🔄 4.0	`has-*` existe en la LTS (Tailwind 3.4), pero sin el atajo.	Escribe `has-[:checked]:bg-marca-600` y `has-[:focus-visible]:outline-2`.
Validación con `user-invalid:`	🆕 4.1	No disponible	Usa la variante arbitraria `[&:user-invalid]:border-rose-500`, que compila igual; con `invalid:` el campo saldría en rojo antes de que el usuario lo toque.
Diálogo con entrada animada	🆕 4.0	`starting:` no existe en la LTS (Tailwind 3.4).	Quita las clases `starting:open:*`. No hay equivalente sencillo: el diálogo aparecerá sin transición, aunque seguirá funcionando igual.
Barra de navegación con `scrollbar-none`	🆕 4.3	`scrollbar-none`, `scrollbar-thin` y `scrollbar-thumb-*` no existen en la LTS (Tailwind 3.4).	Escribe `[scrollbar-width:none]` y `[scrollbar-width:thin]`. Para el color, usa `[scrollbar-color:#a4b2fb_transparent]`.
Variantes de hijos y su orden	🔄 4.0	`:hover:bg-hueco` existe en la LTS (Tailwind 3.4), pero compila al revés: `.clase:hover > ` pinta todos los enlaces al pasar por encima de la barra.	Escribe `[&>*:hover]:bg-hueco`.
Gráfico de columnas con una variable CSS	🔄 4.0	La sintaxis `h-(--alto)` no existe en la LTS (Tailwind 3.4).	Escribe `h-[var(--alto)]` y `w-[var(--valor)]`. El mecanismo es el mismo.
Anillo con `conic-gradient`	🔄 4.0	`bg-(image:--reparto)` no existe en la LTS (Tailwind 3.4), y tampoco las variables `--color-*` del tema.	Escribe `bg-[image:var(--reparto)]` y pon colores hexadecimales en `estados`, o el anillo no se pintará.