Package Exports

@noahmpauls/tw-counter
@noahmpauls/tw-counter/src/counter.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@noahmpauls/tw-counter) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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