1

I have an ongoing React.js project with these react versions.

 "react": "^17.0.2",
 "react-scripts": "^4.0.3",

The project is running perfectly without any issues. I wanted to add tailwind CSS for some parts of my project. So I follow all the steps in this Official documentation guide

But tailwind is not working at all. I have noticed my npm start command is a bit different, that may be the reason. My start command is "start": "react-app-rewired start" Normally when you create project with create-react-app it "start": "react-scripts start" Is this the reason that tailwind is not working here? How can I fix this?

Any help! Thanks in advance.

margherita pizza
  • 6,623
  • 23
  • 84
  • 152

1 Answers1

0

You can resolve it by creating the Tailwind build process manually.

  1. Create a tailwind-setup.css inside src folder.
  2. Edit your package.json script object to this:
"scripts": {
    "tailwind":"npx tailwindcss -i ./src/tailwind-setup.css -o ./src/tailwind-output.css --watch",
    "start": "react-app-rewired start & yarn run tailwind",
    "build": "react-app-rewired build & yarn run tailwind",
    "test": "react-app-rewired test & yarn run tailwind",
    "eject": "react-scripts eject"
    ...
  },
  1. And import ./src/tailwind-output.css in your App.tsx.
Nagibaba
  • 4,218
  • 1
  • 35
  • 43