有沒有辦法在單個 hover 實例上鏈接多個 tailwind css 類？

Question

我想知道是否有一種方法可以將多個 tailwind css 類鏈接到 html 元素上的單個 hover 實例上，而不是使用多個 hover 實例。

例如，而不是這個

<button class="hover:bg-blue-900 hover:text-white"></button>

你是否可以擁有這個或其他東西

<button class="hover:bg-blue-900:text-white"></button>

Answer 1

不，沒有。 從文檔（ https://tailwindcss.com/docs/hover-focus-and-other-states ）中，您可以看到他們自己為焦點/懸停添加了多個類。

但是，您可以創建可重復使用的 styles 來解決這個問題

Answer 2

可惜好像沒有。 也許應該向團隊建議一些事情

Answer 3

我試圖做類似的事情，我希望文本在 hover div時改變顏色。
在文檔中搜索我找到了幫助我的“組”：
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state

我嘗試了不同類型的 hover，例如：
hover:bg-green-600 text-gray-50
hover：[bg-green-600 text-gray-50]
hover:(bg-green-600 | text-gray-50)

也許您可以嘗試將按鈕包裝在一個 div 中並添加組class

我以前的代碼，不是這樣工作的

 <Link to='/home'> <div className="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:(bg-green-600 text-gray-50)"> <span className="text-[15px] ml-4 text-gray-500 font-bold">Home</span> </div> </Link>

使用組后

 <Link to='/home' className='group'> <div className="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer group-hover:bg-green-600" > <span className="text-[15px] ml-4 text-gray-500 group-hover:text-gray-50 font-bold">Home</span> </div> </Link>

與組當我 hover div它也改變了跨度文本顏色，像這樣 cursor 不需要在單詞的頂部才能使 hover 工作。

但我仍然希望有一種方法可以將多個 class 放在同一個 hover 上，我希望他們將來添加它......

希望它可以幫助

Answer 4

我偶然發現了同樣的問題，並打算為此編寫一個 Tailwind 插件，但事實證明很難弄亂他們設置的規則，你只能通過添加新的變體和實用程序來擴展它，但不能做類似hover:(text-white bg-red-500) 。

但是，我確實發現了具有此變體組功能的twin.marco ，因此請檢查一下。