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.

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>

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.

Hey, you! 🫵

Did you know I created a YouTube channel? I'll be putting out a lot of new content on web development and software engineering so make sure to subscribe.

(clap if you liked the article)

You might also like