Is there anyway to target nth child in tailwind-css v3? - css

Question

I have a total of 10 items and I am mapping through them to render each one. I want least opacity for last element and highest for first element. I am aware of :first and :last in tailwind-css, but I was wondering if there is way so that I can target lets say my 8th or 9th in tailwind-css
here is my return statement from a component:
{[0,1,2,3,4,5,6,7,8,9].map((item) => (
<section
key={item}
className='last:opacity-20 flex justify-between items-center text-slate-600 bg-white shadow-sm p-5 rounded-xl my-4 cursor-pointer dark:bg-black dark:text-slate-400'
>
<div className='flex gap-3 items-center'>
<div className='rounded-full w-8 h-8 bg-slate-200'></div>
<p className='w-44 h-4 bg-slate-100'></p>
</div>
<p className='w-16 h-4 bg-slate-100'></p>
</section>
))}
I want to decrease opacity going downwards i.e, from first item to last item.

Answer 1

Targeting nth-child can be easy using Tailwind v3.2 matchVariant
// tailwind.config.js
let plugin = require("tailwindcss/plugin");
module.exports = {
plugins: [
plugin(function ({ matchVariant, theme }) {
matchVariant(
'nth',
(value) => {
return `&:nth-child(${value})`;
},
{
values: {
DEFAULT: 'n', // Default value for `nth:`
'2n': '2n', // `nth-2n:utility` will generate `:nth-child(2n)` CSS selector
'3n': '3n',
'4n': '4n',
'5n': '5n',
//... so on if you need
},
}
);
}),
],
}
Usage - every 2n element will be red, 1st, 6th, 11th, 5n+1 - green, every fifth - blue (it will overlap but it is just an example how to use it from config or arbitrary variants)
<ul class="">
<li class="nth-2n:bg-red-400 nth-5n:bg-blue-500 nth-[5n+1]:bg-green-500 p-2">1</li>
<li class="nth-2n:bg-red-400 nth-5n:bg-blue-500 nth-[5n+1]:bg-green-500 p-2">2</li>
<li class="nth-2n:bg-red-400 nth-5n:bg-blue-500 nth-[5n+1]:bg-green-500 p-2">3</li>
<li class="nth-2n:bg-red-400 nth-5n:bg-blue-500 nth-[5n+1]:bg-green-500 p-2">4</li>
<li class="nth-2n:bg-red-400 nth-5n:bg-blue-500 nth-[5n+1]:bg-green-500 p-2">5</li>
<li class="nth-2n:bg-red-400 nth-5n:bg-blue-500 nth-[5n+1]:bg-green-500 p-2">6</li>
</ul>
DEMO
For versions bellow 3.2 you'll need to add variant addVariant for every nth-child selector

Answer 2

This following solution may not use nth-child but does give the needed result: list items will have reduced opacity one by another.
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((item) => {
// Generate class name
// Need to config Tailwind as shown later for this to work
const opacity = `opacity-${(10 - item) * 10}`;
// Changed to bg-black here so result is more visible
return (
<section
key={item}
className={`${opacity} flex justify-between items-center text-slate-600 bg-black shadow-sm p-5 rounded-xl my-4 cursor-pointer dark:bg-black dark:text-slate-400`}
>
<div className="flex gap-3 items-center">
<div className="rounded-full w-8 h-8 bg-slate-200"></div>
<p className="w-44 h-4 bg-slate-100"></p>
</div>
<p className="w-16 h-4 bg-slate-100"></p>
</section>
);
})}
But before this can be rendered, in order for Tailwind to generate the class names needed, the following config need to be added to tailwind.config.cjs:
const opacitySafeList = [];
for (i = 1; i < 11; i++) {
opacitySafeList.push(`opacity-${i * 10}`);
}
module.exports = {
content: ["...content of the project"],
// Tell Tailwind to generate these class names which does not exist in content files
safelist: opacitySafeList,
theme: {
extend: {},
},
plugins: [],
};
This feature (safe list) is considered last resort by Tailwind, but this question seem to be a good use case for it.