8/4/24, 14:52 How to Setup React and Tailwind CSS with Vite in a Project

Forum Donate

Learn to code — free 3,000-hour curriculum

JANUARY 9, 2023 / #REACT

How to Setup React and

Tailwind CSS with Vite in a
Project
Segun Ajibola

Tailwind CSS is a popular CSS framework, and React is

one of the most popular JavaScript libraries.

And Tailwind CSS and React are a great combo to use if you're

Alt +building
A a frontend project.

https://www.freecodecamp.org/news/how-to-install-tailwindcss-in-react/ 1/14
8/4/24, 14:52 How to Setup React and Tailwind CSS with Vite in a Project

In this article, you will learn how to setup your coding Forum
environmentDonate
with Vite, install React and Tailwind CSS with their latest versions,
Learn to code — free 3,000-hour curriculum
and start building your projects right away.

We will be using these tools:

VSCode for our code editor

Node.js for our package manager

Vite for our development environment

If you don't have these tools installed, you can do so by clicking the
links for each one above.

After setting up Node.js for your VSCode, you can now use Node.js
to install Vite for your project using the terminal.

Step 1 – Create Your Project

Folder
Open your terminal, and navigate to the folder where you want to
build your project – for example Desktop. Input the command below
in the terminal and click enter :‌

npm create vite@latest your-project-name -- --template react

"your-project-name" shoud be replaced with your project name. food-app for

example

The command above will create your project folder.‌

https://www.freecodecamp.org/news/how-to-install-tailwindcss-in-react/ 2/14
8/4/24, 14:52 How to Setup React and Tailwind CSS with Vite in a Project

My project name is "food-app", the food-app folder will be created in the

Forum Donate
Programming folder on my Desktop
Learn to code — free 3,000-hour curriculum

‌Note that we have used -- --template react to specify that we

are building a React app with Vite.

Step 2 – Navigate to Your Project

Folder
Input the command below in your terminal and click enter :

cd food-app

‌This command will navigate to your project folder. You should have
this:

Inputing "cd food-app" in terminal to navigate to the "food-app" folder

Step 3 – Install Tailwind CSS and

Other Dependencies
Input the command below in your terminal and click enter :

https://www.freecodecamp.org/news/how-to-install-tailwindcss-in-react/ 3/14
8/4/24, 14:52 How to Setup React and Tailwind CSS with Vite in a Project

Forum Donate
npm install -D tailwindcss postcss autoprefixer

Learn to code — free 3,000-hour curriculum

Input this command to install the tailwindcss, postcss and autoprefixer dependencies

This command will install the following:

The Tailwind CSS framework

Post CSS, which provides plugins to perform different

functionalities like prefixes in Vanilla CSS

Autoprefixer, which is a PostCSS plugin to parse CSS and add

vendor prefixes to CSS rules.

Your folder should look like this in your VSCode:‌

Confirm that you have the below text in your package.json ‌:

https://www.freecodecamp.org/news/how-to-install-tailwindcss-in-react/ 4/14
8/4/24, 14:52 How to Setup React and Tailwind CSS with Vite in a Project

Forum Donate

Learn to code — free 3,000-hour curriculum

Notice the autoprefixer, postcss and tailwindcss dependencies from line 19

- 21. The version number might have changed when you read this.

Step 4 – Generate the

Configuration Files
Input the command below in your terminal and click enter :

npx tailwindcss init -p

This command will generate tailwindcss config file

https://www.freecodecamp.org/news/how-to-install-tailwindcss-in-react/ 5/14
8/4/24, 14:52 How to Setup React and Tailwind CSS with Vite in a Project

Forum Donate
This command generates tailwind.config.cjs
Learn to code — free 3,000-hour curriculum
and postcss.config.cjs configuration files, also known as config
files. They help you interact with your project and customize
everything.

Step 5 – Configure Source Paths

Add the paths to all of your template files in your
tailwind.config.cjs file. Template files include HTML templates,
JavaScript components, and other source files that contain Tailwind
class names. This is to make sure that vanilla CSS is generated for
the corresponding elements.

Your tailwind.config.cjs looks like this for now:

Current config file named as tailwind.config.cjs, it contains the module.export object

to customize tailwind with property like content, theme and plugins

Add this in your content section.

"./index.html",

https://www.freecodecamp.org/news/how-to-install-tailwindcss-in-react/ 6/14
8/4/24, 14:52 How to Setup React and Tailwind CSS with Vite in a Project

Forum Donate
"./src/**/*.{js,ts,jsx,tsx}",

Learn to code — free 3,000-hour curriculum

strings added to the content property separated with commas

So your file should now look like this:

Config file after updating the content property

Step 6 – Add Tailwind Directives

to Your CSS
Tailwind directives are custom Tailwind-specific statements that
instruct CSS how to behave. You'll need to add directives for three
of Tailwind’s layers.

@tailwind base injects Tailwind's base styles and base styles

registered by plugins, @tailwind components injects Tailwind's
component classes and component classes registered by plugins,
while @tailwind utilities injects Tailwind's utility classes and
utility classes registered by plugins.

Add the statements below to your ./src/index.css file:

https://www.freecodecamp.org/news/how-to-install-tailwindcss-in-react/ 7/14
8/4/24, 14:52 How to Setup React and Tailwind CSS with Vite in a Project

Forum Donate
@tailwind base;
@tailwind components;
Learn to code — free 3,000-hour curriculum
@tailwind utilities;

The three directives added to the index.css files -

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

The three directives added to the index.css file - @tailwind base, @tailwind
components and @tailwind utilities

Your index.css file contains some default styling. You can clear all
that and paste the three lines of directives above.

Step 7 – Start Your Vite Server

Run your build process with the npm run dev command in the
terminal. You should get this message below in your terminal‌:

The message you get after running your Vite server that provides localhost link,
network, and help.

https://www.freecodecamp.org/news/how-to-install-tailwindcss-in-react/ 8/14
8/4/24, 14:52 How to Setup React and Tailwind CSS with Vite in a Project

Forum Donate
Hold the ctrl key and click on the link at Local – here it's
Learn to code — free 3,000-hour curriculum
http://127.0.0.1:5174. It will open a new tab in your browser if you
do that.

A screenshot of the webpage on first run

Our styles are broken because we cleared the default CSS in the
index.css file to input our directives.

Step 8 – Start Writing Tailwind

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:

https://www.freecodecamp.org/news/how-to-install-tailwindcss-in-react/ 9/14
8/4/24, 14:52 How to Setup React and Tailwind CSS with Vite in a Project

Forum Donate

Learn to code — free 3,000-hour curriculum

Screenshot of the App.jsx file

Clear the return element starting from line 9, and replace it with the
text below to test your Tailwind to know if it is working. Input this:

<h1 className="text-3xl font-bold underline text-center">Hello world!</

h1 element with tailwind css classnames

Now you have this:

https://www.freecodecamp.org/news/how-to-install-tailwindcss-in-react/ 10/14
8/4/24, 14:52 How to Setup React and Tailwind CSS with Vite in a Project

Forum Donate

Learn to code — free 3,000-hour curriculum

Adding the h1 element to the App.jsx file

According to the above image, text-3xl font-bold text-red-500

underline text-center has been added as a className to the div
element. This is the standard for writing Tailwind CSS styling.

You can learn more about Tailwind classnames here. Your browser
should update automatically.

Screenshot of the webpage after add the h1 element

https://www.freecodecamp.org/news/how-to-install-tailwindcss-in-react/ 11/14
8/4/24, 14:52 How to Setup React and Tailwind CSS with Vite in a Project

You can now start building your React projects and style them withDonate
Forum
Tailwind CSS.
Learn to code — free 3,000-hour curriculum

Conclusion
You have now created a React and Tailwind CSS app using Vite, a
frontend build tool. You have learned what Vite is and how to create
a Vite app with a React template, as well as how to install Tailwind
and other dependencies.

Thanks for reading this article. If you enjoyed it, consider sharing it
to help other developers.

You can reach me on Twitter, LinkedIn and GitHub.

Happy Learning.‌

Segun Ajibola
Software developer and technical writer

If you read this far, thank the author to show them you care.
Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has

helped more than 40,000 people get jobs as developers.
Get started
ADVERTISEMENT

https://www.freecodecamp.org/news/how-to-install-tailwindcss-in-react/ 12/14
8/4/24, 14:52 How to Setup React and Tailwind CSS with Vite in a Project

Forum Donate

Learn to code — free 3,000-hour curriculum

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States

Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of
videos, articles, and interactive coding lessons - all freely available to the public.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers,
services, and staff.

You can make a tax-deductible donation here .

Trending Guides

Date Formatting in JS Java Iterator Hashmap Cancel a Merge in Git

What is a Linked List? Install Java in Ubuntu Python Ternary Operator
Full Stack Career Guide Python Sort Dict by Key Smart Quotes Copy/Paste
JavaScript Array Length Sets in Python Kotlin vs Java
SQL Temp Table HTML Form Basics Comments in YAML
Pandas Count Rows Python End Program Python XOR Operator
Python Dict Has Key Python List to String Exit Function in Python
String to Array in Java Python Import from File Parse a String in Python
Python Merge Dictionaries Copy a Directory in Linux Reactive Programming Guide
Center Text Vertically CSS What’s a Greedy Algorithm? Edit Commit Messages in Git

https://www.freecodecamp.org/news/how-to-install-tailwindcss-in-react/ 13/14
8/4/24, 14:52 How to Setup React and Tailwind CSS with Vite in a Project

Mobile App
Forum Donate

Learn to code — free 3,000-hour curriculum

Our Charity

About Alumni Network Open Source Shop Support Sponsors Academic Honesty

Code of Conduct Privacy Policy Terms of Service Copyright Policy

Privacy and cookie settings

Managed by Google. Complies with IAB TCF. CMP ID: 300

https://www.freecodecamp.org/news/how-to-install-tailwindcss-in-react/ 14/14