install & setup tailwind css + react 18+ typescript + vite

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

February 27, 2024 By Aaronn

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

react tailwind vite

Choose React with TypeScript from the available options.

react tailwind typescript

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.


/** @type {import('tailwindcss').Config} */
export default {
  content: [
  theme: {
    extend: {},
  plugins: [],

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


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

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


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
setup react tailwind vite typescript

setup react tailwind vite typescript

Run your React app using the command below.

npm run dev

Related Posts

React TypeScript Tailwind CSS Popup Modal Tutorial

How to Use Toastify in React with Tailwind CSS

React with Tailwind CSS File Upload Example

React Tailwind CSS Forgot Password Example

Create a Responsive Navbar React Tailwind CSS TypeScript

How to Add Drag-and-Drop Image Upload with Dropzone in React Using Tailwind CSS