Descarga tailwindcss typography - tailwindcss typography Descarga del código fuente

El complemento oficial de tipografía CSS Tailwind proporciona un conjunto de clases prose que puede usar para agregar hermosos valores predeterminados tipográficos a cualquier HTML básico que no controle, como HTML renderizado desde Markdown o extraído de un CMS.

 < article class =" prose lg:prose-xl " > {{ markdown }} </ article >

Para ver cómo se ve en acción, consulte nuestra demostración en vivo en Tailwind Play.

Instalación

Instale el complemento desde npm:

npm install -D @tailwindcss/typography

Luego agregue el complemento a su archivo tailwind.config.js :

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    // ...
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    // ...
  ] ,
}

Uso básico

Ahora puedes usar las clases prose para agregar estilos de tipografía sensibles a cualquier HTML básico:

 < 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 >

Elegir una escala de grises

Este complemento incluye una clase modificadora para cada una de las cinco escalas de grises que Tailwind incluye de forma predeterminada para que puedas diseñar fácilmente tu contenido para que coincida con los grises que estás usando en tu proyecto.

 < article class =" prose prose-slate " > {{ markdown }} </ article >

Estas son las clases que se generan utilizando una compilación Tailwind CSS v2.0 totalmente predeterminada:

Clase	escala de grises
`prose-gray` (predeterminado)	Gris
`prose-slate`	Pizarra
`prose-zinc`	Zinc
`prose-neutral`	Neutral
`prose-stone`	Piedra

Las clases de modificador están diseñadas para usarse con el patrón de modificador de clases múltiples y deben usarse junto con la clase prose base.

Nota

Incluya siempre la clase prose al agregar un modificador de escala de grises

 < article class =" prose prose-stone " > {{ markdown }} </ article >

Para obtener información sobre cómo crear sus propios temas de color, lea la documentación sobre cómo agregar temas de color personalizados.

Aplicar una escala de tipos

Los modificadores de tamaño te permiten ajustar el tamaño general de tu tipografía para diferentes contextos.

 < article class =" prose prose-xl " > {{ markdown }} </ article >

Se incluyen cinco tamaños de tipografía diferentes de fábrica:

Clase	Tamaño de fuente del cuerpo
`prose-sm`	0,875 rem (14 píxeles)
`prose-base` (predeterminado)	1rem (16px)
`prose-lg`	1.125rem (18px)
`prose-xl`	1,25 rem (20 píxeles)
`prose-2xl`	1,5 rem (24 px)

Estos se pueden usar en combinación con los modificadores de punto de interrupción de Tailwind para cambiar el tamaño de fuente general de una parte del contenido en diferentes tamaños de ventana gráfica:

 < article class =" prose md:prose-lg lg:prose-xl " > {{ markdown }} </ article >

Todo lo relacionado con los modificadores de tamaño proporcionados ha sido ajustado a mano por diseñadores profesionales para que luzca lo más hermoso posible, incluidas las relaciones entre los tamaños de fuente, el espaciado de los encabezados, el relleno del bloque de código y más.

Los modificadores de tamaño están diseñados para usarse con el patrón de modificador de clases múltiples y deben usarse junto con la clase prose base.

Nota

Incluya siempre la clase prose al agregar un modificador de tamaño

 < article class =" prose prose-lg " > {{ markdown }} </ article >

Para obtener información sobre cómo personalizar las escalas de tipos incluidas, lea la documentación sobre cómo personalizar el CSS.

Adaptándose al modo oscuro

Cada tema de color predeterminado incluye una versión en modo oscuro diseñada a mano que puedes activar agregando la clase prose-invert :

 < article class =" prose dark:prose-invert " > {{ markdown }} </ article >

Para obtener información sobre cómo crear sus propios temas de color, lea la documentación sobre cómo agregar temas de color personalizados.

Modificadores de elementos

Utilice modificadores de elementos para personalizar el estilo de elementos individuales en su contenido directamente en su HTML:

 < article class =" prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600 " >
  {{ markdown }}
</ article >

Esto facilita hacer cosas como diseñar enlaces para que coincidan con su marca, agregar un radio de borde a las imágenes y mucho más.

Aquí hay una lista completa de modificadores de elementos disponibles:

Modificador	Objetivo
`prose-headings:{utility}`	`h1` , `h2` , `h3` , `h4` , `th`
`prose-lead:{utility}`	`[class~="lead"]`
`prose-h1:{utility}`	`h1`
`prose-h2:{utility}`	`h2`
`prose-h3:{utility}`	`h3`
`prose-h4:{utility}`	`h4`
`prose-p:{utility}`	`p`
`prose-a:{utility}`	`a`
`prose-blockquote:{utility}`	`blockquote`
`prose-figure:{utility}`	`figure`
`prose-figcaption:{utility}`	`figcaption`
`prose-strong:{utility}`	`strong`
`prose-em:{utility}`	`em`
`prose-kbd:{utility}`	`kbd`
`prose-code:{utility}`	`code`
`prose-pre:{utility}`	`pre`
`prose-ol:{utility}`	`ol`
`prose-ul:{utility}`	`ul`
`prose-li:{utility}`	`li`
`prose-table:{utility}`	`table`
`prose-thead:{utility}`	`thead`
`prose-tr:{utility}`	`tr`
`prose-th:{utility}`	`th`
`prose-td:{utility}`	`td`
`prose-img:{utility}`	`img`
`prose-video:{utility}`	`video`
`prose-hr:{utility}`	`hr`

Al combinar estos modificadores con otros modificadores como hover , lo más probable es que quieras que el otro modificador esté primero:

 < article class =" prose prose-a:text-blue-600 hover:prose-a:text-blue-500 " > {{ markdown }} </ article >

Lea la documentación de Tailwind CSS sobre cómo ordenar modificadores apilados para obtener más información.

Anulación del ancho máximo

Cada modificador de tamaño viene con un max-width integrado diseñado para mantener el contenido lo más legible posible. Sin embargo, esto no siempre es lo que desea y, a veces, querrá que el contenido solo ocupe el ancho de su contenedor.

En esos casos, todo lo que necesitas hacer es agregar max-w-none a tu contenido para anular el ancho máximo incrustado:

 < div class =" grid grid-cols-4 " >
  < div class =" col-span-1 " >
    <!-- ... -->
  </ div >
  < div class =" col-span-3 " >
    < article class =" prose max-w-none " > {{ markdown }} </ article >
  </ div >
</ div >

Temas avanzados

Deshacer estilos de tipografía

Si tiene un bloque de marcado incrustado en algún contenido que no debería heredar los estilos prose , use la clase not-prose para aislarlo:

 < article class =" prose " >
  < h1 > My Heading </ h1 >
  < p > ... </ p >

  < div class =" not-prose " >
    <!-- Some example or demo that needs to be prose-free -->
  </ div >

  < p > ... </ p >
  <!-- ... -->
</ article >

Tenga en cuenta que no puede anidar nuevas instancias prose dentro de un bloque not-prose en este momento.

Agregar temas de colores personalizados

Puedes crear tu propio tema de color agregando una nueva clave en la sección de typography de tu archivo tailwind.config.js y proporcionando tus colores bajo la clave css :

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    extend : {
      typography : ( { theme } ) => ( {
        pink : {
          css : {
            '--tw-prose-body' : theme ( 'colors.pink[800]' ) ,
            '--tw-prose-headings' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-lead' : theme ( 'colors.pink[700]' ) ,
            '--tw-prose-links' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-bold' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-counters' : theme ( 'colors.pink[600]' ) ,
            '--tw-prose-bullets' : theme ( 'colors.pink[400]' ) ,
            '--tw-prose-hr' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-quotes' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-quote-borders' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-captions' : theme ( 'colors.pink[700]' ) ,
            '--tw-prose-code' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-pre-code' : theme ( 'colors.pink[100]' ) ,
            '--tw-prose-pre-bg' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-th-borders' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-td-borders' : theme ( 'colors.pink[200]' ) ,
            '--tw-prose-invert-body' : theme ( 'colors.pink[200]' ) ,
            '--tw-prose-invert-headings' : theme ( 'colors.white' ) ,
            '--tw-prose-invert-lead' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-invert-links' : theme ( 'colors.white' ) ,
            '--tw-prose-invert-bold' : theme ( 'colors.white' ) ,
            '--tw-prose-invert-counters' : theme ( 'colors.pink[400]' ) ,
            '--tw-prose-invert-bullets' : theme ( 'colors.pink[600]' ) ,
            '--tw-prose-invert-hr' : theme ( 'colors.pink[700]' ) ,
            '--tw-prose-invert-quotes' : theme ( 'colors.pink[100]' ) ,
            '--tw-prose-invert-quote-borders' : theme ( 'colors.pink[700]' ) ,
            '--tw-prose-invert-captions' : theme ( 'colors.pink[400]' ) ,
            '--tw-prose-invert-code' : theme ( 'colors.white' ) ,
            '--tw-prose-invert-pre-code' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-invert-pre-bg' : 'rgb(0 0 0 / 50%)' ,
            '--tw-prose-invert-th-borders' : theme ( 'colors.pink[600]' ) ,
            '--tw-prose-invert-td-borders' : theme ( 'colors.pink[700]' ) ,
          } ,
        } ,
      } ) ,
    } ,
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    // ...
  ] ,
}

Consulte nuestras definiciones de estilos internos para ver más ejemplos.

Cambiar el nombre de clase predeterminado

Si necesita utilizar un nombre de clase que no sea prose por algún motivo, puede hacerlo utilizando la opción className al registrar el complemento:

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    // ...
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ( {
      className : 'wysiwyg' ,
    } ) ,
  ]
  . . .
}

Ahora cada instancia de prose en los nombres de clase predeterminados será reemplazada por su nombre de clase personalizado:

 < article class =" wysiwyg wysiwyg-slate lg:wysiwyg-xl " >
  < h1 > My Heading </ h1 >
  < p > ... </ p >

  < div class =" not-wysiwyg " >
    <!-- Some example or demo that needs to be prose-free -->
  </ div >

  < p > ... </ p >
  <!-- ... -->
</ article >

Personalizando el CSS

Si desea personalizar el CSS sin formato generado por este complemento, agregue sus anulaciones bajo la clave typography en la sección theme de su archivo tailwind.config.js :

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    extend : {
      typography : {
        DEFAULT : {
          css : {
            color : '#333' ,
            a : {
              color : '#3182ce' ,
              '&:hover' : {
                color : '#2c5282' ,
              } ,
            } ,
          } ,
        } ,
      } ,
    } ,
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    // ...
  ] ,
}

Al igual que con todas las personalizaciones de temas en Tailwind, también puedes definir la clave typography como una función si necesitas acceso al asistente theme :

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    extend : {
      typography : ( theme ) => ( {
        DEFAULT : {
          css : {
            color : theme ( 'colors.gray.800' ) ,

            // ...
          } ,
        } ,
      } ) ,
    } ,
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    // ...
  ] ,
}

Las personalizaciones deben aplicarse a un modificador específico como DEFAULT o xl y deben agregarse bajo la propiedad css . Las personalizaciones se crean con la misma sintaxis CSS-in-JS que se utiliza para escribir complementos de Tailwind.

Consulte los estilos predeterminados de este complemento para obtener ejemplos más detallados de cómo configurar cada modificador.