!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>