Tailwind CSS
Rapid Utility-First Styling
“Build modern, responsive interfaces directly in your markup”
<div className="p-6 bg-slate-900 border border-slate-800 rounded-xl shadow-xl flex items-center gap-4 hover:border-blue-500 transition-all">
<div className="w-12 h-12 bg-blue-500/20 text-blue-400 rounded-lg flex items-center justify-center font-bold">
TS
</div>
<div>
<h3 className="text-lg font-bold text-white">Tailwind CSS</h3>
<p className="text-sm text-slate-400">Utility-First Framework</p>
</div>
</div>Why Utility-First CSS?
How utility classes solve the classic pitfalls of traditional CSS files
Traditional CSS File Nightmare
You waste hours thinking of class names (.header-nav-card-item-inner). The CSS file grows infinitely because you fear deleting unused rules.
Tailwind Utility-First Superpower
You style directly inside your markup with predefined constraints. Purges unused classes automatically for a tiny ~10kB production stylesheet.
Configuration & Setup
Importing Tailwind directives into your project
@import "tailwindcss";
@theme {
--color-brand-primary: #2563eb;
--color-brand-accent: #6366f1;
--font-display: 'Plus Jakarta Sans', sans-serif;
}+ @tailwindcss/postcss 4.0.0
Packages installed successfully
Sizing & Spacing System
Fixed mathematical scale for margins, paddings, and dimensions
| Utility Class | CSS Value | Pixel Equivalent | Usage Example |
|---|---|---|---|
p-1 / m-1 | 0.25rem | 4px | Micro gap, button tags |
p-2 / m-2 | 0.5rem | 8px | Small pill badges |
p-3 / m-3 | 0.75rem | 12px | Input fields |
p-4 / m-4 | 1rem | 16px | Standard card padding |
p-5 / m-5 | 1.25rem | 20px | Section card containers |
w-full / max-w-xl | 100% / 36rem | Full width with cap | Responsive containers |
Typography & Modern Colors
Pre-curated contrast and hierarchy
<h1 className="text-3xl font-extrabold tracking-tight text-white">
Main Heading
</h1>
<h2 className="text-xl font-bold text-slate-200 mt-2">
Subtitle Heading
</h2>
<p className="text-sm text-slate-400 leading-relaxed mt-1">
Descriptive paragraph text with balanced line height.
</p>
<span className=" text-xs text-blue-400">
git status
</span>Color Palette Rules
1. Backgrounds: bg-slate-900, bg-slate-950, bg-white
2. Text: text-slate-100 (primary), text-slate-400 (muted)
3. Accents: text-blue-400, bg-blue-500, border-blue-500/30
4. Borders: border-slate-800, border-slate-200
Flexbox & CSS Grid in Action
Building responsive 2-column and 3-column card layouts
{/* Responsive 1 col on mobile, 3 cols on desktop */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{features.map((item) => (
<div
key={item.id}
className="flex flex-col justify-between p-4 bg-slate-900 border border-slate-800 rounded-xl"
>
<div className="flex items-center justify-between">
<span className="text-xs text-blue-400">{item.tag}</span>
<span className="text-xs text-slate-500">{item.date}</span>
</div>
<h3 className="text-base font-bold text-white mt-2">{item.title}</h3>
<p className="text-sm text-slate-400 mt-1">{item.desc}</p>
</div>
))}
</div>Mobile-First Breakpoint Architecture
Styles apply to mobile first, then scale up with prefixes
| Prefix | Minimum Width | CSS Media Query | Target Device |
|---|---|---|---|
| (default) | 0px | (mobile first) | All smartphones |
sm: | 640px | @media (min-width: 640px) | Large phones / small tablets |
md: | 768px | @media (min-width: 768px) | Tablets / iPad |
lg: | 1024px | @media (min-width: 1024px) | Laptops / Desktops |
xl: | 1280px | @media (min-width: 1280px) | Large desktop monitors |
className="w-full md:w-1/2 lg:w-1/3" makes a column full width on phones, half width on tablets, and one third on desktop.Interactive Hover, Focus & Active States
Polished micro-animations with transition utilities
<button className="
px-4 py-2
bg-blue-600 text-white font-bold text-sm
rounded-lg
hover:bg-blue-500 hover:shadow-lg hover:shadow-blue-500/25
focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-slate-950
active:scale-95
transition-all duration-150 ease-out
">
Submit Form
</button>focus:ring-2 for keyboard accessibility and transition-all for smooth visual feedback.Tailwind Dark Mode Integration
Effortless dual-theme support using the dark: variant
<div className="
bg-white dark:bg-slate-900
text-slate-900 dark:text-slate-100
border border-slate-200 dark:border-slate-800
rounded-xl p-5 shadow-sm
">
<h3 className="text-lg font-bold">Project Status</h3>
<p className="text-sm text-slate-500 dark:text-slate-400 mt-1">
Automatically adapts when the user switches themes.
</p>
</div>Reusable Component Extraction
How to avoid class string duplication in React
Don't Overuse @apply
Do not create hundreds of custom CSS classes with @apply. That defeats the purpose of utility-first CSS and creates a bloated stylesheet.
Extract React Components
Wrap repeated markup in reusable components like <Button variant="primary" /> or <Card />.
Tailwind Developer Best Practices
Writing clean, maintainable utility markup
w-[350px]) sparingly; stick to the scalebg-blue-500/20 for sleek glowscn() utility helper to merge conditional classesTailwind CSS Mastery Checklist
You now have full control of modern utility styling