CODEWITHSUNDEEP
javascriptcssreactjstailwind-cssvite
Y Nawodya
Y Nawodya

Reputation: 321

Why Tailwind css not work in vite+react project

I created a React application using Vite and used the documentation provided here to install Tailwind: Tailwind CSS Installation Guide.

however still not working tailwind css in my react application.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],

}

postcss.config.js

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

package.json

  "devDependencies": {
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.2.6",
    "@vitejs/plugin-react": "^4.0.1",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.44.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.1",
    "postcss": "^8.4.26",
    "tailwindcss": "^3.3.3",
    "vite": "^4.4.0"
  }

index.css

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

but still not show this designs

App.jsx

function App() {

  return (
    <div>
      <h1 className='head-text'>React App</h1>
      <p className="text-yellow-500">Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, quasi.</p>
    </div>
  )
}

export default App

Upvotes: 1

Views: 968

Answers (1)

Medfad
Medfad

Reputation: 1

As per the documentation you linked, setting up taildwindcss with vite requires only three steps:

running this command in your terminal:

npm install tailwindcss @tailwindcss/vite

and changing this part of your code in the vite.config.js from:

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

to

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

You can then start using tailwind in your CSS files by adding this import to them:

index.css

@import "tailwindcss";

Upvotes: 0

Related Questions