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 configtailwind.config.js file for your project using the Tailwind CLI utility included when you install thetailwindcss 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 apostcss.config.js file in your project that looks like this:

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

First, we’ll change thecontent key intailwind.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 creatinghere