Tailwindcss V3.0.1 classes is not working

user_12566640 0
Viewed 2350

I tried to install the tailwindcss 3.0.1 using this guide but when I added tailwindcss classes to my react code, it didn't work. I followed this guide to integrate tailwind to react: https://tailwindcss.com/docs/guides/create-react-app

I created a react app using npx creat-react-app myApp instead of npx create-react-app@next --scripts-version=@next --template=cra-template@next my-project

anyone please help me with this.

tailwind-css reactjs
3 Answers

The main issue with the setup is that tailwind version 3 depends on the latest react-scripts version with native support for postCSS to compile tailwind without using extra tool like craco.

You just have to change the version of react-scripts in package.json to "5.0.0-next.58" and reinstall your packages with npm install or yarn install. You can visit this repo to understand better https://github.com/adamwathan/tailwind-cra-next

user_177275360

I have tried a lot of solutions and it seems that in order to successfully use React with Tailwindcss V3.0.1, the first line in the installation is crucial:

npx create-react-app@next --scripts-version=@next --template=cra-template@next my-project

But I found simple solution Install everything like in docs and add this line to your index.html in Public folder.It's works but, for development purposes only !

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

Like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <title>React App</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
user_137059790

I faced the same issue and found this solution: https://phoenixnap.com/kb/update-node-js-version

I updated my node js since the current version was incompatible with tailwindcss v3.0. (I updated it from 14.16.0 to 17.3.0)

First check your node version: node -v

If it's below v16 then consider updating.

Run this to update node js to the latest version:

npm cache clean -f
npm install -g n
sudo n stable

After this delete your node_modules folder and install it again by either running yarn or npm i

user_134669640
Related