How to Setup Tailwind CSS in React JS with VS Code

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. 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!!!