Why you should use TailwindCSS in your ReactJS project

Hey everyone, Today, we're going to be talking about Tailwind CSS, a popular utility-first CSS framework, and why you should use it in your ReactJS project. Let's dive in!

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework(utility first means single class defining single CSS property in most cases), So tailwindcss provides a set of pre-built CSS classes that you can use to style your HTML elements. Meaning that you don't have to write repetitive CSS for different elements that will of course reduce your CSS bundle size. The framework is designed to be highly customizable, allowing you to create unique designs quickly and easily.

Why is Tailwind CSS better than its competitors?

Tailwind CSS is better than its competitors in several ways. For starters, it's highly customizable, which means you can create unique designs quickly and easily. It also has a smaller learning curve compared to other CSS frameworks like bootstrap, making it more accessible to developers of all levels. It also the most popular CSS framework right now!

How to install Tailwind CSS in your ReactJS project?

To install Tailwind CSS in your ReactJS project, you can use a package manager like npm. You can install it by running the following command:

npm install tailwindcss

If you check the TailwindCSS official create-react-app installation guide, you’ll know that postCSS is not supported, and we have to select other options like vite, nextjs or remix. Before that, what’s actually postCSS is?, PostCSS is a JavaScript tool that transforms your CSS code into an abstract syntax tree (AST) using Javascript plugins, Inshort it is a tool that supports number of different plugins to transform your CSS on the go, and Autoprefixer is a postCSS plugin that will add vendor prefixes to the newly CSS properties so that your CSS styles also supports the older browsers and this gives you the freedom to try latest CSS features along with supporting the older browsers. It is partially supported in Create React App, so if you want to take the advantage of this feature, then you should switch to options like Vite for React, NextJS or Remix.
To try it use:

npm install postcss autoprefixer

and add it to your postcss.config.js config file:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

After installing TailwindCSS, you need to create a Tailwind config file by running the following command:

npx tailwindcss init

This will create a default configuration file that you can modify to fit your project's needs.

What is the Tailwind config file?

The Tailwind config file is a file that contains all the configuration options for your Tailwind CSS framework. In this file, you can customize things like the colors, fonts, and sizes of your elements, you can also add TailwindCSS plugins and much more. Think it as a brain of the tailwindCSS in your project much like a package.json file which contains all the working brain of your project like running scripts, dependencies and all which you already must be familiar with.

In your tailwind.config.js file, you can add a path to all files that will be using tailwindCSS in the content array:

/** @type {import('tailwindcss').Config} */
module.exports = {
  /* files that will be using tailwindcss */
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Before moving further, make sure to install this TailwindCSS intellisense extension, this will help you write tailwindCSS much faster with live suggestions.
After that, paste this three directives in the index.css file (global css file) so that it can have access globally in your project.

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

What are Tailwind base, components, and utilities directives?

Tailwind base, components, and utilities directives are the three different types of directives that you can use in your CSS code. Base directive apply to the entire document and helps you to remove browser default styling (remember we use to write margin, padding, box-sizing to all the elements) which is a best practice of course for consistent styling purpose, TailwindCSS helps us to do that using this base directive. so if we build the project by adding this directive you will see some prestyles will be added to your CSS production code base which is fine because it is only 1kb in size, components classes apply to specific components, and utilities classes apply specific styles to individual elements which we will be using.

What is Tailwind JIT, and how does it work in the newer Tailwind version?

Tailwind JIT is a new feature that was introduced in the newer Tailwind version (v2.1). It stands for "Just-In-Time" and allows you to generate CSS on-demand, which can significantly reduce the file size. It works by analyzing your HTML and generating CSS only for the classes that are used. Previously all the TailwindCSS styles were used at the development time, turning it huge CSS file sizes of 10-15mb.

With the version 2.1 it was introduced and given the option to add in the config file. but with version 3.0 it was pre-enabled and comes out of the box.

How does Tailwind reduce CSS size, and how it reduces it in the newer version?

The newer version of Tailwind uses the JIT feature, which generates CSS on-demand, further reducing the file size. Previously we have to use PurgeCSS for removing the unused CSS styles in production build, but with the newer TailwindCSS version it also comes pre-enabled right out of the box.

How to write cleaner Tailwind code?

To write cleaner Tailwind code you can use the @apply directive and separate your code in a new separate place by defining it with a different non-tailwind class.

Before

App.js

<button className="px-4 py-2 m-2 bg-teal-400 rounded-md text-gray-50 font-semibold hover:bg-teal-500">
  Click Me!
</button>

After

index.css

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

.btn {
  @apply px-4 py-2 m-2 bg-teal-400 rounded-md text-gray-50 font-semibold hover:bg-teal-500;
}

App.js

<button className="btn">
  Click Me!
</button>

Apart from this, you can always check the docs of TailwindCSS to learn more, as the docs are very easy to follow even for a beginner.

In conclusion, TailwindCSS is a powerful and popular CSS framework that can help you create unique and beautiful designs quickly and easily. It's highly customizable, has a smaller learning curve, and can significantly reduce your CSS file size. If you haven't already, give it a try in your next ReactJS project!

Thanks for Reading! ❤