如何在 Tailwind 中单独绝对定位最后一项？答案

【问题标题】：How to absolutely position the last item separately in Tailwind?如何在 Tailwind 中单独绝对定位最后一项？
【发布时间】：2021-05-03 22:03:45
【问题描述】：

我只想设置一个与其他 div 不同的绝对定位 div 的 left 值。我尝试了最后一个：顺风的属性，但它不起作用。

这是我尝试过的代码

absolute z-10 -ml-4 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 -left-5 last:left-20"

我添加了这些类，只希望最后一个映射的 div 有不同的位置

示例代码：

<div class='relative w-full h-72'>
{items.map((each, i ) => {
    return (
    <div key={i} class='absolute top-0 left-0 last:left-10'>{each}</div
    )
})}
</div>

最后一个被映射的 div 应该有不同的左值

【问题讨论】：

如果您提供minimal reproducible example会有所帮助

标签： tailwind-css

【解决方案1】：

在 v2.1 和 JIT 模式之前，您需要在 tailwind.config.js 中显式启用 last-child 变体，因为它没有为任何核心插件启用。

// tailwind.config.js

module.exports = {
    // ...
    variants: {
        extend: {
            inset: ['last']
        }
    }
}

游乐场演示：https://play.tailwindcss.com/Wt6reZBsRY

从 v2.1 开始，使用 Just-in-Time mode 时不需要额外配置，因为所有样式都是按需生成的。

// tailwind.config.js
module.exports = {
    mode: 'jit',
    // ...
}

【讨论】：