CODEWITHSUNDEEP
reactjstailwind-csstailwind-css-4
pranav s devang
pranav s devang

Reputation: 21

Tailwind css isnt working in my react i.e it isnt being detected in my css files

My package.json:

{
  "name": "react-app",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "dependencies": {
    "@craco/craco": "^7.1.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@tiptap/react": "^2.11.5",
    "@tiptap/starter-kit": "^2.11.5",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.121",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "dompurify": "^3.2.4",
    "quill": "^2.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-fast-marquee": "^1.6.5",
    "react-icons": "^5.5.0",
    "react-multi-carousel": "^2.8.5",
    "react-quill": "^2.0.0",
    "react-responsive-carousel": "^3.2.23",
    "react-router-dom": "^7.0.2",
    "react-scripts": "^5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco 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.20",
    "postcss": "^8.5.3",
    "postcss-cli": "^11.0.0",
    "tailwindcss": "^4.0.9"
  }
}

I tried usinng tailwind by installing it in a separate react app but faced the same issue there. Tried installing tailwind globally and checking for its version but tailwindcss command wasnt being recognized, tried removing node_modules manually removing tailwind dependencides from package.json then reinsatlling everything from scratch but none of the methods worked

Upvotes: 2

Views: 44

Answers (1)

rozsazoltan
rozsazoltan

Reputation: 9073

npm install tailwindcss @tailwindcss/vite

I see you're using v4. The use of tailwind.config.js has been discontinued, and instead, you can use a simple CSS-first configuration.

However, it's possible to use the legacy JavaScript-based configuration via the @config directive.

There's no need to run the init process anymore during installation.

Just install the TailwindCSS Vite-integrated plugin.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
})

Then, add this to your main CSS file:

@import "tailwindcss";

And that's it! TailwindCSS v4 is now integrated into your project.

Upvotes: 1

Related Questions