css - 即使是伪类也不起作用tailwindcss reactjs
问题描述
我的最终目标是创建一个带有不同背景颜色的偶数项的表格。
形成官方文档。我知道我们必须将偶数类添加到循环中调用的子类中。我尝试将课程放在所有可能的地方,但仍然无法正常工作。
<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
变体。backgroundColor
将您的配置更新为如下所示:
// tailwind.config.js
module.exports = {
// ...
variants: {
backgroundColor: ['even', ...],
},
}
推荐阅读
- c# - 有条件取消长时间运行的任务
- julia - Julia 相当于 Python 的“help()”
- json - `jq` 的 `walk` 边走边排序有问题吗?
- python - 如何使用 Python 3.7 在浏览器中运行 html 代码?
- three.js - 如何计算扁平网格的周长?
- javascript - angular7中没有向指令传递值
- php - Extend matomo/piwik device detector class to add new client parser (namespace issue)
- jquery - 如何显示成功消息并一起刷新页面
- c++ - 如何创建一个返回新堆栈的函数?
- python - 在异常中将信息向上传递到堆栈?