Why Use Tailwind CSS Instead of Traditional CSS?

What is Tailwind CSS?

Tailwind CSS is an innovative CSS framework focused on using utility classes directly integrated into HTML. This utility-first approach simplifies development by providing pre-designed classes for various styles, allowing developers to quickly create websites while maintaining clear and readable code.

Tailwind CSS was created in 2017 by developer Adam Wathan to offer an innovative approach to interface styling. Focused on simplicity and flexibility, the framework uses utility classes directly in HTML code. Its rapid adoption is attributed to its opinionless design, allowing developers to easily customize while promoting fast development.

Reminder on CSS

CSS is a style language used to define the appearance and layout of web pages. It is used to define colors, fonts, layouts, and other aspects of a website's presentation. CSS is a style language used to define the appearance and layout of web pages. It is used to define colors, fonts, layouts, and other aspects of a website's presentation.

Is Tailwind CSS Better?

To compare Tailwind CSS to traditional CSS, let's take a concrete example. We will create a container with a title and a paragraph.

With Traditional CSS

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

With Tailwind CSS

<div class="flex flex-col items-center justify-center"></div>

or with the @apply directive

.container {
  @apply flex
    flex-col
    items-center
    justify-center;
}

Why is Tailwind CSS More "Safe"?

Tailwind provides classes for spacing (margins and paddings), avoiding irregular spacing between elements.

My Personal Opinion

In my opinion, Tailwind is beneficial in front-end development. Tailwind allows me to have color palettes at my fingertips and is designed to pay attention to contrast ratio. Moreover, the spacing utilities are very useful and save time while ensuring consistency in spacing.

At first, I disliked Tailwind because using it in class felt like spaghetti code. However, I later realized that I could use the @apply directive to create custom classes, resulting in cleaner code.

How Do I Use Tailwind CSS?

My stack: for web development, I use React and Next.js, and now Tailwind and CSS modules.

As mentioned earlier, I use CSS modules to keep my code cleaner and more readable.

Here's an example of a React component (you can use your preferred library).

import styles from './index.module.css';
import type { FC, PropsWithChildren } from 'react';

const Container: FC<PropsWithChildren> = ({ children }) => (
  <div className={styles.container}>{children}</div>
);

index.module.css

.container {
  @apply flex
    flex-col
    items-center
    justify-center
    rounded-lg
    border
    border-gray-300
    p-4
    shadow-lg;
}

Useful Links

• Tailwind CSS
• CSS MDN Documentation