Tailwind CSS doesn't apply styles when setup with React and Vite

Question

I setup a React project with Vite. I also installed TailwindCSS successfully with no errors in the terminal. I followed all documentation instructions but on trying to use the Tailwind classes from the doc examples, none are working. My final rendered HTML don't reflect the styles I have set on them.

vite.config.js

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

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

tailwind.config.js

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

index.css

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

postcss.config.js

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

Here's a repo containing the full project files: Tailwind Test

Does this answer your question? How to properly set up Vite, Express, Tailwind web app — zoran404
– zoran404, Commented Jan 3, 2024 at 4:38

Hi - P · Accepted Answer · 2023-12-01 04:18:40Z

1

Finally figured out that the problem came from the tailwind.config.js file. In the content array, js came before jsx which was blocking what it was supposed to do.

One thing I don't understand is that I thought since they were listed, Tailwind is supposed to pick the one applicable to it (that is, the jsx). Why did I have to clear the js in front before it worked?

answered Dec 1, 2023 at 4:18

Hi - P

651 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam Over a year ago

Maybe it was the spaces in your extension names? All of the examples I've seen had no spaces. I'm assuming by removing js, you put jsx in front with no spaces.

Collectives™ on Stack Overflow

Tailwind CSS doesn't apply styles when setup with React and Vite

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related