Tailwind not working in create-react-app #2833
Replies
|
Running |
|
Yes, problem solved and I'm realised by now that I haven't installed postcss at all in that package.json. Thanks :) |
|
@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? |
|
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. |
|
I've managed to get it to work by following the guide for PostCSS 7 compatibility build here. I just changed it to |
|
Thanks!, installing this way solved my issue |
|
I have tried every possible way to install tailwindcss in my createReactApp project but never worked, please I need some help |
|
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 |
|
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?
|
|
Can you tell us what's the error? And also explain to us of how you install tailwind to your project step by step |
|
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.
|
|
@Asaju5 What version of Node are you using? Tailwind requires a minimum of v12 in case you are on an earlier version. |
|
work! ajaja Setting up Tailwind CSS |
|
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
… |
|
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.. |
|
@Asaju5 I'm also facing the exact same issue |
|
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 |
|
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.
|
|
Probably you do not put the configuration files in the root folder |
This was my issue. |
|
honestly, the install process is insanely complicated, and there are numerous conflicting guides on the internet. This is so horrible... smh |
|
This! |
|
I would suggest using Vite instead of Create React App.
|
|
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 🤷🏽♂️ |
|
For me on Development it gives me the error. |
|
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 |
|
Hi everyone! this is my package.json this is my tailwind.config.js |
|
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>.
|
|
if you have done whatever is stated here " https://tailwindcss.com/docs/guides/create-react-app "
|
|
Someone still looking for a solution, what @rahulrg1 said is true. Uninstall and get the latest version of create-react-app. |
|
Can anyone help me? my client want to go react-scripts@4.0.3 but after going the tailwindcss not not working |
|
BUMP - i am having the same problem |
|
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. |
|
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 ? |
|
I got the same issue. Seem it is because of dependency. If you've previously installed This is from the Create-react-app doc. |
and others
Hi there,
Basically I've already followed the steps to include tailwindcss into my react-app, these are the steps I followed :
npx create-react-app [project-name]and I open itnpm install tailwindcss autoprefixer postcss-clinpx tailwindcss initandtouch postcss.config.js. I'm doing both in my root project folderMy postcss.config.js
Inside postcss.config.js I keep getting a warning says:
My tailwind.css
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
npm startbut always got these errors: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?
Running
npm install postcss@latestshould fix it 👍🏻