Tailwind CSS - Utility Classes
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without leaving your HTML.
Key Concepts
Utility-First Approach
Instead of writing custom CSS, compose designs using pre-built utility classes:
<!-- Traditional CSS -->
<style>
.btn {
background-color: #3b82f6;
color: white;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
}
</style>
<button class="btn">Click me</button>
<!-- Tailwind utility-first -->
<button class="bg-blue-500 text-white px-4 py-2 rounded">
Click me
</button>Core Utility Categories
Layout
- Display:
block,inline-block,flex,grid,hidden - Position:
static,relative,absolute,fixed,sticky - Flexbox:
flex-row,flex-col,justify-center,items-center,gap-4 - Grid:
grid-cols-3,grid-rows-2,col-span-2,row-span-1
Spacing
- Padding:
p-4,px-2,py-6,pt-8,pr-3,pb-2,pl-1 - Margin:
m-4,mx-auto,my-6,-mt-4(negative margins) - Space Between:
space-x-4,space-y-2
Typography
- Font Family:
font-sans,font-serif,font-mono - Font Size:
text-xs,text-sm,text-base,text-lg,text-xl,text-2xl,text-3xl - Font Weight:
font-thin,font-normal,font-medium,font-semibold,font-bold - Text Color:
text-gray-900,text-blue-500,text-red-600 - Text Alignment:
text-left,text-center,text-right,text-justify - Line Height:
leading-none,leading-tight,leading-normal,leading-relaxed
Colors & Backgrounds
- Background Color:
bg-white,bg-gray-100,bg-blue-500 - Background Gradient:
bg-gradient-to-r from-blue-500 to-purple-600 - Opacity:
opacity-0,opacity-50,opacity-100
Borders & Shadows
- Border:
border,border-2,border-t,border-gray-300 - Border Radius:
rounded,rounded-lg,rounded-full,rounded-none - Box Shadow:
shadow-sm,shadow,shadow-md,shadow-lg,shadow-xl - Ring:
ring-2,ring-blue-500,ring-offset-2
Effects
- Transitions:
transition,transition-all,duration-300,ease-in-out - Transforms:
scale-110,rotate-45,translate-x-4,skew-y-3 - Filters:
blur-sm,brightness-50,contrast-125,grayscale
Best Practices
1. Responsive Design with Breakpoints
Use responsive prefixes for different screen sizes:
<!-- Mobile-first: stack vertically on small screens, horizontal on medium+ -->
<div class="flex flex-col md:flex-row gap-4">
<div class="w-full md:w-1/2">Column 1</div>
<div class="w-full md:w-1/2">Column 2</div>
</div>
<!-- Responsive text sizes -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">
Responsive Heading
</h1>Breakpoints:
sm:- 640pxmd:- 768pxlg:- 1024pxxl:- 1280px2xl:- 1536px
2. State Variants
Apply utilities based on state:
<!-- Hover, focus, active states -->
<button class="
bg-blue-500 hover:bg-blue-700
text-white
px-4 py-2 rounded
transition
focus:ring-2 focus:ring-blue-300
active:scale-95
">
Interactive Button
</button>
<!-- Group hover -->
<div class="group">
<img class="group-hover:scale-110 transition" src="..." />
<p class="text-gray-600 group-hover:text-blue-500">
Hover the parent
</p>
</div>3. Dark Mode
Use dark: prefix for dark mode styles:
<div class="
bg-white dark:bg-gray-800
text-gray-900 dark:text-white
border border-gray-200 dark:border-gray-700
">
Dark mode compatible content
</div>4. Arbitrary Values
Use square brackets for one-off custom values:
<!-- Custom spacing -->
<div class="mt-[17px] p-[13px]">
<!-- Custom colors -->
<div class="bg-[#1da1f2] text-[rgb(255,100,50)]">
<!-- Custom breakpoints -->
<div class="min-[890px]:flex">5. Class Organization
Order classes logically for readability:
<!-- Layout → Spacing → Typography → Colors → Effects -->
<div class="
flex items-center justify-between
px-6 py-4
text-lg font-semibold
bg-white text-gray-900
shadow-md rounded-lg
hover:shadow-xl transition
">Examples
Card Component
<div class="
max-w-sm mx-auto
bg-white rounded-lg shadow-md overflow-hidden
hover:shadow-xl transition-shadow duration-300
">
<img
class="w-full h-48 object-cover"
src="/image.jpg"
alt="Card image"
/>
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-900 mb-2">
Card Title
</h2>
<p class="text-gray-600 leading-relaxed mb-4">
Card description goes here with some helpful information.
</p>
<button class="
w-full
bg-blue-500 hover:bg-blue-600
text-white font-semibold
py-2 px-4 rounded
transition-colors
">
Learn More
</button>
</div>
</div>Responsive Navigation
<nav class="
bg-white shadow-lg
border-b border-gray-200
">
<div class="
max-w-7xl mx-auto
px-4 sm:px-6 lg:px-8
">
<div class="flex justify-between items-center h-16">
<!-- Logo -->
<div class="flex-shrink-0">
<h1 class="text-2xl font-bold text-blue-600">Logo</h1>
</div>
<!-- Desktop Navigation -->
<div class="hidden md:flex space-x-8">
<a href="#" class="
text-gray-700 hover:text-blue-600
px-3 py-2 rounded-md text-sm font-medium
transition-colors
">
Home
</a>
<a href="#" class="
text-gray-700 hover:text-blue-600
px-3 py-2 rounded-md text-sm font-medium
transition-colors
">
About
</a>
<a href="#" class="
text-gray-700 hover:text-blue-600
px-3 py-2 rounded-md text-sm font-medium
transition-colors
">
Contact
</a>
</div>
<!-- Mobile menu button -->
<div class="md:hidden">
<button class="
text-gray-700 hover:text-blue-600
p-2
">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
</nav>Grid Layout
<div class="
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3
gap-6
p-6
">
<div class="bg-white p-6 rounded-lg shadow">Item 1</div>
<div class="bg-white p-6 rounded-lg shadow">Item 2</div>
<div class="bg-white p-6 rounded-lg shadow">Item 3</div>
<div class="bg-white p-6 rounded-lg shadow col-span-1 md:col-span-2">
Wide Item
</div>
<div class="bg-white p-6 rounded-lg shadow">Item 5</div>
</div>Common Patterns
Centering Content
<!-- Flexbox centering -->
<div class="flex items-center justify-center min-h-screen">
<div>Centered content</div>
</div>
<!-- Grid centering -->
<div class="grid place-items-center min-h-screen">
<div>Centered content</div>
</div>
<!-- Absolute centering -->
<div class="relative h-screen">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
Centered content
</div>
</div>Truncating Text
<!-- Single line truncate -->
<p class="truncate">
This text will be truncated with an ellipsis if it's too long
</p>
<!-- Multi-line truncate -->
<p class="line-clamp-3">
This text will be truncated after 3 lines with an ellipsis
</p>Aspect Ratios
<!-- 16:9 aspect ratio -->
<div class="aspect-video bg-gray-200">
<iframe src="..." class="w-full h-full"></iframe>
</div>
<!-- Square aspect ratio -->
<div class="aspect-square bg-gray-200">
<img src="..." class="w-full h-full object-cover" />
</div>Anti-Patterns
❌ Don't Use Inline Styles
<!-- Bad: Mixing inline styles with Tailwind -->
<div class="p-4" style="margin-top: 20px;">
Content
</div>
<!-- Good: Use Tailwind utilities -->
<div class="p-4 mt-5">
Content
</div>❌ Don't Create Unnecessary Wrapper Divs
<!-- Bad: Extra wrapper for centering -->
<div class="flex justify-center">
<div class="text-center">
<h1>Title</h1>
</div>
</div>
<!-- Good: Direct styling -->
<h1 class="text-center">Title</h1>❌ Don't Overuse Arbitrary Values
<!-- Bad: Too many custom values -->
<div class="mt-[17px] mb-[23px] pt-[11px] pb-[19px]">
<!-- Good: Use standard spacing scale -->
<div class="my-6 py-3">❌ Don't Forget Mobile-First
<!-- Bad: Desktop-first approach -->
<div class="w-1/2 sm:w-full">
<!-- Good: Mobile-first approach -->
<div class="w-full sm:w-1/2">Related Skills
- tailwind-configuration: Customizing Tailwind config and theme
- tailwind-components: Building reusable component patterns
- tailwind-responsive-design: Advanced responsive design techniques
- tailwind-performance: Optimizing Tailwind for production