1. Create a new Vite and React project using the following command

npx create-vite@latest my-react-app --template react

2. Change into the project directory

cd my-react-app

3. Install the required dependencies

npm install tailwindcss@latest postcss@latest autoprefixer@latest

4. Generate the TailwindCSS configuration file

npx tailwindcss init -p

5. Open the tailwind.config.js file and paste the following code or customize the configuration as needed

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

6. Create a postcss.config.js file in the project root with the following content

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

7. Import the Tailwind CSS styles in your index.css file

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

8. Import the index.css file in your index.js file

import "./index.css";

9. Start using Tailwind’s utility classes to style your content

export default function App() {
  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}

10. Start the development server

npm run dev

That's it! You have successfully installed Tailwind CSS in your Vite React project.