Tailwind css Grid is not working in Reactjs?

Question

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>

Answer 1

Install tailwindcss with npm and make sure you include paths to your templates/components files in tailwind.config.js.

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Answer 2

This is also an issue when using VueJS.

It's caused by enabling purge for .vue files.

Solution is to disable purging for .vue files in tailwind.config.js

Perhaps your solution is to disable purging for '.jsx' files except in Production using environment variables.