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