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

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 in 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
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!