Tailwind CSS has gained popularity among front-end developers due to its utility-first approach and flexibility. It allows developers to build modern and responsive user interfaces with ease and speed.
When combined with React JS, Tailwind CSS becomes an even more potent tool for creating visually appealing and efficient web applications.
This tutorial will guide you through the step-by-step process of setting up Tailwind CSS in a React project using Visual Studio Code (VS Code). By the end of this guide, you will have a fully functional React application with Tailwind CSS integrated and ready for deployment.
Prerequisites
Before we begin, ensure that you have the following installed on your system:
Node.js and npm:
To set up a React application, you need Node.js and npm installed on your computer. Download and install the latest LTS version of NodeJS from the official Node.js website.
To download the latest version of npm, on the command line, run the following command:
npm install -g npm
Visual Studio Code (VS Code):
VS Code is a popular code editor that provides a seamless development experience for developers. It is the most preferred IDE if you want to develop your application with the best experience. You can download it for free from the official VS Code website and install it on your computer.
Step 1:
Create a New React Application Using Vite
Vite is a better alternative to CRA (create-react-app). It provides a faster and leaner development experience for modern web projects built with React, Angular, or Vue. Vite is popularly known for speed, efficiency, lightweight, and simplicity. Learn more about Vite here.
To install a React application using Vite, open your terminal or command prompt and navigate to the root directory where you want to install the React project.
Then, run the following command to create a new application
npm create vite@latest
You will be asked in the terminal to write the name of the project. For the sake of this tutorial, I will be going with "tailwind-setup" as the project name.
Thereafter, you will be asked to select a framework to work with. Select React.
You will be asked to select a variant. Select JavaScript.
Afterward, navigate to the project directory using the command cd project-name. Since the name of this project is tailwind-setup, we will enter the project directory and execute the following commands.
Enter the project directory
cd tailwind-setup
Run npm install to install the necessary packages and dependencies for the React project.
npm install
After installing the packages and dependencies, you need to open VS Code editor with the current directory. To do that, run the command below
code .
A new window will be opened up and you will be able to access the project files from the side bar (also known as the Explorer).
Step 2:
Install Tailwind CSS
When you want to install Tailwind in React, you have to remember that you installed this React project with Vite. To avoid dependency issues, you must install Tailwind for Vite React. You will find the installation guide on Tailwind Docs. The first installation guide (Tailwind CLI) on the docs points to general installation. Click on (Framework Guides)
This will show you a list of frameworks to pick from. Select Vite.
You will be brought to this page
You already have React installed using Vite, so we just have to install Tailwindcss and its peer dependencies with the command:
npm install -D tailwindcss postcss autoprefixer
Then generate your tailwind.config.js and postcss.config.js files with the command below:
npx tailwindcss init -p
Step 3:
Configure Tailwind CSS
Add the paths to all of your template files in your tailwind.config.js file. You can do that by copying the template available in the config file on the docs. It's also provided below:
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Step 4
Add the Tailwind directives to your index.css file
To import Tailwind CSS into your project. Open the "src/index.css" file, which is the main CSS file for your React application. Remove all the existing code in the file and add the following import statement to include Tailwind CSS:
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 5
Run the Development Server
Now that Tailwind CSS is integrated into your React project, it's time to start the development server and see the changes in action.
Run your build process with npm run dev in the terminal.
npm run dev
This will start the development server, and you can access your React application in the local host server address provided in the terminal:
Styling components/elements with Tailwind CSS
If you are not a Tailwind expert yet, you can easily look up the class names for any CSS property you need on an element by searching for it on the docs.
Example
Let us style a h1 element and a paragraph element in the App.jsx file of our React application.
- Create the h1 and p element
import React from 'react'
const App = () => {
return (
<div>
<h1> Tailwind Setup </h1>
<p>Styling jsx elements</p>
</div>
)
}
export default App
To give the h1 text a yellow color, you go on to Tailwind Docs
Go to the tailwind docs, you will see a search bar on the left side bar on the docs page, search for text color, on the results, click on text color and then go through the lists of colors made available to you to choose, I will go with text-red-600.
Copy the class name and apply it to the h1 element
<h1 className="text-red-600">Tailwind Setup</h1>
To make the paragraph underlined, search for underline on the docs,
Apply it to the paragraph element:
<p className='underline'>Styling jsx elements</p>
Note: Elements should be styled according to the design requirements of your project.
You now have a powerful combination of React's component-based architecture and Tailwind CSS's utility-first approach at your disposal. This combination allows you to create visually appealing and responsive web applications with speed and efficiency.
Happy coding!!!
Top comments (0)