Setting up TailwindCSS in React App project.

Getting Started

First, create a React project with create-react-app:

npx create-react-app react-tailwindcss

if Create React App version < 5.0:

npx create-react-app@latest react-tailwindcss

or

npx create-react-app@5.0.0 react-tailwindcss

Install TailwindCSS

Install the dependencies required for Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer

Next, generate your config tailwind.config.js file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package:

npx tailwindcss init

It will have the following content:

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Use the -p flag if you’d like to also generate a basic postcss.config.js file alongside your tailwind.config.js file:

npx tailwindcss init -p

This will generate a postcss.config.js file in your project that looks like this:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

First, we’ll change the content key in tailwind.config.js:

content: ["./src/**/*.{js,jsx,ts,tsx}"],

Include Tailwind in your CSS

Use the @tailwind directive to include Tailwind’s base, components, and utilities styles, replacing the original file contents:

@tailwind base;
@tailwind components;
@tailwind utilities

Let’s start the server now. Run the following command:

npm start

You can view a demo of the website we’re creating here