What is Tailwind CSS?
Core Philosophy
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without ever leaving your HTML.
Utility-First: Instead of predefined components, you use utility classes to create completely custom designs.
- Highly customizable with configuration file
- Responsive by default with mobile-first breakpoints
- PurgeCSS included for removing unused CSS
Traditional vs Tailwind
Traditional CSS
<div class="card">...</div>
.card {
display: flex;
padding: 2rem;
background: white;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
Tailwind CSS
<div class="flex p-8 bg-white rounded-lg shadow-md">
<!-- Content -->
</div>
Key Advantages
Rapid Development
Build complex UIs directly in HTML without context switching
Responsive Design
Built-in responsive modifiers for all screen sizes
Customizable
Configure colors, spacing, fonts, and more via config file
Tailwind Color System
Tailwind includes a beautifully crafted color palette with multiple shades for each color.
Color Naming Convention
Tailwind colors follow a color-shade naming
pattern.
Each color has 9 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) where 50 is lightest and
900 is darkest.
red-500
Primary red shade
blue-300
Light blue variant
green-700
Dark green variant
gray-50
Lightest gray
Color Categories & Examples
Primary Colors
Core colors for main UI elements
blue-500
Primary buttons, links
indigo-600
Navigation, headers
cyan-500
Accents, highlights
Semantic Colors
Colors with specific meanings
green-500
Success, positive actions
red-500
Errors, destructive actions
yellow-500
Warnings, cautions
Neutral Colors
Backgrounds, borders, text
gray-100
Light backgrounds
gray-700
Dark text, footers
gray-900
Headings, dark mode
Complete Tailwind Color Palette
All available color names in Tailwind CSS (default palette)
| Color Group | Color Names | Common Shades | Visual Examples |
|---|---|---|---|
| Gray Scale |
gray
slate
zinc
neutral
stone
|
100, 500, 900 |
|
| Primary Colors |
blue
indigo
cyan
sky
violet
|
500, 600, 700 |
|
| Secondary Colors |
purple
fuchsia
pink
rose
|
400, 500, 600 |
|
| Semantic Colors |
green
emerald
teal
red
yellow
amber
orange
lime
|
500 for success/warning, 600 for error |
|
Gray Scale Colors
Neutral backgrounds and text
Primary Colors
Main UI elements and branding
Secondary Colors
Accents and highlights
Semantic Colors
Status indicators and feedback
Quick Reference
Color Name Pattern:
color-shade
Example: blue-500, red-600,
gray-100
Available Shades:
All Tailwind Color Names
Complete list of color families (without shade variants)
Gray Scale
-
slate -
gray -
zinc -
neutral -
stone
Cool Colors
-
blue -
sky -
cyan -
teal -
emerald
Purple Family
-
indigo -
violet -
purple -
fuchsia -
pink -
rose
Warm Colors
-
red -
orange -
amber -
yellow -
lime -
green
Summary
Total Color Families: 22
Shades per Color: 10 (50-900)
Total Color Variants: 220+
Usage Example:
class="bg-blue-500 text-white"
color-name + shade = complete color class
Complete Color Palette
| Color | Shade 50 | Shade 300 | Shade 500 | Shade 700 | Shade 900 |
|---|---|---|---|---|---|
|
Blue
|
blue-50
|
blue-300
|
blue-500
|
blue-700
|
blue-900
|
|
Green
|
green-50
|
green-300
|
green-500
|
green-700
|
green-900
|
|
Red
|
red-50
|
red-300
|
red-500
|
red-700
|
red-900
|
|
Purple
|
purple-50
|
purple-300
|
purple-500
|
purple-700
|
purple-900
|
Popular Tailwind Classes
Category-wise breakdown of the most commonly used Tailwind CSS classes
| Category | Class Name | CSS Equivalent | Purpose | Example |
|---|---|---|---|---|
| Layout |
flex
|
display: flex;
|
Creates a flex container |
|
grid
|
display: grid;
|
Creates a grid container |
|
|
hidden
|
display: none;
|
Hides an element | ||
block
|
display: block;
|
Displays as block element | ||
| Spacing |
p-4
|
padding: 1rem;
|
Adds 1rem padding to all sides |
|
m-2
|
margin: 0.5rem;
|
Adds 0.5rem margin to all sides |
|
|
mt-8
|
margin-top: 2rem;
|
Adds 2rem margin to top only |
|
|
px-4
|
padding-left: 1rem; padding-right: 1rem;
|
Adds horizontal padding |
|
|
| Typography |
text-xl
|
font-size: 1.25rem; line-height: 1.75rem;
|
Sets extra-large text size | Aa |
font-bold
|
font-weight: 700;
|
Makes text bold | Bold | |
text-center
|
text-align: center;
|
Centers text horizontally |
Text
|
|
uppercase
|
text-transform: uppercase;
|
Transforms text to uppercase | abc | |
| Backgrounds & Borders |
bg-blue-500
|
background-color: #3b82f6;
|
Sets blue background | |
rounded-lg
|
border-radius: 0.5rem;
|
Adds large border radius | ||
border
|
border-width: 1px;
|
Adds 1px border | ||
shadow-md
|
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
|
Adds medium shadow |
Layout Classes
flex
Creates a flex container
display: flex;
grid
Creates a grid container
display: grid;
hidden
Hides an element
display: none;
Spacing Classes
p-4
Adds 1rem padding to all sides
padding: 1rem;
mt-8
Adds 2rem margin to top only
margin-top: 2rem;
mx-auto
Centers element horizontally
margin-left: auto; margin-right: auto;
Typography Classes
text-xl
Aa
Sets extra-large text size
font-size: 1.25rem;
font-bold
Bold
Makes text bold
font-weight: 700;
text-center
Centers text horizontally
text-align: center;
Practical Example
Tailwind Classes
<button
class="bg-blue-600 hover:bg-blue-700 text-white
font-bold py-3 px-6 rounded-lg shadow-md
transition duration-300 transform hover:scale-105
focus:outline-none focus:ring-2 focus:ring-blue-300">
Click Me
</button>
Result
This button uses multiple Tailwind classes for colors, spacing, typography, hover effects, transitions, and focus states.