如何在 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)
• 【如何动态添加一个类到手动类名称？](https://stackoverflow.com/questions/24217807/how-to-dynamically-add-a-class-to-manual-class-names)
• [处理条件样式的正确方法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中文网其他相关文章！