CSS vs Bootstrap vs TailwindCSS

A button in three ways

CSS

.btn {
  background-color: #3b82f6;
  color: #ffffff;
  font-weight: bold;
  padding: 0.5rem 1rem 0.5rem 1rem;
  border-radius: 0.25rem;
  border: none;
}
 
.btn:hover {
  background-color: #1d4ed8;
}

Bootstrap

<button class="btn btn-primary">Primary Button</button>

Tailwindcss

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

Comparison

	Bootstrap	TailwindCSS
Philosophy	Component-based CSS framework	Utility-first CSS framework
Learning Curve	Easier, especially for beginners, due to predefined components	Steeper due to many utility classes
HTML Markup	Cleaner HTML markup with predefined components	Can lead to more verbose HTML with many classes
Flexibility	Moderate, good for standard designs but less flexible	High, allows for detailed and unique designs
Responsive Design	Uses predefined grid system and responsive utilities	Uses utility classes for responsive design

Utility-First CSS Framework

TailwindCSS provides low-level utility classes for styling HTML elements.
Unlike traditional CSS frameworks that offer pre-designed components, TailwindCSS offers a collection of classes like flex, pt-4, text-center, mt-1, w-1/2, etc.

Utility Classes explanation

Utility classes are single-purpose classes that perform one specific task, such as setting the margin, padding, or font size.
Example: m-4 sets the margin to 1rem, p-4 sets the padding to 1rem, text-center centers the text, bg-blue-500 sets the background color to a specific shade of blue.

Benefits of Utility Classes

Faster styling by applying classes directly to HTML elements.
More control over styling without needing to write custom CSS.
Consistent design across the project as you use the same utility classes throughout.

Key Features

Utility Classes

margins (m-4), padding (p-4), typography (text-lg, font-bold), layout (flex, grid)

<div class="p-4 m-2 text-center">Content</div>

Pseudo-class variants

hover, focus, active.

<button class="bg-blue-500 hover:bg-blue-700">Hover Me</button>

Responsive Design

Breakpoints: sm, md, lg, xl, 2xl.

<div class="text-center md:text-left lg:text-right">Responsive Text</div>

Dark mode

dark:

<button class="bg-blue-500 dark:bg-blue-700">Dark Button</button>

Pros and Cons

Pros

Flexibility in design without being confined to pre-designed components
Increased development speed due to reusable utility classes
Easier to maintain consistency across large projects
No naming conflict
Highly organized and easy-to-search documents

Cons

Can result in bloated HTML with many classes
Initial steep learning curve to become familiar with all available utility classes
Less readable due to the lack of traditional class names

References

https://tailwindcss.com/docs/installation