Reactjs – Unable to get TailwindCSS working with React + Vite

I followed the installation process for TailwindCSS from the official docs, but am unable to get it to work.

This is how my relevant files look:

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: {},
  },
}

index.css

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

Default file structure is unchanged from Vite’s setup. My js files are inside subdirectories in the /src

I’ve tried changing the vite.config.js as per recommendations, but neither the modified or unchanged versions work

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

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

Lastly, I of course tried restarting the server haha

Any help is greatly appreciated 🙂