title: Trying to create circular progress using custom tailwind css library, but its not working
body: <p>My goal is to build a circular progress indicator.</p>
  <p>I have come across library daisyui and its <code>radial progress</code> component - <a href="https://daisyui.com/components/radial-progress/" rel="nofollow noreferrer">https://daisyui.com/components/radial-progress/</a></p>
  <p>it says: &quot;Radial progress needs --value CSS variable to work.&quot;</p>
  <p>I have tried doing this:</p>
  <pre><code>      &lt;div className=&quot;radial-progress&quot; style={{ &quot;--value&quot;: 70 }}&gt;
          70%
        &lt;/div&gt;
  </code></pre>
  <p>But, it's not working, am I doing something wrong?</p>
  <p>This is what I want to achieve:</p>
  <p><a href="https://i.stack.imgur.com/pVGCm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pVGCm.png" alt="enter image description here" /></a></p>
  <p>this is the codesandbox link: <a href="https://codesandbox.io/s/react-tailwind-playground-forked-9jwc49?file=/src/App.tsx" rel="nofollow noreferrer">https://codesandbox.io/s/react-tailwind-playground-forked-9jwc49?file=/src/App.tsx</a></p>