问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

React中这个动态写tailwindcss不生效，不能这样写吗？

头像
寅春树
    1.3k11206458

    在下面我想动态设置每个的-ml-${v}左边距，但是这样好像不起使用，不能这样写吗？

    {
                            [1,2,3].map((v,index)=>(
                                <li className={`-ml-${v} p-5 justify-between list-none rounded border border-zinc-100 mb-3 transition-all cursor-pointer hover:bg-gray-100 hover:drop-shadow-md hover:-ml-5`} key={index}>
                                    <p className='text-lg  font-bold'>构建简单的生态系统</p>
                                    <div className='flex justify-between relative'>
                                        <p className='text-lg text- leading-7 mt-1 '>天边挂着一轮橙黄的落日获，期待着家中彩</p>
                                        <img className='shrink-0 ml-8 relative -top-2' src={Dian}/>
                                    </div>
                                </li>
                            ))
                        }
    reacttailwindcss
    阅读 700
    avatarAI BotBETA

    在React中使用Tailwind CSS时，动态类名（特别是涉及到变量值的）需要特别处理，因为Tailwind CSS在构建时会预处理CSS类名，并不会识别或处理JavaScript中动态生成的类名字符串。在你的例子中，你试图通过字符串模板（例如 -ml-${v}）来动态设置 margin-left 的值，但这种方式在Tailwind CSS中是不支持的。

    解决方案：

    1. 使用Tailwind CSS的自定义属性（CSS变量）：
      如果你想要基于变量动态调整样式，一个方法是使用CSS变量（也称为CSS自定义属性）。但是，这种方法需要你在CSS中预先定义这些变量，并在JavaScript中设置这些变量的值。然而，这种方法对于Tailwind CSS的类名直接动态替换并不直接适用，因为它更多地是关于CSS属性的动态化，而不是类名的动态化。
    2. 使用Tailwind CSS的响应式设计功能：
      如果你的需求是响应式调整（如在不同屏幕尺寸下调整间距），可以使用Tailwind CSS的响应式前缀（如sm:, md:, lg:等）。但这并不适用于基于数组值动态调整样式。

    3. 使用内联样式：
      对于需要基于JavaScript变量动态调整的样式，最简单且直接的方法是使用内联样式。你可以在你的React组件中直接设置内联样式，如下所示：

      {
  [1, 2, 3].map((v, index) => (
    <li
      key={index}
      style={{ marginLeft: `-${v * 10}px` }} // 假设每个v代表10px
      className="p-5 justify-between list-none rounded border border-zinc-100 mb-3 transition-all cursor-pointer hover:bg-gray-100 hover:drop-shadow-md"
    >
      <p className="text-lg font-bold">构建简单的生态系统</p>
      <div className="flex justify-between relative">
        <p className="text-lg leading-7 mt-1">天边挂着一轮橙黄的落日获，期待着家中彩</p>
        <img className="shrink-0 ml-8 relative -top-2" src={Dian} />
      </div>
    </li>
  ))
}

    注意：这里我假设每个v的值代表10px，因此marginLeft被设置为-${v * 10}px。你需要根据你的具体需求调整这个值。

    1. 使用Tailwind CSS插件或自定义功能：
      对于更复杂的需求，你可以考虑编写Tailwind CSS插件或自定义功能来扩展其功能，但这通常涉及到更高级的Tailwind CSS使用，可能不适合所有场景。

    总之，对于你的具体需求，使用内联样式是最简单直接的方法。如果你需要在多个地方重用这种动态样式，考虑将内联样式封装在React组件的props或state中，以便在多个地方复用。

    1 个回答
    得票最新
    头像
    Seven
      623116

      在 Tailwind CSS 中，类名是静态的，不能直接在类名中使用模板字符串来动态设置值。要实现动态设置左边距，可以使用内联样式或通过条件类名来实现。

      使用内联样式：

      {[1, 2, 3].map((v, index) => (
    <li
        style={{ marginLeft: `-${v}rem` }}
        className="p-5 justify-between list-none rounded border border-zinc-100 mb-3 transition-all cursor-pointer hover:bg-gray-100 hover:drop-shadow-md hover:-ml-5"
        key={index}
    >
        <p className="text-lg font-bold">构建简单的生态系统</p>
        <div className="flex justify-between relative">
            <p className="text-lg leading-7 mt-1">天边挂着一轮橙黄的落日获，期待着家中彩</p>
            <img className="shrink-0 ml-8 relative -top-2" src={Dian} />
        </div>
    </li>
))}

      使用条件类名：

      {[1, 2, 3].map((v, index) => (
    <li
        className={`p-5 justify-between list-none rounded border border-zinc-100 mb-3 transition-all cursor-pointer hover:bg-gray-100 hover:drop-shadow-md hover:-ml-5 ${
            v === 1 ? '-ml-1' : v === 2 ? '-ml-2' : '-ml-3'
        }`}
        key={index}
    >
        <p className="text-lg font-bold">构建简单的生态系统</p>
        <div className="flex justify-between relative">
            <p className="text-lg leading-7 mt-1">天边挂着一轮橙黄的落日获，期待着家中彩</p>
            <img className="shrink-0 ml-8 relative -top-2" src={Dian} />
        </div>
    </li>
))}

      这两种方法都能动态地设置左边距。根据你的具体需求选择最适合的方法

      查看全部 1 个回答
      推荐问题
      宣传栏