即使是伪类也不起作用顺风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的主要内容,如果未能解决你的问题,请参考以下文章

vscode顺风css智能感知不起作用

mt-5 h 在顺风 css 中对 textarea 不起作用

之前和之后的伪元素在顺风 CSS 中不起作用

在顺风 css 示例中设置单选按钮样式不起作用

顺风 css flex-col-reverse 不起作用

将 CSS 直接插入 HTML 时,悬停伪类不起作用?