Tailwind CSS not displaying using Create React App

Question

I created a simple test react app and followed all of the steps from the official tailwind website: "https://v2.tailwindcss.com/docs/guides/create-react-app". Here are the relevant files:

SampleComponent.js:

import React from 'react';

const SampleComponent = () => {
  return (
    <div className="bg-blue-500 p-4">
      <h1 className="text-white font-bold">This is a sample component using Tailwind CSS</h1>
    </div>
  );
};

export default SampleComponent;

App.js:

import React from 'react';
import SampleComponent from './SampleComponent';

function App() {
  return (
    <div className="bg-gray-200 min-h-screen">
      <SampleComponent />
    </div>
  );
}

export default App;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

craco.config.js:

module.exports = {
    style: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
    },
  }

tailwind.config.js:

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

package.json:

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^7.1.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^9.8.8",
    "postcss": "^8.4.27",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
  }
}

Here is a screenshot of inspecting the element: (https://i.sstatic.net/D2wJi.png)

However, every time I try running npm run start, the Tailwind CSS is not being displayed.

I tried other possible solutions I found, such as running npm install react-scripts@latest and npm install postcss@latest as well as deleting npm_modules and package-lock.json and rerunning npm install, but to no avail.

Answer 1

The documentation may be for an older version of react-scripts/create-react-app. Consider removing the style.postcss.plugins key from craco.config.js or indeed removing @craco/craco altogether, since v5 of react-scripts/create-react-app supports Tailwind out of the box.

See your project working in CodeSandbox.

As an aside, Tailwind recommends more modern build systems:

Create React App does not support custom PostCSS configurations and is incompatible with many important tools in the PostCSS ecosystem, like postcss-import.

We highly recommend using Vite, Parcel, Next.js, or Remix instead of Create React App.