Hoy anunciamos la próxima versión del plugin Tailwind CSS Typography, que trae soporte fácil para dark mode, una API de personalización totalmente nueva y la clase not-prose que no estaba seguro de que alguna vez descubriríamos cómo soportar.
Para un recorrido completo de todo lo nuevo, mira el video oficial de lanzamiento en nuestro canal de YouTube.
Tailwind CSS Typography v0.5 está diseñado para Tailwind CSS v3.0, así que asegúrate de tener la última versión de Tailwind, luego instala la nueva versión del plugin desde npm:
npm install -D @tailwindcss/typography@latestPara aprender más sobre todo lo que ofrece el plugin, consulta nuestra documentación actualizada del plugin typography.
Soporte fácil para dark mode
Hemos añadido una clase prose-invert que puedes usar para intercambiar fácilmente los colores de tu tipografía en dark mode:
<body class="bg-white dark:bg-gray-900"> <article class="prose dark:prose-invert">{{ markdown }}</article></body>Los temas oscuros están hechos a mano por nuestro equipo de diseño experto y se adaptan automáticamente a cualquier escala de grises que estés utilizando.
Elige tu escala de grises
Tailwind CSS v3.0 incluye cinco conjuntos diferentes de grises por defecto, y el plugin de tipografía actualizado incluye clases para cada uno, lo que facilita la combinación de tu tipografía con el resto de tu sitio:
<article class="prose prose-slate">{{ markdown }}</article>También hemos simplificado la forma en que definimos los temas de color internamente, lo que facilita añadir los tuyos propios si es necesario.
Consulta la documentación para obtener más información.
API de personalización basada en HTML
Hemos añadido toneladas de modificadores que puedes usar para ajustar elementos específicos en tus estilos de prosa, directamente en tu HTML:
<article class="prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600"> {{ markdown }}</article>Esto facilita hacer cosas como estilizar enlaces para que coincidan con tu marca, añadir un border radius a las imágenes y mucho más.
Consulta la documentación de modificadores de elementos para obtener más información.
Deshacer estilos de prosa
¿Alguna vez has necesitado meter algo de HTML que no es contenido en medio de tu contenido? Ahora puedes envolverlo con not-prose para asegurarte de que los estilos de prosa no interfieran con él:
<article class="prose"> <h1>Mi encabezado</h1> <p>...</p> <div class="not-prose"> <!-- Algún HTML que necesita estar libre de prosa --> </div> <p>...</p> <!-- ... --></article>¿Listo para probarlo? Consulta la documentación del plugin typography para obtener más información y empezar.