tailwindcss-counter
Advanced tools
Weekly downloads
Readme
Tailwind CSS plugin to generate counter utilities
npm i tailwindcss-counter
// tailwind.config.js
module.exports = {
theme: {},
variants: {},
plugins: [
require('tailwindcss-counter')(),
// Or if you want to set your own counter name:
// require('tailwindcss-counter')({
// counterName: 'yourUniqueCounterName'
// }),
],
};
This plugin generates the following utilities:
.counter-reset {
counter-reset: uniqueCounterName
}
.counter-increment {
counter-increment: uniqueCounterName 1
}
.counter-decrement {
counter-increment: uniqueCounterName -1
}
.counter-result {
content: counter(uniqueCounterName)
}
.after\:counter-result::after {
content: counter(uniqueCounterName)
}
.before\:counter-result::before {
content: counter(uniqueCounterName)
}
which you can use in your HTML like so:
<div class="counter-reset">
<div class="after:counter-result">Initial: </div>
<div class="counter-increment after:counter-result">Incremented: </div>
<div class="counter-increment after:counter-result">Incremented: </div>
<div class="counter-increment after:counter-result">Incremented: </div>
<div class="counter-decrement after:counter-result">Decremented: </div>
<div class="counter-decrement after:counter-result">Decremented: </div>
<div class="counter-decrement after:counter-result">Decremented: </div>
<div class="before:counter-result"> is a result</div>
</div>
FAQs
Tailwind CSS plugin to generate counter utilities
The npm package tailwindcss-counter receives a total of 324 weekly downloads. As such, tailwindcss-counter popularity was classified as not popular.
We found that tailwindcss-counter demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.