A Tailwind CSS plugin that adds utility classes for CSS counters.
npm install @noahmpauls/tw-counter
npm install --save-dev @noahmpauls/tw-counter
`
In your Tailwind project's tailwind.config.js file, add the counter plugin:
`js
// tailwind.config.js
const counter = require('@noahmpauls/tw-counter');
module.exports = {
content: [
//...
],
theme: {
extend: {},
},
plugins: [
counter
],
}
`
Usage
$3
Given the following HTML:
`html
line of code
line of code
line of code
`
The generated text will be:
`
1 line of code
9 line of code
6 line of code
`
#### Using arbitrary values:
Arbitrary values can be used to give a custom name to the counter being used, and to reset/increment by custom values.
Given the following HTML:
`html
line of code
line of code
line of code
`
The generated text will be:
`
43 line of code
42 line of code
59 line of code
`
$3
The plugin generates the following utility classes:
Create/Reset Counters:
| Class Name | CSS | Description |
| - | - | - |
| count-default | counter-reset: default; | resets the counter named default |
| count-default-0 | counter-reset: default 0; | reset the counter named default to 0 explicitly |
| count-rev-default | counter-reset: reversed(default);| resets the counter named default to its reversed starting value (limited browser support) |
Increment Counters:
| Class Name | CSS | Description |
| - | - | - |
| count-inc-default | counter-increment: default 1; | increments the counter named default by 1 |
| -count-inc-default | counter-increment: default -1; | decrements the counter named default by 1 |
| count-inc-default-{#} | counter-increment: default {#}; | increments the counter named default by the given amount |
| -count-inc-default-{#} | counter-increment: default -{#}; | decrements the couner named default by the given amount |
$3
Theme customization falls under count.reset and count.inc:
`js
theme: {
'count': {
'reset': {
'default-5': 'default 5' // count-default-5 reset the default counter to 5
},
'inc': {
'default': 'default 2' // count-inc-default increments the default counter by 2
}
}
}
``