Tailwindcss Nth Child Variants Plugin

This repository is a plug in for Tailwindcss

Installation

Install the plugin via npm:

npm install tailwind-nth-child

tailwind.config.js

Create an instance like this.

const Nth =  require('tailwind-nth-child');
const <name_suffix> =  new  Nth('<name_suffix>','<nth-value>')
module.exports = {
// ...
variants: {
    // Variants configurations are optional on Tailwindcss 3.0, so this configuration can be omitted
    // https://tailwindcss.com/blog/tailwindcss-v3#just-in-time-all-the-time
    extend:{
      backgroundColor: ['nth-child-<name_suffix>'],
    }
},
plugins: [
    <name_suffix>.nthChild() // add-plugin
],
}

Extending the variants is important.

Value of <nth-value>

You need to give nth-value in constructor method. Check the below examples.

Examples

tailwind.config.js

const Nth = require('tailwind-nth-child')
const nth3n = new Nth('3n', '3n+0') // Sub-elements that are multiples of 3
const nth2n = new Nth('2n', '2n+0') // Sub-elements that are multiples of 2  === new  Nth('even','even')
const nth5 = new Nth('5', '-n+5') // The first five child elements
const nth4 = new Nth('4', '-n+4') // The first four child elements

module.exports = {
  // ...
  variants: {
    // extend the backgroundColor variants
    extend: {
      borderWidth: [
        'nth-child-2n',
        'nth-child-3n',
        'nth-child-4',
        'nth-child-5'
      ]
    }
  },
  plugins: [
    nth2n.nthChild(),
    nth3n.nthChild(),
    nth4.nthChild(),
    nth5.nthChild()
  ]
}

xxx.tsx

<div
  className="flex flex-wrap
        nth-child-2n:border-r-0 
        sm:nth-child-2n:border-r 
        sm:nth-child-3n:border-r-0 
        lg:nth-child-3n:border-r  
        lg:nth-child-4:border-t 
        xl:nth-child-5:border-t"
>
  // ...
</div>