Tailwind CSS is not working in Vite + React

Question

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

However, it's not picking up any of the Tailwind styles.

tailwind.config.cjs

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

index.css

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

main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { router } from "./router";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

The only dependency I have installed is react-router-dom.

How can I fix this?

Answer 1

Here are the Changes I made in vite.config.js and it worked

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

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

Answer 2

If you have installed postcss and autoprefixer (as outlined in step #2 here: https://v3.tailwindcss.com/docs/guides/vite), you should see both libraries in the "devDependencies" section of your package.json. If they are installed, you will need a postcss.config.cjs file in the root of your project which contains the following:

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
};