TailwindCSS arbitrary values don't work in default redwood and tailwind install

Question

I have this piece of code, everything in tailwind works in this code except for arbitrary values for some reason does any one have any clue why?

    return (
        <ul>
            {names.map((name: string, index: number) => {
                let shiftVal: number = 96;
                let classNameLink: string = `text-red-500 bg-red-500 hover:text-white
                flex justify-around box-border w-96 
                relative left-[${index * shiftVal}px] py-4 mb-[${shiftVal * ((index / (index + 5e-324)) + 1)}px]
                transition-all
                `
                return (
                    <a href = {links[index]} key={index} className={classNameLink} >{name}</a>
                )
            })}
        </ul>
    )
}

I used yarn rw setup ui tailwind to install tailwind CSS.

Answer 1

Tailwind does not support dynamic classes, such as the ones you are trying to create. The full utility class name must be available at build time in your code for Tailwind to find it and generate the proper CSS classes.

One solution is to add your dynamic styles in the styles attribute instead of using Tailwind CSS utility classes. For example:

{
  names.map((name: string, index: number) => {
    let shiftVal: number = 96;
    return (
      <a
        href={links[index]}
        key={index}
        className='text-red-500 bg-red-500 hover:text-white flex justify-around box-border w-96 relative py-4 transition-all'
        style={{
          left: `${index * shiftVal}px`,
          marginBottom: `${shiftVal * (index / (index + 5e-324) + 1)}px`
        }}
      >
        {name}
      </a>
    );
  });
}