Hasta ahora, intentar dar estilo a un artículo, documento o entrada de blog con Tailwind ha sido una tarea tediosa que requería un buen ojo para la tipografía y mucho CSS personalizado complejo.
Por defecto, Tailwind elimina todo el estilo predeterminado del navegador de párrafos, encabezados, listas y más. Esto termina siendo muy útil para construir interfaces de usuario de aplicaciones porque pasas menos tiempo deshaciendo los estilos del user-agent, pero cuando realmente solo intentas dar estilo a algún contenido que proviene de un editor de texto enriquecido en un CMS o un archivo markdown, puede ser sorprendente y poco intuitivo.
De hecho, recibimos muchas quejas al respecto, con gente preguntándonos regularmente cosas como:
¿Por qué Tailwind está eliminando los estilos predeterminados en mis elementos
h1? ¿Cómo desactivo esto? ¿Qué quieres decir con que también pierdo todos los demás estilos base?
Te escuchamos, pero no estamos convencidos de que simplemente deshabilitar nuestros estilos base sea lo que realmente quieres. No quieres tener que eliminar márgenes molestos cada vez que usas un elemento p en una parte de tu interfaz de usuario del dashboard. Y dudo que realmente quieras que las entradas de tu blog usen los estilos del user-agent tampoco — quieres que se vean geniales, no horribles.
Por eso hoy estamos emocionados de lanzar @tailwindcss/typography, un plugin que te da lo que realmente quieres, sin ninguna de las desventajas de hacer algo estúpido como deshabilitar nuestros estilos base.
Agrega un nuevo conjunto de clases prose que puedes aplicar a cualquier bloque de contenido HTML vanilla y convertirlo en un documento hermoso y bien formateado:
<article class="prose lg:prose-xl"> <h1>Garlic bread with cheese: What the science tells us</h1> <p> For years parents have espoused the health benefits of eating garlic bread with cheese to their children, with the food earning such an iconic status in our culture that kids will often dress up as warm, cheesy loaf for Halloween. </p> <p> But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases springing up around the country. </p> <!-- ... --></article>¿Y cómo se ve realmente? Bueno, lo estás viendo ahora mismo: ¡lo usamos para dar estilo al contenido de este mismo blog!
Revisa la documentación para aprender más y probarlo hoy.
¿Quieres hablar sobre esta publicación? Discútelo en GitHub →