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

Question

在下面我想动态设置每个的-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>
                            ))
                        }

Answer 1

在 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>
))}

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