即使是伪类也不起作用顺风css reactjs
Posted
技术标签:
【中文标题】即使是伪类也不起作用顺风css reactjs【英文标题】:even pesudo class not working tailwindcss reactjs 【发布时间】:2020-08-23 16:16:00 【问题描述】:我的最终目标是创建一个带有不同背景颜色的偶数项的表格。
形成官方docs。我知道我们必须将偶数类添加到循环中调用的子类中。我尝试将课程放在所有可能的地方,但仍然无法正常工作。
<table className="table-fixed shadow-lg">
<thead className="py-2 bg-gray-200">
......
</thead>
<tbody>
<tr>
<td className="px-4 py-2 uppercase text-center font-bold">date</td>
<td className="px-4 py-2 uppercase text-center font-bold w-100">event</td>
</tr>
eventsData[this.state.currentYear].map(event =>(
<tr className="even:bg-gray-300">
<td className="px-4 py-2">event.date</td>
<td className="px-4 py-2">event.name</td>
</tr>
))
</tbody>
</table>
tailwind.config.js
module.exports =
theme:
extend:
spacing:
'128':'32rem',
,
,
variants: ['even'],
plugins: [],
【问题讨论】:
您是否将even
类添加到您的顺风配置中?
@Redline 我厌倦了添加它,但它没有用。已使用配置更新问题
我已经更新了我的答案
【参考方案1】:
您的顺风配置文件错误。您需要为backgroundColor
类启用even
变体。将您的配置更新为如下所示:
// tailwind.config.js
module.exports =
// ...
variants:
backgroundColor: ['even', ...],
,
【讨论】:
我用这种方式试了配置还是不行以上是关于即使是伪类也不起作用顺风css reactjs的主要内容,如果未能解决你的问题,请参考以下文章