Tailwind CSS + React: Should You Ditch Traditional CSS?

Published at: May 5, 2021

In the world of modern web development, Tailwind CSS has gained massive popularity for its utility-first approach to styling. But does it make sense to ditch traditional CSS or pre-built frameworks like Bootstrap in favor of Tailwind when building React applications?

In this post, we’ll explore what Tailwind CSS is, how it differs from traditional CSS, and whether it’s the right choice for your next React project.

1. What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to apply styles directly within your HTML or JSX by using predefined classes. Unlike traditional CSS frameworks like Bootstrap, which come with a set of ready-to-use components, Tailwind gives you full control over the design by providing low-level utility classes that are highly customizable.

Key Features of Tailwind CSS:

• Utility-first Approach: Tailwind focuses on using utility classes to apply individual styles rather than writing custom CSS. For example, p-4 for padding, text-center for text alignment, and bg-blue-500 for background color.
• Customization: Tailwind provides an easily configurable config file where you can define custom color palettes, breakpoints, and other design tokens to suit your project.
• Responsiveness Built-In: Tailwind comes with built-in support for responsive design with mobile-first breakpoints. You can easily control how elements look on different screen sizes with classes like md:text-lg or lg:grid-cols-4.

2. How Utility-First CSS Changes Styling in React

One of the biggest advantages of Tailwind CSS is the utility-first approach, which eliminates the need to write custom CSS for every element. Instead, you apply small utility classes directly to the JSX, making it easier to manage and less reliant on external stylesheets.

Example: Traditional CSS vs. Tailwind CSS

Traditional CSS:

/* styles.css */
.button {
  background-color: blue;
  padding: 8px 16px;
  border-radius: 4px;
  color: white;
}

.button:hover {
  background-color: darkblue;
}

// In React Component
import './styles.css';

const Button = () => {
  return <button className="button">Click Me</button>;
};

Tailwind CSS:

// In React Component
const Button = () => {
  return (
    <button className="bg-blue-500 px-4 py-2 rounded text-white hover:bg-blue-700">
      Click Me
    </button>
  );
};

In the Tailwind approach, you don’t need a separate .button class. Instead, you apply utility classes like bg-blue-500, px-4, py-2, and rounded directly within the JSX. This simplifies the development process by reducing the amount of CSS you need to write and maintain.

3. Advantages of Tailwind CSS in React

1. Faster Development

With utility classes, you can prototype and design directly in your JSX without switching back and forth between HTML and CSS files. This results in faster iteration and reduces context-switching.

2. Consistency Across the Application

Tailwind ensures that your design remains consistent across components. Since the utility classes are predefined and standardized, it minimizes the chances of creating inconsistent styles.

3. No Need for Complex CSS or BEM Naming

With traditional CSS, developers often deal with class naming conventions like BEM (Block Element Modifier) or complex nested selectors. Tailwind eliminates this by using simple, descriptive utility classes that are easy to understand.

4. Easier to Maintain

Because you’re working with utility classes instead of custom styles for each component, your code is easier to maintain. Tailwind makes it easier to refactor and reuse styles across different components.

5. Optimized for Production

Tailwind comes with a purge feature that removes unused CSS when building for production. This results in smaller CSS files and faster load times for your users.

4. Setting Up Tailwind in a React Project

Setting up Tailwind CSS in a React project is straightforward. Follow these steps to get started:

Step 1: Create a React App (If you don’t have one)

You can create a new React app using Create React App (CRA):

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

Step 2: Install Tailwind CSS

Next, install Tailwind CSS and its dependencies:

npm install tailwindcss postcss autoprefixer

Step 3: Create Tailwind Configuration Files

Generate the default configuration files for Tailwind:

npx tailwindcss init

This creates a tailwind.config.js file in your project directory. You can customize this file later to define custom colors, fonts, and breakpoints.

Step 4: Configure Tailwind to Purge Unused Styles

Edit the tailwind.config.js file to enable purge for production builds. This will remove unused styles and reduce the size of your CSS file:

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

Step 5: Add Tailwind Directives to Your CSS

In your src/index.css (or any other global stylesheet), add the Tailwind directives:

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Step 6: Run Your React App

Now, you can run your React app:

npm start

Your React project is now set up with Tailwind CSS, and you can begin styling components using Tailwind’s utility classes.

5. Should You Ditch Traditional CSS?

While Tailwind CSS offers many benefits, it’s important to note that it’s not a one-size-fits-all solution. Here are some factors to consider when deciding whether to switch from traditional CSS to Tailwind:

• Project Size: Tailwind is great for large projects where you need consistent, reusable styles across many components. For small projects, traditional CSS might still be a quicker and simpler choice.
• Learning Curve: Tailwind’s utility-first approach can be a bit overwhelming for developers used to traditional CSS or CSS-in-JS solutions. However, once you get the hang of it, it can significantly speed up your development process.
• Design Flexibility: Tailwind offers a lot of flexibility and customization, but if you need fine-tuned control over every aspect of your styles, you might find yourself writing custom CSS on top of Tailwind’s utilities.

In conclusion, Tailwind CSS is a powerful tool for styling React apps, especially when building large, complex applications. It streamlines development, improves consistency, and reduces the need for custom CSS. However, it’s not a magic bullet — consider your project’s needs and team preferences before making the switch.

If you’re ready to embrace the utility-first approach, Tailwind might just be the perfect addition to your React toolkit.