@ellreka/tailwindcss-nth-child

Tailwind CSS plugin to generate nth-child variants

Install

yarn add -D @ellreka/tailwindcss-nth-child

tailwind.config.js

plugins: [require('tailwindcss-nth-child')(['3n', '-n+3'])]

Usage

variants: {
  textColor: ({ after }) => after(['nth-child-3n', 'nth-child--n+3'])
}

Example

:nth-child(3n)

<ul>
  {[1, 2, 3, 4, 5, 6].map((v) => (
    <li key={v} className="nth-child-3n:text-red-500">
      foo_{v}
    </li>
  ))}
</ul>

↓

・foo_1
・foo_2
・foo_3 // textColor is red
・foo_4
・foo_5
・foo_6 // textColor is red

:nth-child(-n+3)

<ul>
  {[1, 2, 3, 4, 5, 6].map((v) => (
    <li key={v} className="nth-child--n+3:text-red-500">
      bar_{v}
    </li>
  ))}
</ul>

↓

・bar_1 // textColor is red
・bar_2 // textColor is red
・bar_3 // textColor is red
・bar_4
・bar_5
・bar_6