Tailwind CSS vs. Normal CSS: A Developer’s Comparison

Introduction:
In the world of web development, styling your application can be accomplished in a variety of ways. Two popular approaches are using Tailwind CSS, a utility-first CSS framework, and writing traditional CSS. This post compares these two methods, focusing on some of the more challenging aspects of styling, such as setting background URLs and element ordering. We'll dive into the pros and cons of each approach and provide a snippet example to illustrate the differences.

Setting Background URLs:

Tailwind CSS:
Tailwind makes setting background images straightforward with utility classes, but customizing URLs requires extra configuration in the tailwind.config.js file. For example, to set a background image using Tailwind:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'hero-pattern': "url('/img/hero-pattern.svg')",
      }
    }
  }
}

// In your component
<div className="bg-hero-pattern">
  <!-- Content -->
</div>

Normal CSS:
Traditional CSS allows you to set background URLs directly within the style rules, offering greater flexibility and simplicity for complex backgrounds:

/* styles.css */
.hero-pattern {
  background-image: url('/img/hero-pattern.svg');
}

<!-- In your HTML -->
<div class="hero-pattern">
  <!-- Content -->
</div>

Element Ordering:

Tailwind CSS:
With Tailwind, you can order elements using utility classes like order-{number}. This makes reordering elements in different screen sizes a breeze:

<div className="order-1 md:order-2">
  <!-- Content -->
</div>

Normal CSS:
Reordering elements with traditional CSS involves using the order property within flexbox layouts. Although effective, it may require more verbose code:

/* styles.css */
.order-md-2 {
  order: 2;
}

<!-- In your HTML -->
<div class="order-md-2">
  <!-- Content -->
</div>

Pros and Cons:

Tailwind CSS:

• Pros:
  • Speeds up development with utility classes.
  • Highly customizable with configuration files.
  • Encourages consistency across projects.
• Cons:
  • Requires learning a new set of classes.
  • Can lead to bloated HTML if not managed properly.
  • Initial setup might be cumbersome for beginners.

Normal CSS:

• Pros:
  • Universally understood and widely used.
  • Offers complete control over styles.
  • No need for additional libraries or configuration.
• Cons:
  • Can become verbose and repetitive.
  • Maintaining large CSS files can be challenging.
  • Less consistent approach compared to utility-first frameworks.

Snippet Example:

To highlight the differences, here's a quick snippet for creating a styled button:

Tailwind CSS:

<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Tailwind Button
</button>

Normal CSS:

/* styles.css */
.button {
  background-color: #4299e1;
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.button:hover {
  background-color: #2b6cb0;
}

<!-- In your HTML -->
<button class="button">
  Normal CSS Button
</button>

Conclusion:
Both Tailwind CSS and traditional CSS have their strengths and weaknesses. Tailwind offers a faster, utility-first approach that can speed up development, while normal CSS provides more flexibility and control. Ultimately, the choice between Tailwind and traditional CSS depends on your project requirements and personal preferences. Happy styling!

Feel free to tweak the draft as needed. Let me know if you need further assistance with the other posts!

Comments

[Micael Miranda Inácio]

Tailwind has become easier to setup these days and once you get used to it the coding process becomes much faster, so I think Tailwind wins this battle for me, especially when you create components (JSX/TSX) which prevents your code from becoming a big mess of CSS classes.