Using TailwindCSS and the Typography plugin, how do I allow for customizations within .prose using classes?

Question

I have TailwindCSS 2.0 installed and the Typography plugin. I have customized my default styling in the Tailwind config like the docs suggest. In my customizations, I have styles for the text color and even customizations for h2, h3, etc and everything works as expected.

However, I would like to be able to occasionally modify styles within the .prose class by adding classes directly to tags. For example:

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

The code above seems to have no effect on changing the heading 2. I guess because the text-red-400 has a lower specificity so it gets overridden by the theme styles. I want to use prose in lots of places on my site but also allow for customizations inside of the prose class occasionally. Is there a way to set this up so I can do that?

Answer 1

Not sure that this is what you want, but you can add new prose-* modifiers to config and use them in your code.

<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')],
}

Playground link: https://play.tailwindcss.com/4BywohSnz5

Don't know a way to modify tags directly, maybe with !important declaration, but it seems more hacky than modifiers.

Answer 2

Note that because colors are stored in CSS variables you can also modify the variables directly. This is particularly useful for editing colors to user-defined values in React:

<div
  className="prose"
  style={{ "--tw-prose-body": myColor }}
>
  <p>Hello world</p>
</div>

You can view a list of all color variables on the Tailwind typography plugin page or by inspecting the CSS on the <div class="prose"> element.