Tailwind css v3.0.24 is not working in react app

Tailwind css v3.0.24 is not working in react app.I have followed all the steps given in the official tailwindcss website but still not working.I have updated my react-script version even after that it is not working.

Here is my code.

tailwind.config.js

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

src/index.css

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

package.json

{
  "name": "my-portfolio-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts 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"
    ]
  }
}

App.js

import './App.css';

function App() {
  return (
    <h1 className="text-3xl font-bold underline">
    Hello world!
  </h1>
  );
}

export default App;

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Upvotes: 0

Views: 2327

Answers (2)

nart
nart

Reputation: 1858

Your package.json does not show tailwindcss is installed as dev devDependencies remember to includes index.css in your App.js

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Upvotes: 1

Xiaotian Ye
Xiaotian Ye

Reputation: 47

maybe you forget to import index.css to App.js

import './App.css';
import './index.css';
function App() {
  return (
    <h1 className="text-3xl font-bold underline">
    Hello world!
  </h1>
  );
}

export default App;

Upvotes: 3

Related Questions