Tailwind CSS is not working in Vite React-CodePudding

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?

CodePudding user response：

If you have installed postcss and autoprefixer (as outlined in step #2 here: https://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")],
};

CodePudding user response：

After following the guides from the official documentation, you may want to check in your package.json file and see under the devDependencies if tailwind is appearing there or not. Also, check in your postcss.config.cjs file and see if the following is there:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Hope this helps.