我總共有10個項目，我通過它們映射渲染每一個。我希望最后一個元素的不透明度最小，第一個元素的不透明度最高。我知道:在順風(fēng)css中的第一個和最后一個，但我想知道是否有辦法讓我可以瞄準(zhǔn)比如說我在順風(fēng)css中的第八個或第九個

下面是我從一個組件返回的語句:

{[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>
                        ))}

我想減少向下的不透明度，即從第一項到最后一項。

使用Tailwind v3.2 matchVariant可以輕松定位第n個子節(jié)點

// 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
          },
        }
      );
    }),
  ],
}

用法-每2n個元素將是紅色，第1，第6，第11，第5n+1 -綠色，每第五個-藍(lán)色(它將重疊，但這只是一個如何從配置或任意變量使用它的例子)

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

演示

對于3.2以下的版本，您需要為每個第n個子選擇器添加一個變量add variant

下面的解決方案可能不使用n-child，但確實給出了所需的結(jié)果:列表項將一個接一個地降低不透明度。

{[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>
        );
      })}

但是在呈現(xiàn)之前，為了讓Tailwind生成所需的類名，需要將以下配置添加到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: [],
};

這個特性(安全列表)被Tailwind認(rèn)為是最后一招，但是這個問題似乎是一個很好的用例。

為此可以使用任意的變體。

舉個例子，這個

<section className="[&:nth-child(8)]:opacity-25">
</section>

為第八個子元素section元素提供0.25的不透明度。