Tailwind CSS
/Beginner
Tailwind vs Traditional CSS
Definition
A comparison between Semantic CSS (naming classes based on content) and Utility-First CSS (naming classes based on visual function).
Explain Like I'm New
Traditional CSS focuses on 'What is this element?' (`.author-bio`). Tailwind focuses on 'What does this element look like?' (`.font-bold .text-gray-500`). This solves the problem of having 50 different classes across your app that all just apply `display: flex`.
Real World Example
In traditional CSS, if you change `.author-bio` to make the text blue, you might accidentally break the blog layout because someone reused `.author-bio` on the footer. In Tailwind, changes are strictly localized to the specific HTML element you are touching.
Common Use Cases
- •Architectural decisions
- •Team onboarding
Terminal Output
bash / terminal
// The Naming Nightmare (Traditional CSS)
<div class="card-wrapper">
<div class="card-inner">
<h2 class="card-title">...</h2>
// Wait, should this be card-body? card-content? card-text?
<p class="card-content">...</p>
</div>
</div>
// The Tailwind Dream (Just describe what it looks like)
<div class="p-4 border rounded-lg">
<div class="flex flex-col">
<h2 class="text-2xl font-bold">...</h2>
<p class="text-gray-600">...</p>
</div>
</div>
Interview Questions
basic
- Does Tailwind require you to invent class names like `outer-wrapper`?
intermediate
- What is the 'Global Scope' problem in traditional CSS that Tailwind solves?