tailwind css活动类仅在继续单击按钮时起作用

Question

我正在使用顺风创建组件，但是当我将活动类添加到组件时，只有当我继续单击按钮时它才有效。

https://i.stack.imgur.com/Sx8Vy.jpg

     <li>
        <a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg active active:bg-blue-400">
           <img src="./DashIcons/homeIcon.svg" class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75" alt="">
           <span class="flex-1 ml-3 whitespace-nowrap">Dashboard</span>
        </a>
     </li>

Answer 1

我认为你误解了变体的含义- 这最终与 CSS :active伪类active:相同

:active CSS 伪类表示正在被用户激活的元素（例如按钮）。使用鼠标时，“激活”通常在用户按下鼠标主按钮时开始。

我想当按钮有类时你需要应用蓝色背景active。对于这种情况你需要编写插件

const plugin = require('tailwindcss/plugin');

/** @type {import('tailwindcss').Config} */
module.exports = {
    /** other settings */
    plugins: [
        plugin(function({ addVariant }) {
            addVariant('current', '&.active');
        })
    ],
}

并active:bg-blue-500改为current:bg-blue-500

演示版

在 3.1.0版本中添加了对任意变体的支持

<a class="active [&.active]:bg-blue-400 bg-red-400">
Blue when active
</a>

更新：为变体和自定义活动选择器创建了 npm包。current:希望能帮助到你