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

Answer 2

TailwindCSS doesn't allow you to generate classes dynamically. So when you use the following to generate the class…

left-[${index * shiftVal}px] py-4 mb-[${shiftVal * ((index / (index + 5e-324)) + 1)}px]

…TailwindCSS will not pick that up as a valid TailwindCSS class and therefore will not produce the necessary CSS.

Instead, you must include the full name of the class in your source code. You can return the full value like this

function  myFunc(index,shiftVal) {
return `left-[${index * shiftVal}px] py-4 mb-[${shiftVal * ((index / (index + 5e-324)) + 1)}px]`
}

where index & shiftVal is the value you are passing here.

And use it like this

<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 ${myFunc}
                transition-all
                `
                return (
                    <a href = {links[index]} key={index} className={classNameLink} >{name}</a>
                )
            })}
        </ul>

By doing it this way, the entire string for every class is in your source code, so TailwindCSS will know to generate the applicable CSS.

Read more: https://tailwindcss.com/docs/content-configuration#class-detection-in-depth

Edit

Try this function

function  myFunc(index,shiftVal) {
return "left-[", index * shiftVal,"px] py-4 mb-[",shiftVal * ((index / (index + 5e-324)) + 1),"px]"
}

EDIT -2

This should work

  function  myFunc(index,shiftVal) {
return `left-['${index * shiftVal}px'] py-4 mb-['${shiftVal * ((index / (index + 5e-324)) + 1)}px']`
}