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:

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

Or if you prefer yarn:

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

Once the project is created, navigate into the directory:

shell
cd react-app

Then install the dependencies:

shell
npm install

Finally, start up the dev server:

shell
npm run dev

To install Tailwind CSS and its peer dependencies, run:

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

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

shell
npx tailwindcss init -p

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

index.css
@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)

html
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:

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