DEV Community

Cover image for How to Setup Tailwind CSS in React JS with VS Code
David Bilson
David Bilson

Posted on • Updated on

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.

Why Tailwind CSS is better!

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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.

How to install React with Vite

You will be asked to select a variant. Select JavaScript.

How to install React with Vite

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


Enter fullscreen mode Exit fullscreen mode

Run npm install to install the necessary packages and dependencies for the React project.



 npm install


Enter fullscreen mode Exit fullscreen mode

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 .


Enter fullscreen mode Exit fullscreen mode

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)

Framework Guide for Tailwind Installation

This will show you a list of frameworks to pick from. Select Vite.

Vite installation for Tailwind

You will be brought to this page

Tailwind CSS Installation

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


Enter fullscreen mode Exit fullscreen mode

Then generate your tailwind.config.js and postcss.config.js files with the command below:



npx tailwindcss init -p


Enter fullscreen mode Exit fullscreen mode

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: [],
}


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

This will start the development server, and you can access your React application in the local host server address provided in the terminal:

Tailwind CSS

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


Enter fullscreen mode Exit fullscreen mode

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.

Red color tailwind css

Copy the class name and apply it to the h1 element



<h1 className="text-red-600">Tailwind Setup</h1>


Enter fullscreen mode Exit fullscreen mode

To make the paragraph underlined, search for underline on the docs,

Underline Tailwind css property

Apply it to the paragraph element:



<p className='underline'>Styling jsx elements</p>


Enter fullscreen mode Exit fullscreen mode

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)