如何使用模板文字動態更改 React 中的 Tailwind CSS 類別？

Tailwind CSS：使用範本文字進行動態類別變更

在React 中使用條件樣式時，利用Tailwind CSS 中的範本文字是一個強大的功能動態修改類別的技術。讓我們深入探討如何有效地實現這一點。

問題

有些開發人員在使用範本文字有條件地更改 Tailwind CSS 中的類別時遇到問題。例如，類似以下的程式碼可能無法如預期般運作：

解決方案

應用範本文字進行動態類別變更的正確方法如下：

或者，沒有範本文字：

注意事項

避免使用字串連接來建立類別名稱，因為這可能會阻礙Tailwind 的優化。相反，選擇選擇完整的類別名稱或使用類別選擇技術，如 classNames、clsx 或 Tailwind 特定的解決方案，如 twin.macro、twind 和 xwind。

其他選項

條件樣式也可以使用第三方函式庫（如類別名稱或clsx）或Tailwind 特定的解決方案（如twin.macro）來實現， twind 和xwind。

進一步閱讀

有關更多信息，請參閱以下資源：

• [React.js有條件應用班級名稱](https://stackoverflow.com/questions/39584486/conditionally-applying-class-names-in-react-js)
• [如何動態新增類別到手動類別名稱？ ](https ://www.sitepoint.com/dynamically-add-classes-javascript/)
• [處理條件樣式的正確方法React](https://stackoverflow.com/questions/44916340/ Correct -way-to-handle-conditional-styling-in-react)
• [在JSX中嵌入表達式](https://reactjs.React) org/docs/jsx-in-depth.html#embedding-expressions-in-jsx)
• [範本文字- MDN](https:/ /developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
• [最佳化生產 -寫出可清除的 HTML - Tailwind CSS](https:// tailwindcss.com/docs/optimizing-for-Production#writing-purgeable-html)

以上是如何使用模板文字動態更改 React 中的 Tailwind CSS 類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！