我尝试过最后实现前缀:如 Tailwind.css 文档中所示,但没有成功。谁能指出我做错了什么?我无法完成这项工作。
先感谢您。
react 组件
{items.map((item, i) => {
return (
<li
key={i.toString()}
v-for="(item, i) in items"
className="pb-sm xl:pb-md last:pb-0" // This is the problematic fellow!
>
<div className="grid grid-cols-12">
<div className="col-start-2 col-span-10 md:col-start-2 md:col-span-8 pb-2 sm:pb-xs md:pb-xs lg:pb-xs xl:pb-0">
<div className="serif text-h5 xl:text-h4 lg:text-h4 md:text-h4 leading-snug xl:leading-tight lg:leading-tight md:leading-snug">
{item}
</div>
</div>
<div className="col-start-2 col-span-10 sm:col-start-5 sm:col-span-6 md:col-start-5 md:col-span-6 lg:col-start-5 lg:col-span-6 xl:col-start-5 xl:col-span-3 pb-xs sm:pb-xs">
<div className="text-p sm:text-p">{description[i]}</div>
</div>
</div>
</li>
)
})}
最佳答案
不确定您是否使用 Tailwind v2.X
或 v1.X
但您需要激活 last
的变体.这是来自官方 v2 文档 related page 的引用
By default, the last-child variant is not enabled for any core plugins.
我试图在 https://play.tailwindcss.com/ 上为您举个例子但它在那里不起作用。同时,我使用最新版本的 TW 构建了一个 Vite VueJS 存储库,它运行良好。
所以,这在你的
tailwind.config.js
应该做的伎俩module.exports = {
...
variants: {
extend: {
padding: ['last'],
}
},
...
}
v2 的文档是 here v1 是 here .当心,
variants >> extend
仅在 v2 中可用。如果您使用的是 v1,您仍然可以覆盖整个 padding
手动变种,没什么大不了的。PS:Tailwind 的团队已经解决了这个问题,该死的!
关于javascript - Tailwind.css — 如何使用 Tailwind 实现 last-child?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65953801/