Install & Setup Tailwind CSS + React + Typescript + Vite

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

1. Create React 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

Choose React with TypeScript from the available options.

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 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>
  );
}

Run your React app using the command below.

npm run dev

Sources

react.dev
tailwindcss.com (tailwindcss.com/docs)

vitejs.dev
typescriptlang.org

Install & Setup Tailwind CSS + React + Typescript + Vite

1. Create React App Using Vite

2. Installing Tailwind CSS in Your React App

See Also

Aaronn