如何在 Tailwind CSS 中正確使用模板文字進行動態類別修改？

在TailwindCSS 中使用範本文字進行動態類別修改

嘗試使用下列程式碼動態變更類別時：

className=" absolute inset-0 ${click ? translate-x-0 : -translate-x-full } 
        transform  z-400 h-screen w-1/4 bg-blue-300 "

您可能會遇到一個問題。使用範本文字實現此目的的正確方法是：

className={`absolute inset-0 ${click ? 'translate-x-0' : '-translate-x-full'} transform z-400 h-screen w-1/4 bg-blue-300`}

或者，您可以使用字串連接來定義您的className：

className={'absolute inset-0 ' + (click ? 'translate-x-0' : '-translate-x-full') + ' transform z-400 h-screen w-1/4 bg-blue-300'}

避免單一類別的字串連線至關重要名稱，例如：

className={`text-${error ? 'red' : 'green'}-600`}

相反，選擇完整的類別名稱作為如下所示：

className={`${error ? 'text-red-600' : 'text-green-600'}`}

className={error ? 'text-red-600' : 'text-green-600'}

Tailwind 將在生產版本中保留完整的類別名稱。

考慮使用類別名稱、clsx 等函式庫或Tailwind 特定的解決方案（例如twin.macro、twind、或xwind 以獲得更大的靈活性。

其他資源：

• [React.js有條件地應用類別名稱](https://reactjs.org/docs/dom-elements.html#conditional-class-names-and-styles)
• 【如何動態新增一個類別到手動類別名稱？ )
• [處理條件樣式的正確方法React](https://stackoverflow.com/questions/40787489/ 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)

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