!important variant

[SchmidtDawid]

I think !important modificator as variant could be very useful option.

For example:
I have table component with cells, and all of them has class "p-3" because 90% of my tables are fine with that padding.
But i want to add custom class for my cells. But if i want add class "p-2" it is not strong enough to override default "p-3" class.
Now very useful will be "p-2!" or "p-2-i" class with !important.

[jenstornell]

I ran into this issue today:

<div class="bg-white hover:bg-black">First</div> <!-- Active element -->
<div class="hover:bg-black">Second</div>

When I hover the white one, it should NOT use the black hover, else it should. To solve it I used some javascript but it's not optional.

I like p-2!.

[JNavith]

There is a recipe for an important variant in the docs:

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('important', ({ container }) => {
        container.walkRules(rule => {
          rule.selector = `.\\!${rule.selector.slice(1)}`
          rule.walkDecls(decl => {
            decl.important = true
          })
        })
      })
    })
  ]
}

Configure utilities to use the variant like this:

variants: {
  padding: ({ after }) => after(["important"]),
},

So you can use it in HTML like this:

<div class="p-8 !p-4">p-4 wins specificity</div>

Because the generated CSS looks like this:

.\!p-4 {
  padding: 1rem !important;
}