tailwindcss-counter

tailwindcss-counter

Tailwind CSS plugin to generate counter utilities

Installation

npm i tailwindcss-counter

Usage

// 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>

Demo

Take a look