Tailwind CSS does not work with React App

Question

I am trying to add tailwind css with react app. I followed the tailwind documentation,how to set up tailwind with react.

I tried with tailwind latest version.I checked Nodejs and npm are installed perfectly.

But when i run the npm run start it always get an error. I can't fix the problem.

package.json

{
  "name": "tailwind-css",
  "version": "0.1.0",
  "homepage": "",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.1.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "engines": {
    "npm": "6.14.6",
    "node": "12.18.4"
  },
  "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.6",
    "postcss": "^7.0.36",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.2"
  }
}

Please anyone help.

Sorry everyone, This error was in react scripts modules.Now working fine.Thanks all. — Mijanur Rahman
– Mijanur Rahman, Commented Jun 21, 2021 at 8:42
@MijanurRahman Can you pls clarify how exactly you fixed this? — GeniusHawlah
– GeniusHawlah, Commented Jun 18, 2022 at 18:15
@GeniusHawlah You need react-scripts v5.0.0 or greater for tailwind to work. — Rokit
– Rokit, Commented Oct 17, 2022 at 22:52

JsWizard · Accepted Answer · 2021-06-21 08:43:40Z

9

If you follow tailwind documents way, then try this, in the package.json

  "scripts": {
    "start": "craco start && postcss src/css/app.css -o public/app.css", <--- need to inser postcss script as your css reference path.
    "build": "craco build",

and also check your craco.config.js like this.

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

happy coding!

edited Jun 21, 2021 at 8:43

answered Jun 21, 2021 at 8:36

JsWizard

1,7593 gold badges25 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arkadiusz · Accepted Answer · 2022-10-03 14:33:20Z

5

Just update your react-script from v4 to lastest 5 version by: npm install react-scripts@latest. If you will stay with version 4 you have to use craco

That was helpful for me

edited Oct 3, 2022 at 14:33

answered Oct 3, 2022 at 14:31

Arkadiusz

511 silver badge3 bronze badges

2 Comments

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Bryan Norden Over a year ago

This fixed it for me. I updated my node and did a force update for npm vulnerabilities. Thank you!

umer awan · Accepted Answer · 2024-04-04 08:19:57Z

2

Just use CDN in Publuc>index.html

<script src="https://cdn.tailwindcss.com"></script>

edited Apr 4, 2024 at 8:19

answered Apr 4, 2024 at 8:16

umer awan

212 bronze badges

Comments

Selaka Nanayakkara · Accepted Answer · 2022-12-26 09:24:58Z

1

Try to Write this in tailwind.config.js :

module.exports = 

    {
      content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}"
      ].
    ..///
    }

edited Dec 26, 2022 at 9:24

Selaka Nanayakkara

6,9963 gold badges27 silver badges60 bronze badges

answered Dec 21, 2022 at 11:38

elWin

111 bronze badge

Collectives™ on Stack Overflow

Tailwind CSS does not work with React App

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related