我想在 next.js 中添加这种顺风样式（active:border-b-2 active:border-blue-500）但这不起作用

Posted 2023-03-05

【中文标题】我想在 next.js 中添加这种顺风样式（active:border-b-2 active:border-blue-500）但这不起作用

【英文标题】：i want to add this tailwind style ( active:border-b-2 active:border-blue-500) in next.js but this doesn't work

【发布时间】：2021-12-15 03:18:33

【问题描述】：

这是我要添加的顺风样式

import React from 'react'

function HeaderIcon(Icon) 
  return (
    <div
      className="flex
      items-center
      cursor-pointer
      md:px-10
      sm:h-14
      md:hover:bg-gray-100
      rounded-xl
      active:border-b-2
      active:border-blue-500"
    >
      <Icon className="h-5" />
    </div>
  )


export default HeaderIcon

-----这里我要添加顺风风格-----------------------------

<div className="flex justify-center flex-grow">
  <div className="flex space-x-6 md:space-2">
    <HeaderIcon Icon=HomeIcon />
    <HeaderIcon Icon=FlagIcon />
    <HeaderIcon Icon=PlayIcon />
    <HeaderIcon Icon=ShoppingCartIcon />
    <HeaderIcon Icon=UserGroupIcon />
  </div>
</div>

【问题讨论】：

:active 伪类可能对div 元素没有影响，它通常用于<a> 和<button> 元素（包含激活元素的元素）。

不能用当前信息重现 - play.tailwindcss.com/iXlWKLbAyc。你能告诉我们你的顺风配置吗？如果您不使用JIT mode，则需要启用border-width 和border-color 的'active' 变体。

现在可以正常工作了，我的 jit 编译器不能正常工作，现在可以正常工作了，感谢兄弟审查我的问题

【参考方案1】：

您必须修改 Tailwind 设置以启用活动状态。

Documentation

// tailwind.config.js
module.exports = 
  // ...
  variants: 
    extend: 
      backgroundColor: ['active'],
    
  ,

【讨论】：

试过了还是不行