What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework, it provides prebuilt utility classes for fast building and for styling user interfaces. Its approach is different compared to Bootstrap, we will check the advantage of Tailwind vs Bootstrap later in this blog.

Tailwind CSS provides us with some small utility classes which we can use to build some custom designs. on the other CSS libraries provides predefined components and less customization.

Some of the utility classes we can use to add background color like bg-red-200 and to make text color white we can use text-white, for padding we can use px-3 and py-2. So it provides more flexibility and fast prototyping.

Now let’s see how we can add tailwind to react application.

I am assuming you already know how to create a React.js application, and you just want to add tailwind CSS to it.

So inside your terminal of the React.js project, you can run the below commands to install tailwind CSS.

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

After installation, You need to generate the default Tailwind CSS configuration file by running the following command:

npx tailwindcss init

The above command will create a tailwind.config.js file in your project root.

Inside this tailwind.config.js file you can customize the configuration according to your needs. You can modify spacing, colors, breakpoints, and more in this file.

Now create a CSS file tailwind.css in your project and add the below code to use tailwind CSS styles.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Now you just need to import this tailwind.css file inside your app component and you are good to go.

import React from 'react';
import './tailwind.css';

function App() {
  // Your component code goes here
}

export default App;

In the below code, you can see we are adding some of the tailwind classes inside the JSX section.

function App() {
  return (
    <div className="bg-red-200 text-white p-4">
      <h1 className="text-2xl">Hello, Tailwind CSS!</h1>
      <p className="text-sm">Welcome to my React app with Tailwind CSS.</p>
    </div>
  );
}

Run your React project with npm run start and you can see the tailwind CSS will be applied to your React.js Project.

Now let’s see some of the advantages of using tailwind CSS and compare it with traditional Bootstrap.

Advantage of Tailwind over Bootstrap (Tailwind vs Bootstrap)

Tailwind in react and Bootstrap both are popular CSS frameworks, but their approaches are different.
Here are some advantages of Tailwind CSS over Bootstrap:

Customization:

Tailwind CSS allows more customization compared to the bootstrap framework through its configuration file (tailwind.config.js). You have control over colors, spacing, typography, breakpoints, and more.

Utility-First Approach:

As we discussed in starting off our article, Tailwind CSS follows a utility-first approach and provides a set of small utility classes that can be combined with style components. This approach offers more flexibility and removes our dependencies on predefined components.

Learning Curve:

Tailwind CSS has an easy learning curve compared to Bootstrap. Its utility classes’ naming is very logical and makes it easy to understand. In Bootstrap, you need to learn a set of class names and understand the structure of its components.

File Size:

Tailwind CSS has smaller file sizes compared to Bootstrap, and this reduces network load and improves page load times.

No Dependencies:

Tailwind CSS does not have any Javascript dependencies and this makes it lightweight and makes the integration easy. On the other hand, Bootstrap includes Javascript components which makes it dependent on Javascript and increases the complexity of the project.

Always remember no framework is good or bad, all have their advantages, it just depends on the use cases. So Choose according to your project requirements. if you need a more opinionated framework and want a consistent design system then a bootstrap set of components are a good option for you, on the other hand, we already know what tailwind CSS offers us.

Share this article with friends and keep learning, Happy Coding 🙂