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.