@noahmpauls/tw-counter v1.0.1
Tailwind CSS Counter Plugin
A Tailwind CSS plugin that adds utility classes for CSS counters.
Install
Install the plugin from NPM:
npm install --save-dev @noahmpauls/tw-counter
In your Tailwind project's tailwind.config.js
file, add the counter plugin:
// tailwind.config.js
const counter = require('@noahmpauls/tw-counter');
module.exports = {
content: [
//...
],
theme: {
extend: {},
},
plugins: [
counter
],
}
Usage
Examples
Given the following HTML:
<pre class="count-default">
<code class="count-inc-default before:content-[counter(default)]"> line of code</code>
<code class="count-inc-default-8 before:content-[counter(default)]"> line of code</code>
<code class="-count-inc-default-3 before:content-[counter(default)]"> line of code</code>
</pre>
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:
<pre class="count-[line_40]">
<code class="count-inc-[line_3] before:content-[counter(line)]"> line of code</code>
<code class="-count-inc-[line] before:content-[counter(line)]"> line of code</code>
<code class="count-inc-[line_17] before:content-[counter(line)]"> line of code</code>
</pre>
The generated text will be:
43 line of code
42 line of code
59 line of code
Generated Classes
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 |
Theme Customization
Theme customization falls under count.reset
and count.inc
:
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
}
}
}