Margin left only works for the values 10 and 100-CodePudding

This is my code.

const dummy= 13;

<div className='relative w-[86%] h-1 rounded-xl'>
    <div className={`ml-[${dummy}%] absolute h-3 max-w-[0.18rem]`}></div>
</div>

Dummy variable will be dynamic so i was trying to see if it'll work out for random values. However it is only working for the variables 10 and 100 but nothing else.

However, when i write down my code as below it works perfectly fine for any values.

<div className='relative w-[86%] h-1 rounded-xl'>
    <div className={`ml-[13%] absolute h-3 max-w-[0.18rem]`}></div>
</div>

Anyone has any idea what's the cause of this?

CodePudding user response：

Read the docs on dynamic class names. They are not supported in Tailwind but they suggest alternatives.

https://tailwindcss.com/docs/content-configuration#dynamic-class-names

The values 10 and 100 possibly work because they are used elsewhere in your project.

ml-[13%] works because it is using arbitrary value syntax and is not a dynamic class name.

If you need the ability to add any arbitrary value you would be better off adding that value as an inline style.

<div style={{ marginLeft: dummy }}>