Tailwind CSS is a utility-first CSS framework. Classes are composed of:
<!-- Example: Responsive padding with hover effect -->
<div class="p-4 md:p-8 hover:bg-gray-100">
Content
</div>| Prefix | Min Width | CSS | Example Usage |
|---|---|---|---|
sm: |
640px | @media (min-width: 640px) | sm:text-lg sm:p-6 |
md: |
768px | @media (min-width: 768px) | md:flex md:grid-cols-2 |
lg: |
1024px | @media (min-width: 1024px) | lg:text-xl lg:w-1/2 |
xl: |
1280px | @media (min-width: 1280px) | xl:grid-cols-4 xl:px-8 |
2xl: |
1536px | @media (min-width: 1536px) | 2xl:container 2xl:mx-auto |
<!-- Mobile-first responsive design -->
<div class="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl">
Responsive Text
</div>
<!-- Responsive grid layout -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<!-- Grid items -->
</div>| Size | Rem | Pixels | Padding Example | Margin Example |
|---|---|---|---|---|
| 0 | 0 | 0px | p-0 |
m-0 |
| px | 1px | 1px | p-px |
m-px |
| 0.5 | 0.125rem | 2px | p-0.5 |
m-0.5 |
| 1 | 0.25rem | 4px | p-1 |
m-1 |
| 2 | 0.5rem | 8px | p-2 |
m-2 |
| 3 | 0.75rem | 12px | p-3 |
m-3 |
| 4 | 1rem | 16px | p-4 |
m-4 |
| 5 | 1.25rem | 20px | p-5 |
m-5 |
| 6 | 1.5rem | 24px | p-6 |
m-6 |
| 8 | 2rem | 32px | p-8 |
m-8 |
| 10 | 2.5rem | 40px | p-10 |
m-10 |
| 12 | 3rem | 48px | p-12 |
m-12 |
| 16 | 4rem | 64px | p-16 |
m-16 |
padding-top: 1rem
padding-right: 1rem
padding-bottom: 1rem
padding-left: 1rem
padding-left & right: 1rem
padding-top & bottom: 1rem
margin-top: 1rem
margin-left & right: auto
| Class | Size | Line Height |
|---|---|---|
text-xs |
0.75rem (12px) | 1rem |
text-sm |
0.875rem (14px) | 1.25rem |
text-base |
1rem (16px) | 1.5rem |
text-lg |
1.125rem (18px) | 1.75rem |
text-xl |
1.25rem (20px) | 1.75rem |
text-2xl |
1.5rem (24px) | 2rem |
text-3xl |
1.875rem (30px) | 2.25rem |
text-4xl |
2.25rem (36px) | 2.5rem |
text-5xl |
3rem (48px) | 1 |
text-6xl |
3.75rem (60px) | 1 |
text-7xl |
4.5rem (72px) | 1 |
text-8xl |
6rem (96px) | 1 |
text-9xl |
8rem (128px) | 1 |
font-weight: 100
font-weight: 200
font-weight: 300
font-weight: 400
font-weight: 500
font-weight: 600
font-weight: 700
font-weight: 800
font-weight: 900
text-align: left
text-align: center
text-align: right
text-align: justify
text-transform: uppercase
text-transform: lowercase
text-transform: capitalize
font-style: italic
text-decoration: underline
text-decoration: line-through
text-decoration: none
Truncate text with ellipsis
Colors come in shades from 50 (lightest) to 900 (darkest)
Red text color
Blue background
Green border
Gray text
Light yellow bg
Purple text
<!-- Text, background, and border colors -->
<div class="text-white bg-blue-500 border-2 border-blue-700">
Blue box with white text
</div>
<!-- Gradient backgrounds -->
<div class="bg-gradient-to-r from-purple-400 to-pink-600">
Gradient background
</div>| Class | Properties |
|---|---|
w-0 |
width: 0 |
w-px |
width: 1px |
w-1 |
width: 0.25rem (4px) |
w-4 |
width: 1rem (16px) |
w-8 |
width: 2rem (32px) |
w-16 |
width: 4rem (64px) |
w-32 |
width: 8rem (128px) |
w-64 |
width: 16rem (256px) |
w-auto |
width: auto |
w-1/2 |
width: 50% |
w-1/3 |
width: 33.333% |
w-2/3 |
width: 66.667% |
w-full |
width: 100% |
w-screen |
width: 100vw |
w-min |
width: min-content |
w-max |
width: max-content |
w-fit |
width: fit-content |
height: 4rem (64px)
height: 100%
height: 100vh
min-height: 100%
min-height: 100vh
max-height: 100%
border-width: 1px
border-width: 0
border-width: 2px
border-width: 4px
border-width: 8px
border-top-width: 2px
border-radius: 0
border-radius: 0.125rem
border-radius: 0.25rem
border-radius: 0.375rem
border-radius: 0.5rem
border-radius: 0.75rem
border-radius: 1rem
border-radius: 1.5rem
border-radius: 9999px
Small shadow
Default shadow
Medium shadow
Large shadow
Extra large shadow
2x large shadow
Inner shadow
No shadow
| Modifier | Description | Example |
|---|---|---|
hover: |
On mouse hover | hover:bg-blue-600 hover:text-white |
focus: |
On focus | focus:outline-none focus:ring-2 |
active: |
On active/pressed | active:bg-blue-700 |
disabled: |
When disabled | disabled:opacity-50 disabled:cursor-not-allowed |
first: |
First child | first:rounded-t-lg |
last: |
Last child | last:border-b-0 |
odd: |
Odd children | odd:bg-gray-100 |
even: |
Even children | even:bg-white |
group-hover: |
Parent hover | group-hover:text-blue-600 |
dark: |
Dark mode | dark:bg-gray-800 dark:text-white |
<!-- Interactive button with states -->
<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700
focus:outline-none focus:ring-2 focus:ring-blue-500
disabled:opacity-50 disabled:cursor-not-allowed
text-white font-bold py-2 px-4 rounded">
Click Me
</button>
<!-- Group hover effect -->
<div class="group hover:bg-gray-100 p-4">
<h3 class="group-hover:text-blue-600">Title</h3>
<p class="group-hover:text-gray-700">Description</p>
</div><!-- Card Component -->
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg bg-white">
<img class="w-full h-48 object-cover" src="..." alt="...">
<div class="px-6 py-4">
<h2 class="font-bold text-xl mb-2">Card Title</h2>
<p class="text-gray-700 text-base">Card description</p>
</div>
</div>
<!-- Centered Container -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<!-- Content -->
</div>
<!-- Flexbox Center -->
<div class="flex items-center justify-center min-h-screen">
<!-- Centered content -->
</div>
<!-- Responsive Navigation -->
<nav class="flex flex-col sm:flex-row items-center justify-between p-4">
<div class="text-xl font-bold">Logo</div>
<div class="flex gap-4 mt-4 sm:mt-0">
<a class="hover:text-blue-600" href="#">Link</a>
</div>
</nav>
<!-- Form Input -->
<input class="w-full px-3 py-2 border border-gray-300 rounded-md
focus:outline-none focus:ring-2 focus:ring-blue-500"
type="text" placeholder="Enter text">