Tailwind CSS vs. Styled-Components for Styling in React JS

Introduction

Have you ever visited a poorly designed website and wondered what you were doing there? I have, and I didn’t enjoy the experience. Those kinds of websites put you off.

Creating aesthetically pleasing web pages and applications is essential in web development for a good user experience. This leads to greater interactivity and engagement, hence more lead conversion.

CSS, or Cascading Style Sheets, is the primary tool for styling web pages. We’ll consider the differences between two popular CSS libraries: Tailwind CSS and Styled Components. You’ll get to know the main features of each library and which one to choose for your project.

Prerequisites

1. Styled Components are mainly used in the React ecosystem, so you need to know React to be able to use it

2. Tailwind does not require prior knowledge of React, JavaScript, or even CSS to be used to create custom components.

3. If you’re familiar with Bootstrap, you can pick up Tailwind CSS relatively easily.

4. Tailwind CSS is categorized as a framework but is sometimes referred to as a library because it is different from other CSS frameworks. In this article, we’ll be referring to it as a framework.

What are CSS libraries and frameworks?

CSS libraries are collections of pre-written CSS styles and components that you can include in your project. They are modular, meaning you can pick and choose specific styles or components to use rather than adopting the entire framework.

CSS frameworks are comprehensive packages that include a set of predefined styles, layout systems, components, and often JavaScript functionality. They provide a structured and fixed way to build web interfaces.

Tailwind CSS and Styled-Components

Tailwind CSS is a utility-first CSS framework. It provides a set of pre-defined utility classes that you can apply directly to your HTML elements to style them. Tailwind CSS promotes a declarative approach to styling, where you describe the styles you want directly in your HTML markup.

Styled Components is a CSS-in-JS library that allows you to write your CSS styles using JavaScript within your React components. It supports a more component-focused approach to styling, where you create Styled Components as reusable building blocks for your User Interface (UI).

Features of Tailwind CSS and Styled Components

Here, we proceed to look at some features of these two wonderful styling tools.

Features of Tailwind CSS

• You write styles in the HTML markup by applying classes to elements, such as shown below:

function MyComponent() {
  return (
    <div>
      <button type="button" className="text-white rounded-md 
      bg-orange-400 font-medium px-4 py-3 text-center cursor-pointer">
        Get started
      </button>
    </div>
  );
}

The code above specifies the button should have white text on an orange background with a normal font thickness, padding of 16 pixels on the left and right axes, and 12 pixels on the top and bottom axes.

• You can customize utility classes, colours, fonts, and more from the configuration file that comes with the Tailwind installation. You can extend or modify the default configuration to suit your project’s needs, as shown below.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        'md': '950px',
      },
      colors: {
        'brown': '#fe9446',
        'bronze': '#98582a',
        'base': '#fff4f2',
        'origin': '#fb9333',
      },
      gridTemplateColumns: {
        'footer': '2fr repeat(2, 1.2fr) 1.5fr  2fr'
      }
    },
  },
}

• Tailwind CSS primarily focuses on individual utility classes rather than creating reusable components.

• Tailwind CSS helps developers create a consistent way to style elements, making it easy for them to work with pre-defined classes. This improves the developer experience.

Features of Styled Components

• You write styles using JavaScript template literals within your React components; that is, you define a styled component and use it as a normal React component, as shown below.

import styled from 'styled-components';

const Button = styled.button`
  background-color: #fb923c; 
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-weight: 500;
  padding: 0.75rem 1rem;
  text-align: center;
`;


function App() {
  return (
    <div>
      <Button>Get started</Button>
    </div>
  );
}

• Styles are defined directly in the JavaScript files. You write the styles yourself from scratch.

• Styled Components are designed to create reusable components that can be used throughout your application.

• Styled Components offer a more dynamic and programmatic approach to styling, making it flexible and easy to retain control over the codebase.

The Right Framework to Choose

Now, a bit of the author’s story (haha). I started using styled components near the end of 2021 and throughout 2022 until March 2023.

I first discovered Tailwind CSS when a more experienced developer noticed that I was coding slowly. I decided to give it a try, and I haven’t regretted that decision. Tailwind CSS has significantly increased my coding speed. If styled components are needed for a project, I wouldn’t hesitate to use them again. Also, Tailwind CSS provides better performance as compared to CSS-in-JS frameworks.

Despite its many advantages, Tailwind CSS can become cluttered due to the sheer number of classes it generates if not handled properly, which many developers don’t. I’ve encountered difficulties with this in the past, but I’m getting better at structuring it. On the other hand, Styled Components help maintain tidy project files and code, offering greater control over the overall structure when compared to Tailwind CSS.

Conclusion

As a final piece of advice, it is better to select a framework based on the type of project.

For small-scale projects or those that require speed, Tailwind CSS would be a better option. Personally, there’s just something exciting about crafting styles alongside the elements themselves.

For projects that would need a lot of maintenance and control from the developer, it is better to use Styled Components. It is also necessary for projects where you have a lot of dynamic rendering, nested styling, and reusable components.

Below are some resources that you may find useful:

https://tailwindcss.com/docs/installation

https://styled-components.com/docs

https://css-tricks.com/a-thorough-analysis-of-css-in-js/

https://medium.com/dailyjs/what-is-actually-css-in-js-f2f529a2757

https://www.dhiwise.com/post/styled-components-vs-tailwind-css-finding-the-perfect-style-for-your-react-project