Tailwind CSS
Quick Start
<!-- Basic card component -->
<div class="max-w-sm mx-auto bg-white rounded-xl shadow-md p-6">
<h2 class="text-xl font-bold text-gray-800 mb-2">Card Title</h2>
<p class="text-gray-600">Card content goes here</p>
<button
class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
Action
</button>
</div>
// React component example
function Button({ variant = "primary", children, ...props }) {
const baseClasses = "font-semibold py-2 px-4 rounded transition-colors";
const variantClasses = {
primary: "bg-blue-500 hover:bg-blue-700 text-white",
secondary: "bg-gray-200 hover:bg-gray-300 text-gray-800",
};
return (
<button className={`${baseClasses} ${variantClasses[variant]}`} {...props}>
{children}
</button>
);
}
Common Patterns
Layout Systems
<!-- Flexbox centering -->
<div class="flex items-center justify-center min-h-screen">
<div class="text-center">Centered content</div>
</div>
<!-- Grid layout -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-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>
<!-- Responsive container -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<!-- Content -->
</div>
Responsive Design
<!-- Responsive text sizing -->
<h1 class="text-2xl md:text-3xl lg:text-4xl font-bold">Responsive Heading</h1>
<!-- Responsive spacing -->
<div class="py-4 sm:py-6 lg:py-8">
<!-- Content with responsive padding -->
</div>
<!-- Mobile-first approach -->
<div class="w-full md:w-1/2 lg:w-1/3">
<!-- Full width on mobile, half on tablet, third on desktop -->
</div>
Component Patterns
<!-- Navigation bar -->
<nav class="bg-white shadow-lg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="text-xl font-bold text-gray-800">Logo</div>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="text-gray-600 hover:text-gray-800">Home</a>
<a href="#" class="text-gray-600 hover:text-gray-800">About</a>
<a href="#" class="text-gray-600 hover:text-gray-800">Contact</a>
</div>
</div>
</div>
</nav>
<!-- Form inputs -->
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
<input
type="email"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Message</label>
<textarea
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
rows="4"
></textarea>
</div>
</div>
<!-- Card with hover effects -->
<div
class="transform transition-all duration-200 hover:scale-105 hover:shadow-xl"
>
<div class="bg-white rounded-lg overflow-hidden shadow-lg">
<img src="image.jpg" alt="Card image" class="w-full h-48 object-cover" />
<div class="p-6">
<h3 class="text-lg font-semibold mb-2">Card Title</h3>
<p class="text-gray-600">Card description with hover effects</p>
</div>
</div>
</div>
Utility Combinations
<!-- Text with gradient -->
<div
class="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent"
>
Gradient Text
</div>
<!-- Glass morphism effect -->
<div class="backdrop-blur-md bg-white/20 border border-white/30 rounded-lg p-6">
Glass effect card
</div>
<!-- Custom spacing with arbitrary values -->
<div class="p-[2.5rem] m-[1.75rem]">Custom padding and margin</div>
<!-- Aspect ratio containers -->
<div class="aspect-w-16 aspect-h-9">
<iframe src="video-url" class="w-full h-full"></iframe>
</div>
Dark Mode
<!-- Dark mode aware component -->
<div
class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-lg p-6"
>
<h2 class="text-xl font-bold mb-4">Dark Mode Compatible</h2>
<p class="text-gray-600 dark:text-gray-300">
This content adapts to dark/light theme
</p>
</div>
<!-- Toggle button -->
<button
class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-4 py-2 rounded"
>
Toggle Theme
</button>
Interactive Elements
<!-- Buttons with states -->
<button
class="bg-blue-500 hover:bg-blue-700 active:bg-blue-800 text-white font-bold py-2 px-4 rounded transition-colors"
>
Interactive Button
</button>
<!-- Dropdown menu -->
<div class="relative">
<button
class="bg-white border border-gray-300 rounded-md px-4 py-2 text-left"
>
Select Option
</button>
<div
class="absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded-md shadow-lg"
>
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Option 1</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Option 2</a>
</div>
</div>
Animation & Transitions
<!-- Fade in animation -->
<div class="animate-fade-in opacity-0 animation-fill-forwards">
Fade in content
</div>
<!-- Smooth transitions -->
<div class="transform transition-transform duration-300 hover:translate-x-2">
Slide on hover
</div>
<!-- Loading spinner -->
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
Custom CSS Integration
/* tailwind.config.js */
module.exports = {
theme: {
extend: {
colors: {
brand: '#3B82F6',
'brand-dark': '#1E40AF',
},
spacing: {
'72': '18rem',
'84': '21rem',
},
},
},
plugins: [],
}
<!-- Using custom theme values -->
<div class="bg-brand text-white p-4">Custom brand color</div>
<div class="p-72">Custom spacing</div>
Best Practices
- Component-based approach: Extract repeated class combinations into components
- Mobile-first: Use responsive prefixes (
md:, lg:) to enhance mobile designs - Consistent spacing: Use the spacing scale (
p-4, m-6, gap-8) consistently - Semantic naming: Use utility classes that describe their function
- Responsive images: Always include
object-cover or object-contain for images
Performance Tips
- Use PurgeCSS/JIT mode to remove unused utilities
- Group related classes together
- Use CSS variables for dynamic values
- Leverage container queries for component-based responsive design
- Consider using
@apply sparingly for truly reusable patterns
