A utility-first CSS framework for rapidly building custom user interfaces.

Tailwind CSS !important variant

This is a Tailwind CSS plugin that adds an !important variant.

Maintained by: Joan Piedra → @neojp

Installation

Install as a node module with either npm or yarn on your command line

# Install via npm
npm install --save-dev @neojp/tailwindcss-important-variant

# Install via yarn
yarn add --dev @neojp/tailwindcss-important-variant

Add this module as a plugin on your Tailwind configuration file (tailwind.config.js).

module.exports = {
  plugins: [
      require('@neojp/tailwindcss-important-variant')
  ]
};

Use this plugin in your list of variants, either globally

module.exports = {
  variants: ['responsive', 'important']
};

Or per utility:

module.exports = {
  variants: {
    borderRadius: ['responsive', 'important']
  }
};

Usage

Use your Tailwind utility classes with an exclamation mark ( ! ) as a suffix.

<div class="rounded!"></div>

Output

Tailwind will be outputed as follows.

.rounded\! {
  border-radius: 0.25rem !important
}

Contributing

Feel free to submit a PR request, and send me a message on Twitter (@neojp) about it.

License

This project has been licensed under the Hippocratic License.