@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