!important classes in tailwind

If you need to add !important to one of your Tailwind classes, you simply need to add ! before the class name.

Here is a crude example:

Blue Background 🔵

<div class="bg-red-500 bg-blue-500">
<!-- Insert content here -->

</div>

Red Background 🔴

<div class="!bg-red-500 bg-blue-500">
<!-- Insert content here -->

</div>

When using this with responsive breakpoints, place it after the variant modifier.

Valid 😁

<div class="md:!bg-red-500">
<!-- Insert conent here -->

</div>

Invalid 😢

<div class="!md:bg-red-500">
<!-- Insert content here -->

</div>

Tweet