CODEWITHSUNDEEP
reactjstailwind-csstailwind-3
willscode
willscode

Reputation: 96

Tailwind classes not working with react after installation

The tailwind CSS classes are not displaying, I followed the installation process via tailwindcss.com create-react-app to install this.

I cross-checked and I can't seem to find why it is still not working. I did update the react scripts to version 5.0.1, but it did not solve the issue.

Here is the package.json file:

    {
  "name": "my-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.13",
    "tailwindcss": "^3.0.24"
  }
}

Tailwind.config.js

    module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

function App() {
    return <div className="container mx_auto bg-gray-200 rounded-xl">
            <p className="text-5xl font-bold">
                Welcome
            </p>
            <p className="text-grey-500 text-lg">
                    React and Tailwind css updated now 
            </p>

    </div>;
}

export default App;

Upvotes: 6

Views: 23407

Answers (6)

Bruno Simm
Bruno Simm

Reputation: 11

In my case, the index.css import was missing in main.tsx.

import './index.css';

Upvotes: 1

Wahab Shah
Wahab Shah

Reputation: 2266

I had this issue where everything was installed correctly from the official docs of tailwind. But, the styles were not being reflected.

When I say the whole installation went fine i really mean everything, like content inside the config, tailwindcss, postcss, autoprefixer and included the base tailwind

@tailwind base; 
@tailwind components; 
@tailwind utilities;

styles in then index.css.

The issue on my end was I just had to update the react scripts with this command:

npm install react-scripts@latest

My previous version was 2.x and after installation 5.x was installed and everything is working fine now.

PS: And tailwind directives can be added either way, both work for me.

  • Option 1 (I have gone with this one) 
    @tailwind base; 
@tailwind components; 
@tailwind utilities;
  • Option 2 
    @import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Upvotes: 8

walid
walid

Reputation: 31

  1. Uninstall tailwind from devDependencies:

    npm uninstall <name of the modules> --save-dev

  2. Install Tailwind on dependencies, not devDependencies (without the -D)

    npm install tailwindcss postcss autoprefixer

  3. Follow the rest from the official docs.

Upvotes: 1

Nasrin Tavana
Nasrin Tavana

Reputation: 1

  1. Make sure to install tailwind inside project.
  2. Configure your template paths => Add the paths to all of your template files in your tailwind.config.js file.
  3. Make sure tailwind and its version are installed correctly.
  4. Add Tailwind directives to your CSS

Add @tailwind directives to your ./src/index.css file for each of your Tailwind layers. Start exactly on the first line and before all other code.

@tailwind base;
@tailwind components;
@tailwind utilities;

Upvotes: 0

Saeid Shoja
Saeid Shoja

Reputation: 247

Try this:

npm install postcss-flexbugs-fixes postcss-normalize postcss-preset-env

Upvotes: 0

Ayush Chouhan
Ayush Chouhan

Reputation: 1

Add this:

import './index.css';

Upvotes: 0

Related Questions