tailwindcss-trump
v1.1.2
Published
Increase Tailwind CSS Specificity
Downloads
133
Maintainers
Readme
tailwindcss-trump
Increase Tailwind CSS Specificity - without !
important modifier.
Note: Repeated occurrences of the same simple selector are allowed and do increase specificity. https://www.w3.org/TR/selectors-3/#specificity
Installation
# npm
npm install tailwindcss-trump --save-dev
# yarn
yarn add --dev tailwindcss-trump
Configuration
Add the plugin to the plugins
array of the tailwind config file.
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require("tailwindcss-trump"),
],
};
Optionally set your trump name in the config.
// tailwind.config.js
module.exports = {
theme: {
// ...
trumpName: "bump",
// will result in bump: variant
},
// ...
};
Usage
Use the trump:
modifier (you can play with it here:
<div class="bg-red-500 bg-sky-500 h-4"></div>
<div class="trump:bg-red-500 bg-sky-500 h-4"></div>
<div class="trump:bg-red-500 trump:bg-sky-500 h-4"></div>
<div class="trump:trump:bg-red-500 trump:bg-sky-500 h-4"></div>
<div class="bg-red-500 bg-sky-500 trump:hover:bg-green-500 hover:bg-yellow-500 h-4"></div>
<div class="bg-red-500 bg-sky-500 trump:md:bg-green-500 md:bg-yellow-500 h-4"></div>