!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