How to Override Styles with Tailwind CSS Typography

2 min read

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.

I used this technique to override the styles on these links (styled like buttons) below:

If you found this info helpful, consider making a donation.

Donations help sustain the blog so we can keep providing free content. ❤️