Tailwind css Grid is not working in Reactjs?

Issue

Here is an example of taiwind css grid working properly in HTML : https://play.tailwindcss.com/mU6PzU0sqX

Despites, here is the same example in react, and it seems it does not pass: https://codesandbox.io/s/react-typescript-tailwind-playground-forked-m77pw?file=/src/App.tsx See the not working component in the browser : https://m77pw.csb.app/

Here is the React code :

<div className="App">
      <h1 className="text-red-500">Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div className="grid grid-cols-3 gap-4">
            <div className="border col-span-1">
              1
            </div>
            <div className="border col-span-1">
              2
            </div>
      </div>
</div>

Solution

It appears that your tailwind.css file does not contain the grid utilities, which explains why the styling isn't working.

Instead of copy/pasting Tailwind styles into a CSS file, it would be better to install Tailwind into your project. Installing Tailwind will generate custom CSS files that contain only the utilities you need, avoiding the need to ship massive CSS files to users and ensuring that all the utilities you use are available.

The Tailwind documentation has detailed information about installing Tailwind, as well as a specific tutorial for Create React App.

If you are sure that you don't want to install Tailwind and wish to use a CSS file, see the Tailwind docs for installing via CDN. This will ensure the default utilities and variants are all enabled.

Answered By - person_v1.32