React: Installing Tailwind CSS in a React app

In this demo I’m going to assume you have created an app using Vite, like I showed you in setting up a React project with Vite.

Now I want show you how to install Tailwind CSS.

In the terminal, run this command to install these dependencies:

npm i -D tailwindcss postcss autoprefixer

# or

bun i -D tailwindcss postcss autoprefixer

followed by

npx tailwindcss init -p

This command creates a file called tailwind.config.js which contains this:

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

Now open this file with VS Code and add to the content field the places where we might find the Tailwind classes we’re going to write:

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

This setting will be used by Tailwind to determine where to look to generate the CSS file.

Now in the src/index.css file add those 3 lines:

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

(you can remove all the other content, which most probably you will not use)

Restart the app with npm run dev and Tailwind should be enabled.

You should see something like this:

Now for example try changing your App.tsx / App.jsx to this:

import './App.css'

function App() {
  return (
      <p className='text-blue-600 font-bold text-6xl text-center'>TEST</p>

export default App

It should work:

That’s it, we installed Tailwind CSS successfully.

Lessons this unit:

0: Introduction
1: DEMO Setting up a React project with Vite
2: React Components
3: Introduction to JSX
4: Using JSX to compose UI
5: The difference between JSX and HTML
6: Embedding JavaScript in JSX
7: Handling user events
8: Managing state
9: Component props
10: Data flow
11: Lifecycle events
12: Managing forms in React
13: Install the React Developer Tools
14: ▶︎ DEMO Installing Tailwind CSS in a React app
15: DEMO Build a counter in React