How to Override Styles with Tailwind CSS Typography

Good news. Tailwind utilized the :where pseudo-selector to add support for overriding the prose class.

This article could still be helpful if you need to support older browsers. Can I use :where?

Make sure you have Tailwind set to jit mode.

As of Tailwind version 2.2, just-in-time mode is in preview.

We need this to enable generate !important utilities.

tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: [
    // ...
  ],
  theme: {
    // ...
  },
  // ...
};

Then, to override any style cascaded down from the prose class names, simply prefix any Tailwind class with!.

The JIT creates a utility class with !important rules, overriding the styles applied by prose.

This is great if you ever need to create an <a> styled like a button inside the scope of a prose container.

<article class="prose">
  <a href="#" class="!no-underline"> Tailwind CSS </a>
</article>

But isn't it bad practice to override styles with !important?

Tailwind maintainer Adam suggests on GitHub:

To do this you just need to use the important feature in Tailwind. We have no ability to control how specificity works in CSS in any other way, just how CSS works.

I feel this use of !important is justified.

We won't need to use !important on most things when using Tailwind, since most classes don't apply a ton of cascading styles like prose does.

You might also like