Using the Important (!important) Keyword in Tailwind

To add the important modifier to a Tailwind class, you need to prefix it with a !:

<div class='!text-green-500'>Hello world</div>

Please notice that the important keyword goes after any variant:

<div class='hover:!text-green-500'>Hello world</div>

Adding the Important Keyword to all Tailwind Classes

You can add the important keyword to all the classes generated by Tailwind without worrying about prefixing them with the ! symbol by configuring the important keyword in your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  important: true,
}

You can be more granular about this setting and apply this setting to an ID selector as follows:

// tailwind.config.js
module.exports = {
  important: '#my-app',
}

This will replace the usage of the important keyword with a CSS selector.

Here's an overview of all the possible setting values:

/* No config */
.text-green-500 {
 /* ... */
}

/* important: true */
.text-green-500 {
 /* ... */!important
}

/* important: 'my-app' */
#my-app :is(.text-green-500) {
 /* ... */
}