DEV Community

Jaisurya
Jaisurya

Posted on

Tailwind CSS

#ui #webdev #frontend #css

Tailwind CSS is a utility-first CSS framework that lets you build custom user interfaces directly in your HTML or component markup without writing traditional custom stylesheets.

Tailwind provides low-level utility classes—such as flex, pt-4, bg-blue-500, and text-center—that map directly to individual CSS rules.

How It Works (Traditional CSS vs. Tailwind)
Instead of naming classes and jumping back and forth between your HTML and CSS files, you combine utility classes directly on HTML elements.

Traditional CSS

<!-- HTML -->
<button class="custom-button">Click Me</button>

/* CSS */
.custom-button {
  background-color: #3b82f6;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-weight: 600;
}
Enter fullscreen mode Exit fullscreen mode

Tailwind CSS

<button class="bg-blue-500 text-white px-4 py-2 rounded font-semibold hover:bg-blue-600">
  Click Me
</button>
Enter fullscreen mode Exit fullscreen mode

Advantages

  • Rapid Development: You don't waste time jumping between HTML and CSS files, nor do you spend mental energy coming up with naming conventions (like BEM) for class names.
  • Consistent Design System: Instead of picking random pixels or hex codes, Tailwind enforces a uniform scale for spacing, typography, shadows, and colors out of the box.
  • No Class Name Collisions: Since styles are tied directly to utilities or components rather than global selectors, changing one element's style will never accidentally break another element elsewhere on your site.

Top comments (0)