我想在next.js中添加此顺风样式(活动:border-b-2活动:border-blue-500)，但这不起作用

Question

这是我想要添加的顺风样式

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>

Answer 1

您必须修改尾随设置才能启用active状态。

Documentation

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