tiv

@neojp/tailwindcss-important-variant

Tailwind CSS !important variant

Showing:

Popularity

Downloads/wk

485

GitHub Stars

9

Maintenance

Last Commit

1yr ago

Contributors

0

Package

Dependencies

0

Size (min+gzip)

0.2KB

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme


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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial