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

npx create-react-app react_tailwindcss_example
cd react_tailwindcss_example

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

npm install -D tailwindcss postcss autoprefixer
npx 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.

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

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

The sample code for the tailwind.confiq.js file can be found in the following Github URL.

https://github.com/episyche/react_tailwindcss_example/blob/master/tailwind.config.js

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.

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

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

The sample code for the src/index.css file can be found in the following Github URL.

https://github.com/episyche/react_tailwindcss_example/blob/master/src/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.

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

The sample code for the src/App.js file can be found in the following Github URL.

https://github.com/episyche/react_tailwindcss_example/blob/master/src/App.js

Step 5: Run your Application

Run the react Application with the following command.

npm run start

After running your application open your browser and check the following URL:

http://localhost:3000/

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

https://github.com/episyche/react_tailwindcss_example.git

Result:

The Example UI is shown in the following screenshot.

How to configure Tailwind CSS with React ?