我想知道是否有一種方法可以在html元素的一個(gè)懸停實(shí)例上鏈接多個(gè)tailwind css類，而不是使用多個(gè)懸停實(shí)例。

例如，代替這個(gè)

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

你能擁有這個(gè)還是別的什么

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

不，沒(méi)有。從文檔(https://tailwindcss . com/docs/hover-focus-and-other-States)中，您可以看到它們自己為focus/hover添加了多個(gè)類。

然而，您可以創(chuàng)建可重用的樣式來(lái)解決這個(gè)問(wèn)題

遺憾的是，我們不能在tailwind CSS中進(jìn)行變體分組。 所以回答你的問(wèn)題，到目前為止，還沒(méi)有辦法在一個(gè)懸停或任何其他偽類實(shí)例上鏈接多個(gè)tailwind類。背后的原因是，它最終會(huì)產(chǎn)生性能問(wèn)題。

根據(jù)TailwindCSS的創(chuàng)建者Adam Wathan的說(shuō)法:

雖然在創(chuàng)作時(shí)分組語(yǔ)法看起來(lái)代碼更少，但實(shí)際上在生產(chǎn)中它會(huì)創(chuàng)建更大的CSS文件和HTML文件，這使它成為一個(gè)非常黑白分明的性能反模式。 雖然寫起來(lái)更好，而且性能成本不是很大，所以我們?nèi)匀挥袡C(jī)會(huì)進(jìn)一步開發(fā)它，只是為了給喜歡它的人提供開發(fā)者體驗(yàn)。但不可否認(rèn)的是，不鼓勵(lì)任何不利于表現(xiàn)的事情。

或者，我們可以在我們的項(xiàng)目中使用不同的策略來(lái)重用樣式，這在之前@amunim提到的順風(fēng)文檔中有描述。

請(qǐng)閱讀完整的推文和表格了解更多詳情: https://twitter.com/adamwathan/status/1461519820411789314 https://github . com/tailwindlabs/tailwindcss/discussions/8337

遺憾的是，似乎沒(méi)有。也許應(yīng)該向團(tuán)隊(duì)提出一些建議

我試圖做一些類似的事情，我希望文本改變顏色時(shí)，懸停在div。 在文檔中搜索，我找到了幫助我的“組”: https://tailwindcss . com/docs/hover-focus-and-other-States # styleing-based-on-parent-state

我嘗試了不同類型的懸停，比如: 懸停:背景-綠色-600文本-灰色-50 懸停:[背景-綠色-600文本-灰色-50] 懸停:(背景-綠色-600 |文本-灰色-50)

也許您可以嘗試將按鈕包裝在div中，并添加group類

我以前的代碼不是這樣的

<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>

我偶然發(fā)現(xiàn)了同樣的問(wèn)題，并打算為此編寫一個(gè)順風(fēng)插件，但事實(shí)證明很難擾亂他們?cè)O(shè)定的規(guī)則，你只能通過(guò)添加新的變體和實(shí)用程序來(lái)擴(kuò)展它，但不能做類似hover的事情:(text-white bg-red-500)。

不過(guò)，我確實(shí)發(fā)現(xiàn)了twin.marco具有這種變體組功能，所以請(qǐng)務(wù)必檢查一下。