I'm building a project with reactJS for a school project. In this project I am allowed to use css frameworks, and I chose tailwindcss because I already have used it before.

But now, I am getting an ackward bug when trying to concatenate class with react variables.

I already changed tailwind.config.js to extend width values, like this piece of code below:

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      width : {
        '10r' : '25rem',
        '12r' : '30rem',
        '15r' : '37.5rem'
      }
    },
  },
  plugins: [],
}

And what I am trying to do in react file, is this below:

const Body = () => {
    const [tamanhoTab, setTamanhoTab] = useState(15)

    return (
        <div className="h-[60vh] w-4/5 bg-blue-100 m-auto mt-16">

            <div className={`bg-black h-10 w-${tamanhoTab}r flex space-x-px flex-wrap`} id="tabuleiro">
            </div>
         </div>
   )
}

export default Body

The width of the div simply doesn't change, but if I write this instead:

    <div className={`bg-black h-10 w-15r flex space-x-px flex-wrap`} id="tabuleiro">
    </div>

It works! I'm frustrated because I already researched about this and found nothing useful, and I'm sure that this is a stupid mistake that I can't solve!

Anyone have a clue what this might be?

I hope it's not confusing, Thanks,