From CSS to Tailwind
How Tailwind CSS revolutionizes the way we style websites.
Traditional CSS Approach
With traditional CSS, you write styles in a separate stylesheet and reference them with class names:
- Create a CSS file with your styles
- Write selectors and properties
- Link the stylesheet to your HTML
- Add class names to HTML elements
- Repeat for every component
/* Traditional CSS Example */
.card {
background: white;
border-radius: 0.5rem;
padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
margin-bottom: 1rem;
}
.card-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: #1e40af;
}CSS vs Tailwind Examples
See the difference between traditional CSS and Tailwind in common UI patterns.
Login Form
Traditional CSS Login Form
/* CSS for login form */
.login-form {
max-width: 400px;
margin: 2rem auto;
padding: 2rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}<div class="login-form">
<h2>Login</h2>
<form>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" />
</div>
<button type="submit">Sign In</button>
</form>
</div>Tailwind CSS Login Form
<!-- Tailwind login form -->
<div class="max-w-md mx-auto p-6 sm:p-8 bg-white rounded-lg shadow-md">
<h2 class="text-xl sm:text-2xl font-bold mb-4 sm:mb-6">Login</h2>
<form>
<div class="mb-4 sm:mb-6">
<label class="block text-gray-700 mb-2">Email</label>
<input class="w-full px-3 py-2 border rounded-md" type="email" />
</div>
<button class="w-full bg-blue-700 text-white py-2 px-4 rounded-md">
Sign In
</button>
</form>
</div>Login
Grid Layout
Traditional CSS Grid
/* CSS Grid styles */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.grid-item {
background: white;
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}<div class="grid-container">
<div class="grid-item">
<h3>Item 1</h3>
<p>Content</p>
</div>
<!-- More items -->
</div>Tailwind CSS Grid
<!-- Tailwind grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
<div class="bg-white p-4 sm:p-6 rounded-lg shadow-sm">
<h3 class="text-lg sm:text-xl font-semibold mb-2">Item 1</h3>
<p class="text-gray-600">Content</p>
</div>
<!-- More items -->
</div>Item 1
Content goes here
Item 2
Content goes here
Item 3
Content goes here
Spacing
Traditional CSS Spacing
/* CSS for spacing */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.header {
margin-bottom: 2rem;
padding: 1.5rem;
}<div class="container">
<header class="header">
<h1>Title</h1>
</header>
<div class="card">
<p>Content</p>
</div>
</div>Tailwind CSS Spacing
<!-- Tailwind spacing -->
<div class="w-full max-w-6xl mx-auto px-4">
<header class="mb-6 sm:mb-8 py-4 sm:py-6">
<h1 class="text-xl sm:text-2xl font-bold">Title</h1>
</header>
<div class="mb-4 sm:mb-6 p-3 sm:p-4">
<p>Content</p>
</div>
</div>Title
Card content
Common Tailwind CSS Classes
Quick reference for the most frequently used Tailwind utility classes.
Layout & Structure
| Class | What it does |
|---|---|
container | Centers content with max-width |
mx-auto | Horizontal centering |
flex | Display flex |
grid | Display grid |
block | Display block |
hidden | Display none |
relative | Position relative |
absolute | Position absolute |
Spacing
| Class | What it does |
|---|---|
m-4 | Margin all sides (1rem) |
p-4 | Padding all sides (1rem) |
gap-4 | Gap between items |
mt-4 | Margin top (1rem) |
mb-4 | Margin bottom (1rem) |
ml-4 | Margin left (1rem) |
mr-4 | Margin right (1rem) |
px-4 | Padding left & right (1rem) |
Sizing
| Class | What it does |
|---|---|
w-full | Full width |
h-screen | Full viewport height |
w-1/2 | 50% width |
min-h-screen | Minimum viewport height |
max-w-md | Max-width 28rem (448px) |
w-auto | Width auto |
h-12 | Height 3rem (48px) |
min-w-max | Minimum width max-content |
Typography
| Class | What it does |
|---|---|
text-xl | Extra large text |
font-bold | Font weight bold |
text-center | Text align center |
uppercase | Text uppercase |
leading-relaxed | Line height 1.625 |
tracking-wide | Letter spacing 0.025em |
underline | Text underline |
italic | Text italic |
Colors & Backgrounds
| Class | What it does |
|---|---|
bg-white | White background |
text-gray-600 | Gray text color |
bg-blue-500 | Blue background |
text-red-500 | Red text color |
bg-opacity-50 | Background opacity 50% |
bg-gradient-to-r | Right gradient |
hover:bg-gray-100 | Hover gray background |
focus:ring-2 | Focus ring |
Borders & Effects
| Class | What it does |
|---|---|
rounded-lg | Large border radius |
shadow-md | Medium shadow |
border | Default border |
border-2 | 2px border |
border-blue-500 | Blue border |
ring-2 | Focus ring |
transition-all | Smooth transitions |
hover:shadow-lg | Hover larger shadow |
Tailwind CSS Features
Why Tailwind is the perfect CSS framework for modern web development.
Utility-First
Build any design directly in your HTML with thousands of utility classes.
Responsive Design
Easy responsive design with built-in breakpoint prefixes like md: and lg:.
Customizable
Configure colors, spacing, fonts and more in the config file.
Component-Friendly
Extract component classes with @apply or use with React/Vue components.
Design Consistency
Built-in design system ensures spacing, colors and typography are consistent.
Performance
Purge unused styles in production for optimal performance.