Create a React + TypeScript + Tailwind project with Vite

To quickly bootstrap a new React project with TypeScript using Vite, you can use the following npm command:

npm create vite@latest react-app -- --template react-ts

Or if you prefer yarn:

yarn create vite react-app --template react-ts

Once the project is created, navigate into the directory:

cd react-app

Then install the dependencies:

npm install

Finally, start up the dev server:

npm run dev

To install Tailwind CSS and its peer dependencies, run:

npm install tailwindcss@latest postcss@latest autoprefixer@latest @headlessui/react @heroicons/react --save-dev

Next, you'll need to generate a Tailwind configuration file:

npx tailwindcss init -p

Open the index.css file in your project's src directory and replace its content with the following:

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

html {
    @apply h-full;
}
body {
    @apply h-full;
}
#root {
    @apply h-full;
}

To import Tailwind in the project, open the main.tsx file and add the following line at the top of the file (if it's not already there)

import './index.css';

To ensure that Tailwind CSS can purge unused styles and optimize your final CSS bundle, you need to specify the content files where Tailwind classes are used. Open the tailwind.config.js file in your project root and add the following configuration:

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