Tailwind CSS v3.3: Paleta de colores extendida, soporte ESM/TS, propiedades lógicas y más

npm install -D tailwindcss@latest

npx tailwindcss init --esm

npx tailwindcss init --ts

<div class="bg-gradient-to-r from-cyan-400 from-[21.56%] ...">
  <!-- ... -->
</div>

module.exports = {
  // ...
  plugins: [\n    require('@tailwindcss/line-clamp') //\n  ]\n}

<p class="text-lg leading-7 ...\">
<p class="text-lg/7 ...\">\n  Así que empecé a caminar hacia el agua. No les mentiré chicos, estaba aterrorizado. Pero seguí adelante, y mientras pasaba las rompientes una extraña calma me invadió. No sé si fue intervención divina o la hermandad de todos los seres vivos pero te digo Jerry en ese momento, I <em>era</em> un biólogo marino.\n</p>\n```\n\nPuedes usar cualquier valor definido en tu [escala de line-height](https://v3.tailwindcss.com/docs/line-height), o usar valores arbitrarios si necesitas desviarte de tus tokens de diseño:\n\n```html\n<!--] -->\n<p class=\"text-sm/[17px] ...\"></p>\n```\n\nEcha un vistazo a la [documentación de font size](https://v3.tailwindcss.com/docs/font-size#setting-the-line-height) para algunos ejemplos más.\n\n---\n\n## Variables CSS sin el `var()`\n\nCon el espíritu de escribir menos, también hemos hecho posible omitir el `var()` al usar una variable CSS como un valor arbitrario:\n\n```js\n// [!code filename:my-component.jsx]\nexport function MyComponent({ company }) {\n  return (\n    <div\n      style={{\n        \"--brand-color\": company.brandColor,\n        \"--brand-hover-color\": company.brandHoverColor,\n      }}\n      className=\"bg-[var(--brand-color)] hover:bg-[var(--brand-hover-color)]\" // [!code --]\n      className=\"bg-(--brand-color) hover:bg-(--brand-hover-color)\" // [!code ++]\n    />\n  );\n}\n```\n\nEse es un truco bastante genial para usar cosas como `hover:` con estilos que provienen de la base de datos o algo así, por cierto.\n\n---\n\n## Configurar `font-variation-settings` para familias de fuentes personalizadas\n\nAl usar fuentes personalizada, a menudo querrás configurar cosas como `font-feature-settings` o `font-variation-settings` para optar por ajustes específicos que ofrece la fuente.\n\nHemos facilitado hacer esto para `font-feature-settings` durante un tiempo, pero ahora puedes hacer lo mismo con `font-variation-settings` proporcionando un valor para ello en el objeto de opciones que puedes colocar después de la lista de fuentes en tu archivo de configuración:\n\n```js\n// [!code filename:tailwind.config.js]\nmodule.exports = {\n  theme: {\n    fontFamily: {\n      sans: [\n        \"Inter var, sans-serif\"\n        // [!code highlight:5]\n        {\n          fontFeatureSettings: '\"cv11\", \"ss01\"',\n          fontVariationSettings: '\"opsz\" 32',\n        },\n      ],\n    },\n  },\n};\n```\n\nEn el ejemplo anterior estamos usando una versión reciente de [Inter](https://github.com/rsms/inter/releases/tag/v4.0-beta7) que admite el uso del eje de tamaño óptico para activar la variación \"Display\" de la fuente, optimizada para tamaños más grandes como titulares.\n\n---\n\n## Nuevas utilidades `list-style-image`\n\n¿Alguna vez quisiste usar una imagen de una zanahoria como marcador de elemento de lista? Bueno, ahora puedes, con las nuevas utilidades `list-image-*`.\n\n<Figure>\n\n<Example padding={false}>\n  {\n    <div className=\"px-4 sm:px-0\">\n      <div className=\"mx-auto max-w-sm bg-white p-8 text-sm leading-6 text-slate-700 shadow-xl sm:text-base sm:leading-7 dark:bg-slate-800 dark:text-slate-400\">\n        <ul className=\"list-image-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBmaWxsPSIjZjk3MzE2Ij48cGF0aCBkPSJNMzQ2LjcgNkMzMzcuNiAxNyAzMjAgNDIuMyAzMjAgNzJjMCA0MCAxNS4zIDU1LjMgNDAgODBzNDAgNDAgODAgNDBjMjkuNyAwIDU1LTE3LjYgNjYtMjYuN2M0LTMuMyA2LTguMiA2LTEzLjNzLTItMTAtNi0xMy4yYy0xMS40LTkuMS0zOC4zLTI2LjgtNzQtMjYuOGMtMzIgMC00MCA4LTQwIDhzOC04IDgtNDBjMC0zNS43LTE3LjctNjIuNi0yNi44LTc0QzM3MCAyIDM2NS4xIDAgMzYwIDBzLTEwIDItMTMuMyA2ek0yNDQuNiAxMzZjLTQwIDAtNzcuMSAxOC4xLTEwMS43IDQ4LjJsNjAuNSA2MC41YzYuMiA2LjIgNi4yIDE2LjQgMCAyMi42cy0xNi40IDYuMi0yMi42IDBsLTU1LjMtNTUuMyAwIC4xTDIuMiA0NzcuOUMtMiA0ODctLjEgNDk3LjggNyA1MDVzMTcuOSA5IDI3LjEgNC44bDEzNC43LTYyLjQtNTIuMS01Mi4xYy02LjItNi4yLTYuMi0xNi40IDAtMjIuNnMxNi40LTYuMiAyMi42IDBMMTk5LjcgNDMzbDEwMC4yLTQ2LjRjNDYuNC0yMS41IDc2LjItNjggNzYuMi0xMTkuMkMzNzYgMTk0LjggMzE3LjIgMTM2IDI0NC42IDEzNnoiLz48L3N2Zz4=')] pl-4 text-slate-900 marker:text-2xl dark:text-slate-200\">\n          <li className=\"pl-2\">5 tazas de champiñones Porcini picados</li>\n          <li className=\"pl-2\">1/2 taza de aceite de oliva</li>\n          <li className=\"pl-2\">3 libras de apio</li>\n        </ul>\n      </div>\n    </div>\n  }\n</Example>\n\n```html\n<!--] -->\n<ul class=\"list-image-[url(/carrot.png)] ...\">\n  <li>5 tazas de champiñones Porcini picados</li>\n  <!-- ... -->\n</ul>\n```\n\n</Figure>\n\nNo vamos a empezar a enviar clip art de vegetales con el framework, pero puedes usar cualquier imagen que quieras ya sea como un valor arbitrario o configurándola en la sección `listStyleImage` de tu tema.\n\nEcha un vistazo a la [documentación de list style image](https://v3.tailwindcss.com/docs/list-style-image) para aprender más.\n\n---\n\n## Nuevas utilidades `hyphens`\n\n¿Alguna vez has oído hablar de la entidad HTML `&shy;`? Yo tampoco hasta que agregamos soporte para estas utilidades `hyphens-*`.\n\nUsando `hyphens-manual` y un `&shy;` cuidadosamente colocado, puedes decirle al navegador dónde insertar un guion cuando necesite dividir una palabra en varias líneas:\n\n<Figure>\n\n<Example padding={false}>\n  {\n    <div className=\"overflow-x-scroll px-4 sm:overflow-x-visible\">\n      <div className=\"mx-auto max-w-xs bg-white p-12 text-slate-500 shadow-xl dark:bg-slate-800 dark:text-slate-400\">\n        <p className=\"hyphens-manual\">\n          <>Reconocida oficialmente por el diccionario Duden como la palabra más larga en alemán, </>\n          <span className=\"font-medium text-slate-900 dark:text-slate-200\" lang=\"de\">\n            <>Kraftfahrzeug&shy;haftpflichtversicherung</>\n          </span>\n          <> es una palabra de 36 letras para seguro de responsabilidad civil de vehículos motorizados.</>\n        </p>\n      </div>\n    </div>\n  }\n</Example>\n\n```html\n\n\n<p class=\"hyphens-manual ...\">... Kraftfahrzeug&shy;haftpflichtversicherung es una ...</p>\n```\n\n</Figure>\n\nTal vez un fragmento de código como este sería útil para incluir como parte del kit de prensa de tu banda de death metal impronunciable para que los periodistas no arruinen la separación silábica en el artículo que finalmente te lanza a la fama.\n\nEcha un vistazo a la [documentación de hyphens](https://v3.tailwindcss.com/docs/hyphens) para aprender más.\n\n---\n\n## Nuevas utilidades `caption-side`\n\nOtra novedad para mí — ¡el elemento `<caption>`! Tenemos nuevas utilidades `caption-*` que puedes usar en los títulos de las tablas para controlar si aparecen en la parte superior o inferior de la tabla a la que están adjuntos.\n\n<Figure>\n\n<Example padding={false}>\n  {\n    <div className=\"overflow-hidden px-4 py-8 shadow-sm sm:px-8\">\n      <table className=\"w-full table-auto border-collapse text-sm\">\n        <caption className=\"caption-bottom pt-4 text-xs text-slate-500 dark:text-slate-400\">\n          <>Tabla 3.1: Luchadores profesionales y sus movimientos característicos.</>\n        </caption>\n        <thead>\n          <tr>\n            <th className=\"border border-slate-200 p-4 pt-3 pb-3 pl-8 text-left font-medium text-slate-400 dark:border-slate-600 dark:text-slate-200\">\n              <>Luchador</>\n            </th>\n            <th className=\"border border-slate-200 p-4 pt-3 pr-8 pb-3 text-left font-medium text-slate-400 dark:border-slate-600 dark:text-slate-200\">\n              <>Movimiento(s) característico(s)</>\n            </th>\n          </tr>\n        </thead>\n        <tbody className=\"bg-white dark:bg-slate-800\">\n          <tr>\n            <td className=\"border border-slate-200 p-4 pl-8 text-slate-500 dark:border-slate-600 dark:text-slate-400\">\n              <>\"Stone Cold\" Steve Austin</>\n            </td>\n            <td className=\"border border-slate-200 p-4 pr-8 text-slate-500 dark:border-slate-600 dark:text-slate-400\">\n              <>Stone Cold Stunner, Lou Thesz Press</>\n            </td>\n          </tr>\n          <tr>\n            <td className=\"border border-slate-200 p-4 pl-8 text-slate-500 dark:border-slate-600 dark:text-slate-400\">\n              <>Bret \"The Hitman\" Hart</>\n            </td>\n            <td className=\"border border-slate-200 p-4 pr-8 text-slate-500 dark:border-slate-600 dark:text-slate-400\">\n              <>The Sharpshooter</>\n            </td>\n          </tr>\n          <tr>\n            <td className=\"border border-slate-200 p-4 pl-8 text-slate-500 dark:border-slate-600 dark:text-slate-400\">\n              <>Razor Ramon</>\n            </td>\n            <td className=\"border border-slate-200 p-4 pr-8 text-slate-500 dark:border-slate-600 dark:text-slate-400\">\n              <>Razor's Edge, Fallaway Slam</>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  }\n</Example>\n\n```html\n\n<table>\n  <caption class=\"caption-bottom\">\n    Tabla 3.1: Luchadores profesionales y sus movimientos característicos.\n  </caption>\n  <thead>\n    <tr>\n      <th>Luchador</th>\n      <th>Movimiento(s) característico(s)</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>\"Stone Cold\" Steve Austin</td>\n      <td>Stone Cold Stunner, Lou Thesz Press</td>\n    </tr>\n    <tr>\n      <td>Bret \"The Hitman\" Hart</td>\n      <td>The Sharpshooter</td>\n    </tr>\n    <tr>\n      <td>Razor Ramon</td>\n      <td>Razor's Edge, Fallaway Slam</td>\n    </tr>\n  </tbody>\n</table>\n```\n\n</Figure>\n\nEcha un vistazo a la [documentación de caption side](https://v3.tailwindcss.com/docs/caption-side) para algunos ejemplos más.\n\n---\n\n¡Así que eso es Tailwind CSS v3.3! Sin cambios disruptivos, solo un montón de cosas nuevas divertidas. Pruébalo en tus proyectos hoy actualizando a la última versión con npm:\n\n```sh\nnpm install -D tailwindcss@latest\n```\n\nSí, otro lanzamiento sin utilidades `text-shadow`. ¿Recuerdas ese episodio de Seinfeld donde Kramer intenta ver qué tan lejos puede conducir sin parar a repostar? Ese es mi episodio favorito.