Tailwind not working in create-react-app #2833
-
|
Hi there, Basically I've already followed the steps to include tailwindcss into my react-app, these are the steps I followed :
My postcss.config.js const tailwindcss = require("tailwindcss");
module.exports = {
plugins: [
tailwindcss("./tailwind.config.js"),
require("autoprefixer")
]
};Inside postcss.config.js I keep getting a warning says:
My tailwind.css @tailwind base;
@tailwind components;
@tailwind utilities;My package.json {
"name": "kajol-web",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"autoprefixer": "^9.0.0",
"postcss-cli": "^7.1.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"tailwindcss": "^2.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "npm run watch:css && react-scripts start",
"build": "npm run build:css && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:css": "postcss src/styles/tailwind.css -o src/styles/main.css",
"watch:css": "postcss src/styles/tailwind.css -o src/styles/main.css"
},
"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"
]
}
}Then I ran
I googled and I found the same problem in stackoverflow as this and it already two months ago but there's no satisfying answer of how to fix it. Could you please help us with this problem? |
Beta Was this translation helpful? Give feedback.
Replies: 19 comments 29 replies
-
|
Running |
Beta Was this translation helpful? Give feedback.
-
|
@erpriliano - in the tailwind docs its mentioned using CRACO to get it working, but here you are not, can you help me learn why this way instead of via CRACO? |
Beta Was this translation helpful? Give feedback.
-
|
To be honest with you, the moment I asked the question the docs for installing tailwind in CRA haven't published yet so I've to add it manually by using previous docs and need to did some improvement a bit as needed in my project. |
Beta Was this translation helpful? Give feedback.
-
|
ah! okay - gotcha - that makes sense. thanks for sharing - was making sure i wasnt missing something. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much for helping 🤍 |
Beta Was this translation helpful? Give feedback.
-
|
Fixed now for me too with "npm install postcss@latest" 24th June 2022 ! |
Beta Was this translation helpful? Give feedback.
-
|
I've managed to get it to work by following the guide for PostCSS 7 compatibility build here. I just changed it to |
Beta Was this translation helpful? Give feedback.
-
|
Thanks!, installing this way solved my issue |
Beta Was this translation helpful? Give feedback.
-
|
Thanks |
Beta Was this translation helpful? Give feedback.
-
|
I have tried every possible way to install tailwindcss in my createReactApp project but never worked, please I need some help |
Beta Was this translation helpful? Give feedback.
-
|
Now that tailwind has provided us with some comprehensive explanation of how to install it in our CRA project. You might want to see this |
Beta Was this translation helpful? Give feedback.
-
|
I followed every single step in the installation page, but I keep getting
an error message, do you think something might be wrong with my pc?
|
Beta Was this translation helpful? Give feedback.
-
|
Can you tell us what's the error? And also explain to us of how you install tailwind to your project step by step |
Beta Was this translation helpful? Give feedback.
-
|
I followed all the steps in *tailwindcss.com/docs/guides/create-react-app,
and even watched a video on YouTube:
Here’s the error message:-
SyntaxError: Invalid or unexpected token
at wrapSafe (internal/modules/cjs/loader.js:979:16)
at Module._compile (internal/modules/cjs/loader.js:1027:27)
at Object.Module._extensions..js
(internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (C:\Users\My
Pc\Documents\tailwind-app\node_modules\tailwindcss\lib\util\generateVariantFunction.js:14:16)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js
(internal/modules/cjs/loader.js:1092:10)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:1100) UnhandledPromiseRejectionWarning: Unhandled promise rejection.
This error originated either by throwing inside of an async function
without a catch block, or by rejecting a promise which was not handled with
.catch(). To terminate the node process on unhandled promise rejection, use
the CLI flag `--unhandled-rejections=strict` (see
https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection
id: 2)
(node:1100) [DEP0018] DeprecationWarning: Unhandled promise rejections are
deprecated. In the future, promise rejections that are not handled will
terminate the Node.js process with
a non-zero exit code.
|
Beta Was this translation helpful? Give feedback.
-
|
@Asaju5 What version of Node are you using? Tailwind requires a minimum of v12 in case you are on an earlier version. |
Beta Was this translation helpful? Give feedback.
-
|
work! ajaja Setting up Tailwind CSS |
Beta Was this translation helpful? Give feedback.
-
|
I upgraded my node to version 14.15.3 LTS yesterday, honestly this is so
frustrating, tailwind is exactly the framework I’ve been looking for
… |
Beta Was this translation helpful? Give feedback.
-
|
I'm trying to guess that your problem is with your Node, will you try to re-install node on your PC? See if that works.. |
Beta Was this translation helpful? Give feedback.
-
|
@Asaju5 I'm also facing the exact same issue |
Beta Was this translation helpful? Give feedback.
-
|
The new documentation is working fine. https://tailwindcss.com/docs/guides/create-react-app . go to the link and try to the installation part step by step. I hope it will work |
Beta Was this translation helpful? Give feedback.
-
|
ailwind-app@0.1.0 start /home/phi/React_projectos/tailwind-app
(node:23947) UnhandledPromiseRejectionWarning: TypeError: Object.fromEntries is not a function |
Beta Was this translation helpful? Give feedback.
-
|
Hello, I'm having problems starting my React project with TailwindCss with both NPM and YARN represent the same error, and I'm definitely not sure what to do to solve this problem. (Obs: I'm not fluent in the English language, I'm Brazilian, I'm sorry for any mistakes in transcription.
|
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Probably you do not put the configuration files in the root folder |
Beta Was this translation helpful? Give feedback.
-
This was my issue. |
Beta Was this translation helpful? Give feedback.
-
|
honestly, the install process is insanely complicated, and there are numerous conflicting guides on the internet. This is so horrible... smh |
Beta Was this translation helpful? Give feedback.
-
|
This! |
Beta Was this translation helpful? Give feedback.
-
|
I would suggest using Vite instead of Create React App.
|
Beta Was this translation helpful? Give feedback.
-
|
I followed every step here and it works in development. But when I deploy to Heroku, the error log says: Error: Cannot find module tailwindcss 🤷🏽♂️ |
Beta Was this translation helpful? Give feedback.
-
|
For me on Development it gives me the error. |
Beta Was this translation helpful? Give feedback.
-
|
I have the same error. Works perfectly in development but in Heroku I am getting Error: cannot find module 'tailwindcss' and the build doesn't complete |
Beta Was this translation helpful? Give feedback.
-
|
Hi everyone! this is my package.json this is my tailwind.config.js |
Beta Was this translation helpful? Give feedback.
-
|
I did. However, since I didn't see anyone to solve it, I ended up using the
one I'm proficient in.
…On Mon, Oct 25, 2021 at 7:44 AM Tutorial Doctor ***@***.***> wrote:
Probably you do not put the configuration files in the root folder
This was my issue.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#2833 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ALK3DBMNASMRPMGRKTYC4PLUIT4E7ANCNFSM4T4DVGDQ>
.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.
|
Beta Was this translation helpful? Give feedback.
-
|
if you have done whatever is stated here " https://tailwindcss.com/docs/guides/create-react-app "
|
Beta Was this translation helpful? Give feedback.
-
|
Someone still looking for a solution, what @rahulrg1 said is true. Uninstall and get the latest version of create-react-app. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks a lot, still works fine! The link for the 4th step is now https://v2.tailwindcss.com/docs/guides/create-react-app |
Beta Was this translation helpful? Give feedback.
-
|
Can anyone help me? my client want to go react-scripts@4.0.3 but after going the tailwindcss not not working |
Beta Was this translation helpful? Give feedback.
-
|
BUMP - i am having the same problem |
Beta Was this translation helpful? Give feedback.
-
|
I ran into the same problem today. Needed to downgrade react-scripts from 5.0.1 to 4.0.3 and after doing that tailwind styling no longer worked. |
Beta Was this translation helpful? Give feedback.
-
|
i had the same issue just today i had to downgrade my react-scripts from 5.0.1 to 4.0.3 but tailwind stopped working. does anyone knows any solution ? |
Beta Was this translation helpful? Give feedback.
-
|
I got the same issue. Seem it is because of dependency. If you've previously installed This is from the Create-react-app doc. |
Beta Was this translation helpful? Give feedback.
-
|
It not working, i have to use
to make it work, is there a way which starts it automatically when I start my react app? |
Beta Was this translation helpful? Give feedback.
-
|
Yes it is not working |
Beta Was this translation helpful? Give feedback.
-
|
my tailwide css doesn't show any styling on the app My App.js -
My index.css -
My postcss.config.js -
|
Beta Was this translation helpful? Give feedback.
-
|
Consider checking:
|
Beta Was this translation helpful? Give feedback.
-
|
Ok i will check it! Thank you |
Beta Was this translation helpful? Give feedback.
-
|
Tailwind not working in create-react-app |
Beta Was this translation helpful? Give feedback.
and others
Running
npm install postcss@latestshould fix it 👍🏻