title: Tailwind css 3.0.5 classes is not working with react
body: <p>Tailwind css 3.0.5 is not working with react. I have installed tailwind css as per the official installation guide of the tailwind css (<a href="https://tailwindcss.com/docs/guides/create-react-app" rel="noreferrer">https://tailwindcss.com/docs/guides/create-react-app</a>).
  The code which, I have written is below.</p>
  <p>package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;react-complete-guide&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@testing-library/jest-dom&quot;: &quot;^5.11.6&quot;,
      &quot;@testing-library/react&quot;: &quot;^11.2.2&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^12.5.0&quot;,
      &quot;react&quot;: &quot;^17.0.1&quot;,
      &quot;react-dom&quot;: &quot;^17.0.1&quot;,
      &quot;react-scripts&quot;: &quot;4.0.1&quot;,
      &quot;web-vitals&quot;: &quot;^0.2.4&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [
        &quot;react-app&quot;,
        &quot;react-app/jest&quot;
      ]
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    },
    &quot;devDependencies&quot;: {
      &quot;autoprefixer&quot;: &quot;^10.4.0&quot;,
      &quot;postcss&quot;: &quot;^8.4.5&quot;,
      &quot;tailwindcss&quot;: &quot;^3.0.7&quot;
    }
  }
  
  </code></pre>
  <p>src/index.css</p>
  <pre><code>@tailwind base;
  @tailwind components;
  @tailwind utilities;
  </code></pre>
  <p>postcss.config.js</p>
  <pre><code>module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }
  </code></pre>
  <p>tailwind.config.js</p>
  <pre><code>module.exports = {
    content: [
      &quot;./src/**/*.{js,jsx,ts,tsx}&quot;,
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  </code></pre>
  <p>src/app.js</p>
  <pre><code>import &quot;./index.css&quot;;
  
  function App() {
    return (
      &lt;h1 className=&quot;text-3xl font-bold underline&quot;&gt;
        Hello world!
      &lt;/h1&gt;
    );
  }
  
  export default App;
  </code></pre>