How To Integrate TailwindCSS In React To Quickly Styling Our App?

TailwindCSS has become one of the most popular utility-based CSS frameworks for designing web applications. It’s highly versatile and works seamlessly with any front-end framework or library, including Reactjs. In this guide we'll explore how to integrate TailwindCSS in React.

In this beginner’s guide to React.js, I’ve included TailwindCSS because it pairs so well with React, making it easy to design web apps faster and more efficiently.

Today, many web apps are built using the React + TailwindCSS combination, a dynamic duo for developers prioritizing speed and flexibility in UI development.

In this guide, we’ll explore why TailwindCSS is a go-to choice for styling, walk through the steps to integrate it into a React project and tackle the real-world challenge of styling a product list page.

What is TailwindCSS?

Tailwindcss is a utility-based CSS framework, meaning each CSS property has its own CSS class. It allows developers to style their web page without writing custom CSS.

Unlike traditional CSS frameworks like Bootstrap, TailwindCSS gives developers granular control over the design without being limited by predefined components.

With its utility-first approach, you can:

• Build responsive designs effortlessly.
• Avoid creating complex CSS files.
• Focus on reusable classes that are easy to understand and modify.

TailwindCSS is a game-changer for modern web development, offering flexibility, speed, and scalability.

Why is TailwindCSS the go-to choice for styling?

TailwindCSS now become the go-to choice for styling web applications. Because it makes the styling super easy, you can style your elements right in HTML without jumping back and forth between files.

The thing I like most about tailwindcss is that we can fully customize or create our own design system using tainwind.config.js file.

Another best part? TailwindCSS has an amazing ecosystem. The documentation is clear and easy to understand. There are plenty of plugins to extend the functionality and community support is fantastic.

Here's why developers love TailwindCSS, because,

• Easy to use
• Customizable
• Responsive Design Made Simple
• Faster Development
• Great Ecosystem

Step-by-Step Guide to Integrate TailwindCSS in React

Let’s dive into the integration process. Follow these steps to add TailwindCSS to a React project and start styling right away.

Step 1: Create a React App

First, set up a React app. If you already have one, you can skip this step. Otherwise, use the following command to create a new React application:

    npx create-react-app my-app

Navigate to your project directory:

    cd my-app

Step 2: Installing TailwindCSS in React

Install TailwindCSS and its peer dependencies using npm or yarn. Run this command:

    npm install -D tailwindcss postcss autoprefixer

ShellScript

Next, generate the tailwind.config.js file:

    npx tailwindcss init

This will create a default configuration file where you can customize TailwindCSS settings.

Step 3: Configuring TailwindCSS in our app

Update the tailwind.config.js file to specify the paths to all your template files. This ensures TailwindCSS purges unused styles during production builds:

    module.exports = {
      content: [
        "./src/**/*.{js,jsx,ts,tsx}",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    };

Next, add the Tailwind directives to your CSS file. Locate or create a src/index.css file, then include the following:

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

Finally, import this CSS file into your React project. Open src/index.js and add:

    import './index.css';

That’s it! TailwindCSS is now integrated into your React project.

Developers are always in search of the solution for faster development and pre-built components. That's why there are so many tailwind-based reactjs-specific component libraries available. Here is a list of some of the best tailwindcss based react-specific components libraries.

Design a Product Preview Card (Challenge)

I have taken this Product Preview Card - Challenge by Frontendmentor.io. In this article, you'll only see how to design this Product Preview Card using TailwindCSS & React.

Learning by doing is a good way to master something, that's why I choose to build a small project. You'll find the working demo here, and access the check code at GitHub.

Once I take challenge, after downloading initial files from frontendmentor.io. I need to configure some styles in my tailwind.config.ts file (I'm using typescript that's why file extension is .ts).

Here is why final tailwind.config.ts file looks like:

    import type { Config } from "tailwindcss";

    const config: Config = {
      content: [
        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./components/**/*.{js,ts,jsx,tsx,mdx}",
        "./app/**/*.{js,ts,jsx,tsx,mdx}",
      ],
      darkMode: "class",
      theme: {
        extend: {
          screens: {
            xs: "400px",
            xxs: "300px",
          },
          colors: { // Customize & Define design specific colors here
            productPreview: {
              dark_cyan: "hsl(158, 36%, 37%)",
              cream: "hsl(30, 38%, 92%)", 
              dark_blue: "hsl(212, 21%, 14%)",
              grayish_blue: "hsl(228, 12%, 48%)"
            }
          },
        },
      },
      plugins: [],
    };
    export default config;

Once my colors are defined here, now I can use color anywhere in my project e.g, text-productPreview-dark_cyan, bg-productPreview-cream. Did you see, how easy it is to define color once and use them for all, like, text-color, background, border, and so on.

Next, we'll see the actual card. I created a separate component for the Product Preview Card using react components. Here is the complete code:

    import React from 'react'

    export default function ProductPreviewCard() {
      return (
        <section className="bg-white max-w-[500px] sm:max-w-[700px] overflow-hidden rounded-lg grid grid-cols-1 sm:grid-cols-2">

            {/* product image */}
            <picture className='w-full h-full object-center'>
                <source srcSet='/icons/product-preview-card/image-product-mobile.jpg' media="(max-width:639px)" className='w-full h-full object-cover' />
                <img src='/icons/product-preview-card/image-product-desktop.jpg' alt="Product Image" className='w-full h-full object-cover' />
            </picture>

            {/* text content */}
            <article className="p-6 sm:p-8 flex flex-col justify-between">
                <p className='uppercase text-productPreview-grayish_blue font-medium tracking-[0.3em]'>Perfume</p>
                <h1 className='mt-4 sm:mt-6 text-3xl sm:text-4xl font-bold'>Gabrielle Essence Eau De Parfum</h1>
                <p className='mt-4 sm:mt-6 text-base text-productPreview-grayish_blue font-medium'>A floral, solar and voluptuous interpretation composed by Olivier Polge, 
                Perfumer-Creator for the House of CHANEL.</p>

                <div className="flex items-center gap-4 mt-6 sm:mt-8">
                    <h2 className='text-productPreview-dark_cyan font-bold text-3xl'>$149.99</h2>
                    <p className='text-sm line-through text-productPreview-grayish_blue font-medium'>$169.99</p>
                </div>

                <button type='button' className='bg-productPreview-dark_cyan rounded-lg p-4 text-base text-white flex items-center gap-2 justify-center w-full mt-8'>
                    <img src='/icons/product-preview-card/icon-cart.svg' alt='cart icon' />
                    <span>Add to Cart</span>
                </button>

            </article>

        </section>
      )
    }

You'll see a lot of code here, but I want you to just focus on className attribute. This is all I have no extra or custom CSS I used here nor are these classes used in any CSS file. All these classes are generated & provided by TailwindCSS, which we used here.

Here is the Output result of Challenge Completed:

After the compilation, tailwindcss generates these classes and bundles only those classes that are used here into a CSS file. This is good for optimization purposes to keep the smaller size of the file.

Wrapping up

Integrating TailwindCSS with React allows you to build stylish, responsive web apps quickly and efficiently. With its utility-first approach, you can focus on crafting delightful user interfaces without worrying about writing extensive CSS from scratch.

Whether you’re a beginner or a seasoned developer, mastering the React + TailwindCSS combination is a valuable skill that will enhance your workflow and productivity.

Ready to give it a try? Start building with React and TailwindCSS today, and watch your styling process become smoother than ever!

This Blog Originally Posted at Programmingly.dev. Understand & Learn Web by Joining our Newsletter for Web development & Design Articles