title: Tailwind css Grid is not working in Reactjs?
body: <p>Here is an example of taiwind css grid working properly in HTML :
  <a href="https://play.tailwindcss.com/mU6PzU0sqX" rel="nofollow noreferrer">https://play.tailwindcss.com/mU6PzU0sqX</a></p>
  <p>Despites, here is the same example in react, and it seems it does not pass:
  <a href="https://codesandbox.io/s/react-typescript-tailwind-playground-forked-m77pw?file=/src/App.tsx" rel="nofollow noreferrer">https://codesandbox.io/s/react-typescript-tailwind-playground-forked-m77pw?file=/src/App.tsx</a>
  See the not working component in the browser : <a href="https://m77pw.csb.app/" rel="nofollow noreferrer">https://m77pw.csb.app/</a></p>
  <p>Here is the React code :</p>
  <pre><code>&lt;div className=&quot;App&quot;&gt;
        &lt;h1 className=&quot;text-red-500&quot;&gt;Hello CodeSandbox&lt;/h1&gt;
        &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
        &lt;div className=&quot;grid grid-cols-3 gap-4&quot;&gt;
              &lt;div className=&quot;border col-span-1&quot;&gt;
                1
              &lt;/div&gt;
              &lt;div className=&quot;border col-span-1&quot;&gt;
                2
              &lt;/div&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>