Tailwind CSS: Setup Tailwind With React

30 / Apr / 2023 by Mohd Ebrahim 0 comments

Setup tailwind with react

1. create your project folder

Open the terminal and navigate your created project, and then run the below command
npx create-react-app react-demo.

Once reactdemo app has been created,

>> go to the react-demo folder

>> run the “npm start” command

2. Install Tailwind CSS and generate the configuration file

>> npm install -D tailwindcss
>> npx tailwindcss init

Your folder and package.json file should look like this in your VSCode:‌

3. Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.

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

your file should now look like this:

4. Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

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

your file should now look like this:

Writing CSS: 

You can start using Tailwind’s utility classes to style your content. Navigate to your App.jsx file, where you should see this below:


Note: if your tailwind CSS property is not reflected on the application, restart your react app.


Now you can develop your responsive application with react and tailwind CSS. For more exploration, you can go through here. Thanks for reading this article; I hope you will find this helpful.


Leave a Reply

Your email address will not be published. Required fields are marked *