React/Tailwind CSS/

How to configure Tailwind CSS with React ?

Published on

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Tailwind CSS makes it quicker to write and maintain the code of your application. In this article, we will learn how to configure Tailwind CSS with React application.

Introduction :

React js :

ReactJS is much easier to learn and use. ReactJS is a free and open-source front-end JavaScript library for building user interfaces based on UI components. to create interactive applications for mobile, web, and other platforms. To know more about relative links click here

Tailwind CSS :

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, and easy integration of existing classes directly into the HTML code. This is to remove unused CSS code for improving our application overall. To know more about relative links click here

Node.js :

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on a JavaScript Engine and executes JavaScript code outside a web browser. and NPM is a package manager for Node. js packages. The NPM program is installed on your computer when you install Node.js. To know more about relative links click here

Flow Diagram:

Prerequisites :

You will need a desktop or laptop with one of the following OS.

Windows OS (with administrative access)
Ubuntu OS (should have a non-root user account with sudo access)
Mac OS (High Sierra or higher with administrative access)

Steps:

Step 1: Installing Nodejs

Before we create React App we need to install node.js.

if you already installed node.js please ignore this step 1 and go to step 2

Step 2: Create a React-app

After installing Node.js open the terminal or command prompt and create a React app with the following commands

1npx create-react-app react_tailwindcss_example
2cd react_tailwindcss_example

and then install Tailwind CSS with the following commands. To know more about tailwind configuration, please click here.

1npm install -D tailwindcss postcss autoprefixer
2npx tailwindcss init -p

Step 3: Configure for tailwind CSS

react_tailwindcss_example → tailwind.config.js

Update the tailwind.config.js in the above path, using the following snippet.

1  content: [
2    "./src/**/*.{js,jsx,ts,tsx}",
3  ],

After updating the tailwind.config.js file, it will look like the below screenshot.

config page

react_tailwindcss_example →src→index.css

Add the @tailwind directives for each of Tailwind’s layers to your index.css in the above path, using the following snippet.

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

After adding @tailwind directives in index.css, it will look like the below screenshot.

setup the index css

Step 4: Add Tailwind CSS to your files

react_tailwindcss_example →src→App.js

In Tailwind CSS we follow the inline styling method, therefore to test the tailwind CSS installation, please replace the contents of App.js in the above path, with the below snippet in your project.

1export default function App() {
2  return (
3    <p className="mx-16 my-16 text-xl font-bold text-green-600 cursor-pointer">
4    Configure Tailwind CSS with React.JS
5    </p>
6  );
7}

A Sample GitHub repo, with all the required configurations, is given below.

GitHub - episyche/react_tailwindcss_example