tailwindcss-counter

Tailwind CSS plugin to generate counter utilities

Installation

1npm i tailwindcss-counter

Usage

1// tailwind.config.js
2module.exports = {
3  theme: {},
4  variants: {},
5  plugins: [
6    require('tailwindcss-counter')(),
7    // Or if you want to set your own counter name:
8    // require('tailwindcss-counter')({
9    //   counterName: 'yourUniqueCounterName'
10    // }),
11  ],
12};

This plugin generates the following utilities:

1.counter-reset {
2  counter-reset: uniqueCounterName
3}
4.counter-increment {
5  counter-increment: uniqueCounterName 1
6}
7.counter-decrement {
8  counter-increment: uniqueCounterName -1
9}
10.counter-result {
11  content: counter(uniqueCounterName)
12}
13.after\:counter-result::after {
14  content: counter(uniqueCounterName)
15}
16.before\:counter-result::before {
17  content: counter(uniqueCounterName)
18}

which you can use in your HTML like so:

1<div class="counter-reset">
2  <div class="after:counter-result">Initial: </div>
3  <div class="counter-increment after:counter-result">Incremented: </div>
4  <div class="counter-increment after:counter-result">Incremented: </div>
5  <div class="counter-increment after:counter-result">Incremented: </div>
6  <div class="counter-decrement after:counter-result">Decremented: </div>
7  <div class="counter-decrement after:counter-result">Decremented: </div>
8  <div class="counter-decrement after:counter-result">Decremented: </div>
9  <div class="before:counter-result"> is a result</div>
10</div>

Demo

Take a look