Modify CSS variable with Tailwind

Question

Variable in index.css :

:root {
    --property: 1;
}

Normal way changing it in CSS on hover:

img{
    transform: scale(var(--property));;
}


.another-element:has(:hover, :focus) 
{
    --property: 1.1;
}

It is possible to attach a variable in Tailwind, but how to modify it? Here is how I attach it to an element :

<img className='scale-x-[var(--property]' src="..." />

<div className='hover:CHANGE-HERE-THE-VARIABLE'>

I tried search how to modify it, but I did not found any solution.

Answer 1

You have to add the variable in main css file and make some chanes in tailwind.config.js file. You can refer to this answer https://stackoverflow.com/a/64872862/14224876