[Feature] Anti-Important Modifier (!!)

[astralarya]

It would be nice to have an "anti-important" modifier (!!). This would be something you would add to the utility name to make sure it would always be overridden my a conflicting utilities. This would be useful for specifying default styles (eg. text size) which could be overridden by the consumer of a component.

Example

type ButtonProps = {
  className?: string;
  text?: string;
}

function Button({className, text}: ButtonProps) {
  return (
    <button className={`${className} rounded-md !!bg-blue !!text-sm`}>
      {text}
    </button>
  )
}

function Page() {
  return (
    <div>
        <h1>Blah blah</h1>
        <Button className="text-lg">
          Click me
        </Button>
    </div>
  )
}

[alex-krasikau]

Hey @astralarya!

You can try using Tailwind Merge to solve your issue.

import { twMerge } from 'tailwind-merge'

type ButtonProps = {
  className?: string;
  text?: string;
}

function Button({className, text}: ButtonProps) {
  return (
    <button className={twMerge("rounded-md bg-blue text-sm", className)}>
      {text}
    </button>
  )
}

function Page() {
  return (
    <div>
        <h1>Blah blah</h1>
        <Button className="text-lg">
          Click me
        </Button>
    </div>
  )
}