如何使用模板文字在 React 中動態應用 Tailwind CSS 類別？

在Tailwind CSS 中應用帶有模板文字的動態CSS 類別

嘗試動態更改Tailwind CSS 中的CSS 類別時可能會遇到困難。例如，如果您嘗試使用以下程式碼：

此程式碼將無法有效執行。要解決此問題，請進行以下更改：

至關重要的是，在構建類別名稱時避免使用字串連接，如下所示：

相反，選擇選擇完整的類別名稱：

Tailwind將避免從生產版本中刪除完整的類別名稱（如果它們包含在

此外，您還可以存取各種選項，包括類別名稱或 clsx 等庫，以及 twin.macro、twind 和 xwind 等 Tailwind特定解決方案。條件應用類別名稱](https://github.com/facebook/react/issues/2316)

[如何動態新增類別到手動類別名稱？ 37585255 /how-to-dynamically-add-a-class-to-manual-class-names)[處理條件樣式的正確方法React](https://dev.to/furkancakmak/conditional-css -class-names-in-react-the-right-way-iwk)

[在JSX 中嵌入表達式](https:// Reactjs.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中文網其他相關文章！