7 Essential Steps for Integrating Tailwind CSS with React

12 min readDec 8, 2023

In the fast-paced world of web development, balancing functionality and design efficiency is crucial. Often, we focus heavily on functionality, leaving less time for styling tasks like form aesthetics or responsiveness. Tailwind CSS offers a practical solution to this common challenge.

Step 1. Introducing Tailwind CSS

As a software engineer, I value tools that boost productivity without compromising design quality. Tailwind CSS, a utility-first framework, seamlessly complements React’s component-based architecture, offering an effective styling approach.

To clarify, when I say utility-first CSS, I mean that Tailwind CSS offers a unique way of styling web elements sort of in a modular fashion. Instead of writing custom CSS rules, you use a set of small, reusable classes that apply specific styles. These classes are like building blocks that you can combine to create the desired look for your website. For example, you can use a class like bg-blue-500 to set the background color to blue or text-lg to make text larger.

This approach is particularly beneficial for beginners and experienced developers alike because it simplifies the styling process. You don’t need to be a CSS expert to start using Tailwind CSS effectively. You can think of it as a toolbox filled with ready-to-use tools for styling, making it easier to focus on the functionality of your code.

Step 2. Why Tailwind CSS?

Tailwind CSS’s utility-first approach has gained popularity for enabling rapid, responsive design without extensive custom CSS. Its simplicity appeals to both new and seasoned developers.

Step 3. Real-World Adoption

Having understood why Tailwind CSS is valued, let’s explore some real-world examples of its adoption. A showcase of its versatility and effectiveness is seen in its adoption by several prominent organizations and projects:

OpenAI / ChatGPT: Tailwind CSS is used in the marketing website and chat interface of OpenAI, including its language model ChatGPT. This highlights Tailwind CSS’s capability in handling complex, AI-driven interfaces with efficiency[1].
NASA: NASA’s use of Tailwind CSS for its Jet Propulsion Laboratory website underlines its application in cutting-edge scientific and research-oriented web platforms[1].
Shopify: The e-commerce platform Shopify utilizes Tailwind CSS, demonstrating its suitability for dynamic, commercial websites[1].
Wealthfront: This fintech company uses Tailwind CSS for its marketing website, showcasing its effectiveness in the financial services domain[1].
Coinbase NFT: As an online marketplace, Coinbase NFT’s adoption of Tailwind CSS reflects its utility in digital assets and e-commerce sectors[1].
Other Notable Uses: In addition to these, a so many companies and platforms across various industries employ Tailwind CSS. Webtastic.ai reports over 18,500 companies using Tailwind CSS, ranging from software development to financial services and beyond[2].

Step 4. Getting Started with Tailwind CSS and React

To integrate Tailwind CSS with a React project, start by setting up a new React app. Install Tailwind CSS, initialize its configuration, and customize your color palette in “tailwind.config.js”. Apply Tailwind directives in your CSS files and launch your project to see the results. Given this context, let’s explore how you can set up Tailwind CSS step by step in your Create React App (CRA) project, including the integration of custom colors to enhance your project’s design:

Starting with Your React Project:
— These steps are from https://tailwindcss.com/docs/guides/create-react-app. If you haven’t already, begin by creating a new React project using Create React App. This sets up a solid foundation for your project:

npx create-react-app my-project
cd my-project

2. Incorporating Tailwind CSS:
— Install Tailwind CSS in your project. This step integrates the styling capabilities of Tailwind into your React application and initialize Tailwind CSS to create the configuration file that looks like this tailwind.config.js:

npm install -D tailwindcss
npx tailwindcss init

3. Configuring Tailwind with Custom Colors:
— Now moving from you Shell prompt move to your VSCode or IDE of your choice and open the folder. In your tailwind.config.js file, specify your custom color palette. This customization allows you to bring a unique aesthetic to your project that aligns with your vision:


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

4. Applying Tailwind Directives in CSS:
— In your ./src/index.css file, add the Tailwind directives for base, components, and utilities. This step ensures that Tailwind’s styles are correctly applied throughout your project:

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

If you see any lines underneath indicating and error try this instead.

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

5. Launching Your Project:
— Start your project to see the integration in action:

npm install
npm run start

6. Utilizing Tailwind’s Utility Classes:
— Begin using Tailwind’s utility classes, including your custom colors, to style your components. This approach allows for rapid development while maintaining design consistency and responsiveness.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        "custom-pink": "#ccaea9",
        "custom-darker-brown": "#33110c",
        "custom-peach": "#ffccc4",
        "custom-brown": "#66342c",
      },
    },
  },
  plugins: [],
};

By following these steps, you can effectively incorporate Tailwind CSS into your React projects, leveraging its custom styling. This integration not only enhances your project’s aesthetic appeal but also aligns with modern web development practices, making Tailwind CSS an easy and effective choice for your development needs.

Step 5. Understanding and Applying Tailwind CSS

Now let’s gain a deeper understanding of how to apply its utility classes effectively. Tailwind CSS shines in its simplicity and ability to apply styling directly within your JSX code, making it a favored tool among developers for creating responsive and visually appealing web applications. Here’s how to understand and apply Tailwind’s utility classes to a navigation bar in a React application, ensuring a seamless user experience across different devices.

Button Component in React

Let’s start by looking at a simple button component in a React application:

import React from "react";
const SimpleButton = ({ text, onClick }) => (
  <button className="bg-custom-brown hover:bg-custom-darker-brown text-white 
font-bold py-2 px-4 rounded" onClick={onClick}>Submit</button>
);
export default SimpleButton;

Stylish Navigation Bar

Common Utility Class Names in Tailwind CSS

flex: Applies a flexible box layout, making it easy to create complex layouts.
bg-[color]: Sets the background color. For example, bg-red-500 for a red background.
text-[size]: Adjusts text size. For instance, text-xl makes the text extra-large.
p-[size]: Sets padding. p-4 means padding of 4 units on all sides.
m-[size]: Controls margin. m-5 applies a margin of 5 rem or units.
rounded: Creates rounded corners on elements.
border: Adds a border to an element.
hover:bg-[color]: Changes the background color when you hover over the element.
md:flex: Applies flexbox layout for medium-sized screens and larger.

For more detailed instructions on how to implement these classes in your project, the Tailwind CSS documentation (https://tailwindcss.com/docs) is an excellent resource, providing comprehensive guides and examples to help you every step of the way.

Step 6. Advance Practice

Explore further by implementing a responsive navbar in your React app. Tailwind CSS’s utility classes make it easy to adapt the navbar for various screen sizes. Take this an paste over your App.js to see it in action and we will use it later. Also normally you will create a component and place this in but for this example we will build off the Create React App startup we are following.

import "./App.css";

function App() {
  return (
    <div className="App">
      <nav className="flex items-center justify-between flex-wrap 
bg-teal-500 p-6">
        <div className="flex items-center flex-shrink-0 text-white mr-6">
          <svg className="fill-current h-8 w-8 mr-2" width="54" height="54" 
viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 
8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 
0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 
13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 
10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" />
          </svg>
          <span className="font-semibold text-xl tracking-tight">Tailwind CSS</span>
        </div>
        <div className="block lg:hidden">
          <button className="flex items-center px-3 py-2 border rounded 
text-teal-200 border-teal-400 hover:text-white hover:border-white">
            <svg className="fill-current h-3 w-3" viewBox="0 0 20 20" 
xmlns="http://www.w3.org/2000/svg">
              <title>Menu</title>
              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
            </svg>
          </button>
        </div>
        <div className="w-full block flex-grow lg:flex lg:items-center 
lg:w-auto">
          <div className="text-sm lg:flex-grow">
            <a href="#responsive-header" className="block mt-4 
lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">Docs</a>
            <a href="#responsive-header" className="block mt-4 
lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">Examples</a>
          </div>
          <div>
            <a href="#" className="inline-block text-sm px-4 py-2 
leading-none border rounded text-white border-white hover:border-transparent 
hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Download</a>
          </div>
        </div>
      </nav>
    </div>
  );
}

export default App;

To show what else you can try look at this link. They also have alerts, buttons, cards, forms, flexbox grids, and navigation and more. Clicking this link and going over the examples on the left hand side can be exciting to see the different example and code. This is also at the bottom of the page for reference so feel free to do it at the end. https://v1.tailwindcss.com/components/navigation#

Step-by-Step Modifications in Action:

To explore the capabilities of Tailwind CSS in your React app, let’s incrementally modify the existing navbar and observe the changes. This hands-on approach will help you understand how Tailwind utility classes shape your application’s design. We will also use Tailwind colors so no need to change your tailwind.config.js. This is using the code for App.js above.

Step-by-Step Modifications:

Changing Background Color:

Original Class: bg-teal-500

Change it to bg-blue-700 and observe the navbar's background color change.

Responsive Mobile Version with bg-blue-700

Code would change to:

<nav className="flex items-center justify-between flex-wrap bg-blue-700 p-6">

2. Modifying Padding:

Original Class: p-6

Change it to p-10 to reduce the padding around the navbar.

Code would change around line p-10 to:

<nav className="flex items-center justify-between flex-wrap bg-blue-600 p-10">

3. Adjusting Text Size and Color:
Original Class for Download border: border-white

Original download is white and text is small

Change it to border-teal-500 and observe the text color change when you hover.
also Increase text size by changing text-sm to text-xl.
Code for Download link:

Border is now Teal and Download size is bigger

<a href="#" className="inline-block text-xl px-4 py-2 
leading-none border rounded text-white border-teal-500 hover:border-transparent 
hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Download</a>

4. Hover Effects on Links:

Original Hover Classes: hover:text-teal-500 and hover:border-white

Change them to hover:bg-black for a different hover effect.

Background hover over the download is now black

Code for Download link:

<a href="#" className="inline-block text-xl px-4 py-2 
leading-none border rounded text-white border-teal-500 hover:border-transparent 
hover:text-teal-500 hover:bg-black mt-4 lg:mt-0">Download</a>

5. Responsive Design Adjustments:

Original Class for the menu hamburger button: lg:hidden

Menu Button hidden on this large screen view of the same menu

Delete lg:hidden and it should reveal the menu hamburger button from large screens.

Menu Button is not hidden on this large screen view of the same menu

Code:

<div className="block">

After making these changes, you’ll notice how each class impacts the layout and style. Experimenting with different classes gives you practical experience with Tailwind’s utility-first approach allowing you to customize Tailwind code on your React projects.

Further Exploration:

For more comprehensive knowledge about Tailwind CSS classes and their functionalities, the Tailwind CSS documentation is an invaluable resource. It provides detailed explanations and examples of every class available.

Tailwind CSS Documentation: Explore the official Tailwind CSS Documentation for in-depth guidance on utility classes, responsive design, customizations, and more.
Interactive Learning: Websites like Tailwind Play allow you to experiment with Tailwind classes in a live editor, seeing real-time changes as you apply different utilities.

By exploring these resources and practicing with your code, you’ll gain a deeper understanding of how Tailwind CSS can enhance your web development projects.

Step 7. Comprehensive Tailwind CSS Component Libraries

With Tailwind Play you can now dive deeper with Tailwind CSS and React, it’s crucial to recognize the power of component libraries in streamlining our workflow. These libraries serve as a rich source of pre-designed elements, allowing us to focus more on functionality while maintaining high design standards. Before exploring note that some of these resources will have “class” but will need to be “className”. Although in React 17 or later it may work the best practice is to use className. Let’s explore some exceptional Tailwind CSS component libraries that cater to a diverse range of development needs:

Unlight’s Tailwind Components: A unique repository that aggregates a collection of free components found on the internet, organized by component type. This makes it a valuable resource for developers looking for a wide range of Tailwind CSS components. View on GitHub
DripUI: Offers a unique interface where you can easily copy code for various components, such as buttons and cards, with a simple click. Ideal for quickly implementing stylish design elements in your projects. Visit DripUI
MerakiUI: Provides clean and modern design elements, perfect for creating visually appealing web applications. Explore their range of components here.
DurandSacha’s Tailwind UI Components: Features a versatile collection of Tailwind CSS components, ideal for enhancing the visual appeal and functionality of web projects. View on GitHub
Mbaziira Ronald’s Tailwind Components: Offers a diverse array of Tailwind CSS components, catering to a wide range of design needs. View on GitHub

For an in-depth exploration of these and other top-tier Tailwind CSS component libraries, the LogRocket blog offers a comprehensive post. This resource provides detailed overviews of each library, highlighting their unique features and capabilities, making it an essential read for those seeking to expand their knowledge in this area. The post is called 10 best Tailwind CSS Component Libraries Read the LogRocket post.

Conclusion

As we reach the end of our exploration into the integration of Tailwind CSS with React, it’s clear that Tailwind’s utility classes offer tremendous power and efficiency in web development. These classes streamline the development process, enhancing both the visual appeal and functionality of your projects.

I encourage you to delve deeper into the possibilities that Tailwind CSS brings to your React applications. Its simplicity, combined with remarkable flexibility and a broad spectrum of utility classes, makes it an invaluable tool for creating responsive and attractive web applications. Whether you are starting a new project or refining an existing one, Tailwind CSS is set to be a crucial element in your development toolkit.

With Tailwind CSS, you possess the capability to enhance your development workflow significantly, saving both time and effort. This advantage paves the way for delivering outstanding web experiences to your users. Thank you for reading, and I hope this guide inspires you to leverage the full potential of Tailwind CSS in your React projects. Thanks for reading!

References:

[1] Tailwind CSS. “Showcase.” Tailwind CSS, Tailwind Labs Inc., https://tailwindcss.com/showcase

[2] Webtastic.ai. “18,757 Companies Using Tailwind CSS.” Webtastic.ai, Webtastic.ai, https://webtastic.ai/technologies/tailwind-css

[3] TailwindCSS “Create React App Setup Guide” https://tailwindcss.com/docs/guides/create-react-app

[4] Tailwind Labs Inc. “Tailwind CSS Documentation.” Tailwind CSS. https://tailwindcss.com/docs

[5] “Navigation Components.” Tailwind CSS, Tailwind Labs Inc., https://v1.tailwindcss.com/components/navigation.

[6] Tailwind CSS Documentation. Tailwind Labs Inc., https://tailwindcss.com/docs.

[7] Unlight’s Tailwind Components. GitHub, https://github.com/unlight/tailwind-components.

[8] DripUI. Vercel, https://dripui.vercel.app/.

[9] MerakiUI. https://merakiui.com/components.

[10] DurandSacha’s Tailwind UI Components. GitHub, https://github.com/DurandSacha/Tailwind-ui-components.

[11] Mbaziira Ronald’s Tailwind Components. GitHub, https://github.com/MbaziiraRonald/Tailwind_Components.

[12] “10 Best Tailwind CSS Component Libraries.” dev.to, https://dev.to/logrocket/10-best-tailwind-css-component-libraries-f8p.