skip to Main Content

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://phpout.com/wp-content/uploads/2023/07/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.

2

Answers


  1. try adding
    content: [‘./src/**/*.{js,jsx,ts,tsx}’],
    in tailwind.config.js

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search