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.
Advertisement
Answer
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!