Tengo TailwindCSS 2.0 instalado y el complemento de tipografía. He personalizado mi estilo predeterminado en la configuración de Tailwind como sugieren los documentos. En mis personalizaciones, tengo estilos para el color del texto e incluso personalizaciones para h2, h3, etc. y todo funciona como se esperaba.

Sin embargo, me gustaría poder modificar ocasionalmente estilos dentro de la clase .prose agregando clases directamente a las etiquetas. Por ejemplo:

<div class="prose">
<h2 class="text-red-400">Make this heading red even though the default configuration makes it grey.</h2>
</div>

El código anterior parece no tener ningún efecto sobre el cambio del título 2. Supongo que porque el texto-red-400 tiene una especificidad más baja, por lo que los estilos de tema lo anulan. Quiero usar prosa en muchos lugares de mi sitio, pero también permitir personalizaciones dentro de la clase de prosa ocasionalmente. ¿Hay alguna forma de configurar esto para que pueda hacer eso?

2
Aaron - Wolf X Machina 12 mar. 2021 a las 21:11

1 respuesta

La mejor respuesta

No estoy seguro de que esto sea lo que desea, pero puede agregar nuevos modificadores prose-* a la configuración y usarlos en su código.

<div class="prose prose-red-h2">
  <h2>Make this heading red even though the default configuration makes it grey.</h2>
</div>
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      typography: {
        'red-h2': {
          css: {
            h2: {
              color: colors.red['600'],
            },
          },
        },
      },
    },
  },
  variants: {},
  plugins: [require('@tailwindcss/typography')],
}

Enlace al patio de juegos: https://play.tailwindcss.com/4BywohSnz5

No conozco una forma de modificar etiquetas directamente, tal vez con !important declaración, pero parece más hacky que los modificadores.

1
Danila 13 mar. 2021 a las 12:07