@noahmpauls/tw-counter

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