tailwindcss not working in create-react-app

user_12411421 0
Viewed 14276

I am using tailwindcss for the first time and especially in a react app. I followed the documentation, read some articles and watched some videos. I have my react-app running but tailwindcss classes do not reflect on the application. I have restarted the project from scratch severally but I still face the same issue. Here is my package.json

enter image description here

reactjs class
9 Answers

I had to upgrade the react-scripts

npm i react-scripts@latest
user_90741340
user_124114210

What I have done is

  • Updating version of tailwindcss,postcss,autoprefixer and react-scripts to the latest version.
  • Replacing tailwind.config content with
    content: ["./src/**/*.{js,jsx,ts,tsx}", "./index.html"],
user_137283410

This is happening because of installing tailwind in Devdependencies. Try reinstalling without -D

user_120949280

do

npm i tailwindcss postcss-cli autoprefixer@^9.8.6
user_147864690

For react applications, there are dedicated tailwind CSS docs. In tailwind.config.js inside module.exports changed the content from content: ["./src/**/*.{html,js}"] to this

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

this fixed my issue

user_152066620

I was only able to solve this issue by installing these into the dependencies:

npm install tailwindcss postcss autoprefixer
user_92136000

Firstly I have followed all the steps to install tailwind in my project using this. And then tried to fix the issue by:

  1. npm install tailwindcss postcss autoprefixer@^9.8.6
  2. npm install react-scripts@latest
user_166562910

all the configurations from https://tailwindcss.com/docs/guides/create-react-app tailwind docs didn't work for me, then I just went to

tailwind.config file

then changed the content to link to just one tsx file

  content: [
    "./src/page/attendee/Home.tsx",
  ],

and it worked for all of my components

user_179359640
Related