Install & Setup Tailwind CSS + React 18+ Typescript + Vite

In this section, we'll install and set up Tailwind CSS in a React 18 app with TypeScript using the Vite build tool.

1. Create React 18 App Using Vite

Follow these steps to install React with Vite and get your project up and running.

npm create vite@latest
#or  Yarn:
yarn create vite
#With PNPM:
pnpm create vite

react tailwind vite

Choose React with TypeScript from the available options.

react tailwind typescript

Move to your project directory and run the npm command.

cd react-tailwind
npm install
npm run dev

2. Installing Tailwind CSS in Your React App

First, install Tailwind CSS and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Add the paths to all of your template files in your tailwind.config.js file.

tailwind.config.js

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

Include the @tailwind directives for each of Tailwind's layers in your ./src/index.css file.

./src/index.css

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

Begin styling your React 18 app with TypeScript using Tailwind's utility classes.

App.tsx

export default function App() {
  return (
    <div className="flex justify-center h-screen items-center bg-gray-200">
      <h1 className="text-3xl font-bold text-blue-800">
        Install & Setup Tailwind CSS + React 18+ Typescript
      </h1>
    </div>
  );
}