Tailwind.css — 如何使用 Tailwind 实现 last-child?
Posted
技术标签:
【中文标题】Tailwind.css — 如何使用 Tailwind 实现 last-child?【英文标题】:Tailwind.css — How to implement the last-child using Tailwind? 【发布时间】:2021-05-03 07:59:53 【问题描述】:我已尝试实现前缀 last: 但没有成功,如 Tailwind.css 文档中所示。谁能指出我做错了什么?我无法完成这项工作。
提前谢谢你。
反应组件
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>
)
)
【问题讨论】:
【参考方案1】:不确定您使用的是 Tailwind v2.X
还是 v1.X
,但您需要激活 last
的变体。这是来自官方 v2 文档related page
默认情况下,不会为任何核心插件启用 last-child 变体。
我已尝试在https://play.tailwindcss.com/ 上为您举个例子,但它在那里不起作用。同时,我使用最新版本的 TW 构建了一个 Vite VueJS repo,它运行良好。
所以,tailwind.config.js
中的这个应该可以解决问题
module.exports =
...
variants:
extend:
padding: ['last'],
,
...
v2 的文档是 here,v1 的文档是 here。
请注意,variants >> extend
仅在 v2 中可用。如果您使用的是 v1,您仍然可以手动覆盖整个 padding
变体,这没什么大不了的。
PS:Tailwind 的团队已经解决了这个问题,该死的!
【讨论】:
以上是关于Tailwind.css — 如何使用 Tailwind 实现 last-child?的主要内容,如果未能解决你的问题,请参考以下文章
如何将@tailwind CSS 规则添加到 CSS 检查器
如何让 Tailwind.css 与 Gatsby.js 一起工作?