tailwind css installed but not working in my vite + react project

[rmGFW]

What version of Tailwind CSS are you using?
3.3.5

What build tool (or framework if it abstracts the build tool) are you using?

vite

What version of Node.js are you using?

v20.6.1

What browser are you using?

chrome

What operating system are you using?

macos

Describe your issue

my project use vite + react (i create project select vanilla js and after add react to it )
i install the tailwind css follow the guide https://tailwindcss.com/docs/guides/vite
no any step is missing , but the tailwindcss seems not work,

look this screenshot, none class's css can be find in the style pane

[thecrypticace]

Hey! Did you update your content config? It looks to me like utilities aren't being generated because it isn't scanning any files.

[iamgabrielsoft]

@amoeba25 solution works really well

[MaheshPawaar]

I had same issue. but tweaking vite.config.js helped me. Thanks!

[jimmyzzxhlh]

Ran into the same issue. This really needs to be documented in the official documentation: https://tailwindcss.com/docs/guides/vite

[MuhammadOwais-SE]

@jimmyzzxhlh jimmyzzxhlh Thank you. Your answer help me.

[dzienisz]

True, it's needs to be added to the documentation.

[manish0kuniyal]

[Writwiks]

Thank you so much buddy after an hour finally solved the issue.

[MVKarthikReddy]

That is (using cdn) not working after deploying.

I followed the tailwind css guide but it is also not working.
Can anyone help me?

[amoeba25]

Tailwind doesn't recommend using the play CDN for production. Here from their docs
"Use the Play CDN to try Tailwind right in the browser without any build step. The Play CDN is designed for development purposes only, and is not the best choice for production.". You will have to tweak the vite config to make it work

[SubhanKashif7]

Hi

you may also try updating index.html

try adding this script tag

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

it worked for me

this is not for production

[boiwantlearncode]

Am I the only one not seeing anything?

[iamtanmoy2002]

hey, my tailwind is working but suggestion is not working, i have the tailwind intelligence installed but still I'm not getting any suggestions. Need help.

[PRRASHANT]

press ctrl+space when you will write the css part

[raghavvvgaba]

Why isn't it showing automatically? It's irritating that I have to press ctrl+space for each class that I write

[TinySkillet]

Make sure you don't have spaces here:

"./src/**/*.{js,ts,jsx,tsx}",

I apparently had it as "./src/**/*.{js ,ts, jsx, tsx}", lol

[Sophidoo]

This really helped

[Kvngstar]

@amoeba25 thanks so much for the react-ts solution. it worked

[na-zi-ya]

I'm having trouble getting Tailwind CSS to work in my Vite + React project. I have set up my vite.config.js and tailwind.config.js files as follows:


I have included Tailwind CSS classes in my components, but they don't seem to be applying,imported the Tailwind CSS styles in my main CSS file (index.css)
Could someone please help me identify what might be going wrong or suggest any steps I might have missed?

[Kvngstar]

@na-zi-ya did you import

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

In your index.css file? If not do so

[na-zi-ya]

@na-zi-ya did you import

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

In your index.css file? If not do so

Yes..

[gptkong]

My tailwindcss is also not working, may I ask why?

Framework: vite+react-ts

here is package.json

{
  "name": "vite-react-ts-map",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "mapbox-gl": "^3.7.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.9.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "postcss": "^8.4.47",
    "tailwindcss": "^3.4.13",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.0.1",
    "vite": "^5.4.1"
  }
}

[Kvngstar]

In the vite.config.js, copy and paste this

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


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

This is the solution provided earlier, try this @gptkong @na-zi-ya

[HishamAbualhaj]

Helped me so much, Thank a lot

[Kvngstar]

You're welcome @HishamAbualhaj

[W1Real]

Worked here as well.

Debug info for the devs (this is how I installed):

pnpm create vite
# 1) Type name
# 2) Select "TypeScript + SWC"
# 3) Done.

pnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest
pnpm dlx tailwindcss init

pnpm install tailwind-merge

Then... imported and added the plugin like he instructed above.
OBS: Since I'm using SWC the only difference is on the import statement above, I import react from '@vitejs/plugin-react-swc'

[AmulApplore]

thanks man it just works

[Hassan3322751]

Very thanks its worked perfectly

[AbidKhan01ak]

Apparently, it worked for me by removing a forward slash from tailwind.config.js.

export default { content: [ "./index.html", "./src/**/*/.{js,ts,jsx,tsx}", ],

It came like this, then I removed one forward slash from the line "./src/**/*/.{js,ts,jsx,tsx}", and it worked.
The final code is

export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ],

[befabry]

Hello,

I am using Preact, Tailwind and Docker. It's not working and I don't get why.

My docker-compose file

# docker-compose.yml
services:
  frontend:
    image: node:23-alpine
    restart: unless-stopped
    volumes:
      - '.:/app'
    ports:
      - '5173:5173'
    environment:
      - NODE_ENV=development
    command: ['npm', 'run', 'dev']
    working_dir: /app
    networks:
      - caddie_network

networks:
  caddie_network:
    external: true
      #name: caddie_network

my postcss config

// postcss.config.mjs
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

my tailwind config

// tailwind.config.mjs
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  presets: [],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {
      colors: {
        text: '#cad3f5',
        subtext1: '#b8c0e0',
        subtext0: '#a5adcb',
        overlay2: '#939ab7',
        overlay1: '#8087a2',
        overlay0: '#6e738d',
        surface2: '#5b6078',
        surface1: '#494d64',
        surface0: '#363a4f',
        base: '#24273a',
        mantle: '#1e2030',
        crust: '#181926',
        yellow: '#eed49f',
        green: '#a6da95',
        sapphire: '#7dc4e4',
        teal: '#8bd5ca',
        sky: '#91d7e3',
        blue: '#8aadf4',
        lavender: '#b7bdf8',
        peach: '#f5a97f',
        maroon: '#ee99a0',
        red: '#ed8796',
        mauve: '#c6a0f6',
        pink: '#f5bde6',
        flamingo: '#f0c6c6',
        rose: '#f4dbd6',
      },
    },
  },
  plugins: [],
};

my vite config

//vite.config.ts

// eslint-disable-next-line import/no-named-as-default
import preact from '@preact/preset-vite';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [preact(), tsconfigPaths()],
  server: {
    proxy: {
      '/api': {
        target: 'http://backend:3001',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        configure: (proxy) => {
          proxy.on('error', (err) => {
            console.log('proxy error', err);
          });
          proxy.on('proxyReq', (_proxyReq, req) => {
            console.log('Sending Request to the Target:', req.method, req.url);
          });
          proxy.on('proxyRes', (proxyRes, req) => {
            console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
          });
        },
      },
    },
  },
});

I'm having to import the CDN in my index.html and some classes aren't working. It worked for about 1 evening, then it didn't.

I tried various tinkering I found here, none of them worked.

If you think it's easier to check out the repo you can have a look here :

repo

[AbidKhan01ak]

Run this command locally to see if Tailwind is generating the styles:

npx tailwindcss build -o output.css

If this fails, there’s likely an issue with the Tailwind setup or your environment.

Verify the PostCSS plugin is running:

npx postcss --config postcss.config.mjs

[befabry]

the first command

npx tailwindcss build -o output.css 

seems to work fine.

However for the second, I can't make it work. I had to install postcss-cli

I tried through Docker and without, I'm getting :

> docker compose run --rm frontend  ./node_modules/.bin/postcss --config postcss.config.mjs
Input Error: Did not receive any STDIN

It's looking like this :

instead of something like that :

Would it be possible that PostCSS isn't doing what it's supposed ? I'm having trouble making it work with or without Docker

[befabry]

I had an empty presets :

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  // presets: [], <----------------
  darkMode: 'media', // or 'class'
  theme: {
    extend: {
      colors: {
        text: '#cad3f5',
        subtext1: '#b8c0e0',
        subtext0: '#a5adcb',
        overlay2: '#939ab7',
        overlay1: '#8087a2',
        overlay0: '#6e738d',
        surface2: '#5b6078',
        surface1: '#494d64',
        surface0: '#363a4f',
        base: '#24273a',
        mantle: '#1e2030',
        crust: '#181926',
        yellow: '#eed49f',
        green: '#a6da95',
        sapphire: '#7dc4e4',
        teal: '#8bd5ca',
        sky: '#91d7e3',
        blue: '#8aadf4',
        lavender: '#b7bdf8',
        peach: '#f5a97f',
        maroon: '#ee99a0',
        red: '#ed8796',
        mauve: '#c6a0f6',
        pink: '#f5bde6',
        flamingo: '#f0c6c6',
        rose: '#f4dbd6',
      },
    },
  },
  plugin

See answer here : #15373 (comment)

[TomerH0525]

no solutions here worked for me ...
ive got this setup

running npm run dev will throw the following error :

[TomerH0525]

figured it out...
in the tailwind.config.js instead of module.exports = {......
i typed export default {....
and it worked...