How to use !important in TailwindCSS

<div class="!bg-red-600">Lorem ipsum</div>

In CSS, try to avoid the use of the !important modifier if possible. However, sometimes it is still necessary. TailwindCSS has a simple way to do this. Just add the ! character to the beginning of the selected class. Example:

<div class="!bg-red-600">Lorem ipsum</div>

When can it be useful?

Imagine you have a React button component whose code you can't change and its color is set to bg-sky-600 :

<button class="bg-sky-600">Test button</button>

If the component allows you to add extra classes, you can override the button color to do so:

<button class="bg-sky-600 bg-red-600">Test button</button>

The button still remains blue, because the bg-sky-600 is defined later than the bg-red-600 . 

However, if you use the ! prefix for the class bg-red-600 , Tailwind will automatically create a new class using the !important keyword and the button will be displayed in red.