- Installation & Setup
- Layout
- Flexbox & Grid
- Spacing
- Sizing
- Colors
- Typography
- Backgrounds
- Borders & Radius
- Effects
- Interactivity
- Transforms & Animations
- Responsive Design
- Positioning
- Lists & Tables
- Miscellaneous
- Divide Utilities
- Ring Utilities
- Filters
- Gradients & Blend Modes
- Transitions & Animations (Extended)
- Clearfix
- Scroll & Overflow Utilities
- Text Decoration & Shadow
- Content Utilities
- Arbitrary Values
Installation & Setup
| Command | Description | Real-World Example |
|---|---|---|
npm install tailwindcss | Install Tailwind CSS via npm |
Input: npm install tailwindcss
Effect: Installs Tailwind CSS into your project
|
npx tailwindcss init | Create a Tailwind configuration file |
Input: npx tailwindcss init
Effect: Generates a tailwind.config.js file
|
@tailwind base; | Include Tailwind’s base styles in your CSS |
Input: @tailwind base;
Effect: Adds Tailwind's base styles (e.g., normalize.css) to your project
|
@tailwind components; | Include Tailwind’s component styles in your CSS |
Input: @tailwind components;
Effect: Adds Tailwind's component styles (e.g., buttons, forms) to your project
|
@tailwind utilities; | Include Tailwind’s utility classes in your CSS |
Input: @tailwind utilities;
Effect: Adds Tailwind's utility classes (e.g., padding, margin) to your project
|
npx tailwindcss build src/styles.css -o dist/styles.css | Compile Tailwind CSS into your final CSS file |
Input: npx tailwindcss build src/styles.css -o dist/styles.css
Effect: Compiles your Tailwind file into the dist/styles.css file
|
npm run dev | Run Tailwind with a build tool for development (e.g., using PostCSS) |
Input: npm run dev
Effect: Starts the build tool and watches for changes in your CSS files
|
tailwind.config.js | Customize Tailwind settings in the configuration file |
Input: Modify tailwind.config.js to add custom colors, fonts, etc.
Effect: Tailwind CSS is customized according to your settings
|
purge: ['./src/**/*.{html,js}'] | Enable PurgeCSS to remove unused CSS in production |
Input: purge: ['./src/**/*.{html,js}']
Effect: Removes unused CSS classes during production builds
|
Layout
| Class | Description | Real-World Example |
|---|---|---|
container | A responsive container with padding that centers content |
Input: <div class="container mx-auto">Content</div>
Effect: Centers content with responsive width constraints
|
box-border, box-content | Set box-sizing to border-box or content-box |
Input: <div class="box-border p-4 w-32 h-32">Content</div>
Effect: Element maintains 32px width/height with padding included
|
block | Display as a block element |
Input: <span class="block">Block Element</span>
Effect: Span behaves like a div, taking full width of parent
|
inline-block | Display as an inline-block element |
Input: <div class="inline-block p-2">Content</div>
Effect: Element flows with text but can have width/height
|
flex | Display as a flex container |
Input: <div class="flex"><div>Item 1</div><div>Item 2</div></div>
Effect: Elements display in a row with flexbox properties
|
grid | Display as a grid container |
Input: <div class="grid grid-cols-2 gap-4"><div>1</div><div>2</div></div>
Effect: Creates a 2-column grid layout with gap
|
hidden | Hide an element (display: none) |
Input: <div class="hidden">Can't see me</div>
Effect: Element is completely hidden from view
|
float-left, float-right | Float elements left or right |
Input: <img class="float-left mr-4">Text flows around image
Effect: Image floats to the left with text wrapping around it
|
clear-left, clear-both | Clear floated elements |
Input: <div class="clear-both">Below floated content</div>
Effect: Element appears below any floated elements
|
object-cover, object-contain | Control how an image/video fits its container |
Input: <img class="object-cover w-full h-48" src="...">
Effect: Image covers entire area, potentially cropping to fit
|
object-center, object-top | Position replaced elements (images, videos) |
Input: <img class="object-cover object-center w-full h-48" src="...">
Effect: Image centered within container while maintaining cover
|
Flexbox & Grid
| Class | Description | Real-World Example |
|---|---|---|
flex, inline-flex | Create a block or inline flex container |
Input: <div class="flex">...</div>
Effect: Children align in a flex container
|
flex-row, flex-col | Set flex direction to row or column |
Input: <div class="flex flex-col"><div>Top</div><div>Bottom</div></div>
Effect: Items stack vertically instead of horizontally
|
flex-wrap, flex-nowrap | Allow/prevent flex items from wrapping |
Input: <div class="flex flex-wrap">Many items...</div>
Effect: Items wrap to new line when they don't fit container width
|
justify-start, justify-center, justify-between | Justify content along main axis |
Input: <div class="flex justify-between"><div>Left</div><div>Right</div></div>
Effect: Items spread with first at start, last at end
|
items-center, items-start, items-end | Align items along cross axis |
Input: <div class="flex items-center h-20"><div>Centered</div></div>
Effect: Item is vertically centered in the container
|
gap-4, gap-x-4, gap-y-2 | Set spacing between grid/flex items |
Input: <div class="flex gap-4"><div>1</div><div>2</div></div>
Effect: Creates 1rem gap between flex items
|
grid, inline-grid | Create a block or inline grid container |
Input: <div class="grid">...</div>
Effect: Children align in a CSS grid
|
grid-cols-3, grid-cols-none | Define number of columns in a grid |
Input: <div class="grid grid-cols-3"><div>1</div><div>2</div><div>3</div></div>
Effect: Creates a 3-column grid layout
|
grid-rows-2 | Define number of rows in a grid |
Input: <div class="grid grid-rows-2 grid-cols-2">...</div>
Effect: Creates a 2x2 grid layout
|
col-span-2, row-span-2 | Make an item span multiple columns/rows |
Input: <div class="grid grid-cols-3">
<div class="col-span-2">Wide</div>
<div>Narrow</div>
</div>
Effect: First item spans 2 columns, second takes 1 column
|
place-items-center, place-content-center | Center grid items or grid content |
Input: <div class="grid place-items-center h-screen"><div>Centered</div></div>
Effect: Item perfectly centered both horizontally and vertically
|
Spacing
| Class | Description | Real-World Example |
|---|---|---|
m-4 | Add margin on all sides (1rem) |
Input: <div class="m-4">Content with margin</div>
Effect: Element has 1rem margin on all sides
|
mx-auto | Center horizontally with auto left/right margins |
Input: <div class="w-64 mx-auto">Centered</div>
Effect: Element is horizontally centered in parent
|
mt-2, mr-2, mb-2, ml-2 | Add margin to specific side (0.5rem) |
Input: <div class="mt-2">Content with top margin</div>
Effect: Element has 0.5rem margin on top only
|
p-4 | Add padding on all sides (1rem) |
Input: <div class="p-4">Content with padding</div>
Effect: Element has 1rem padding on all sides
|
px-6, py-3 | Add horizontal/vertical padding |
Input: <button class="px-6 py-3">Submit</button>
Effect: Button has 1.5rem padding on left/right, 0.75rem on top/bottom
|
pt-2, pr-2, pb-2, pl-2 | Add padding to specific side (0.5rem) |
Input: <div class="pt-2">Content with top padding</div>
Effect: Element has 0.5rem padding on top only
|
space-x-4 | Add horizontal spacing between children |
Input: <div class="flex space-x-4">
<div>Item 1</div>
<div>Item 2</div>
</div>
Effect: Creates 1rem space between the flex items
|
space-y-2 | Add vertical spacing between children |
Input: <div class="space-y-2">
<div>Item 1</div>
<div>Item 2</div>
</div>
Effect: Creates 0.5rem space between stacked elements
|
Sizing
| Class | Description | Real-World Example |
|---|---|---|
w-1/2 | Set width to 50% of parent |
Input: <div class="w-1/2">Half Width</div>
Effect: Element takes up 50% of parent container width
|
w-full | Set width to 100% of parent |
Input: <div class="w-full">Full Width</div>
Effect: Element takes up 100% of parent container width
|
max-w-screen-md | Set max width to medium screen breakpoint (768px) |
Input: <div class="max-w-screen-md mx-auto">Content</div>
Effect: Container has max width of 768px, centered horizontally
|
h-16 | Set height to 4rem (64px) |
Input: <div class="h-16">Fixed Height</div>
Effect: Element has height of 4rem (64px)
|
min-h-screen | Set minimum height to 100% of viewport |
Input: <div class="min-h-screen">Full Height Page</div>
Effect: Element is at least as tall as the viewport
|
aspect-square | Set element to have equal width and height (1:1 ratio) |
Input: <div class="aspect-square w-32">Square</div>
Effect: Element is 32px × 32px square regardless of content
|
aspect-video | Set element to 16:9 aspect ratio |
Input: <div class="aspect-video w-full">Video Container</div>
Effect: Element maintains 16:9 ratio as width changes
|
w-screen, h-screen | Set width/height to 100% of viewport |
Input: <div class="w-screen h-screen">Fullscreen</div>
Effect: Element covers entire viewport
|
w-auto, h-auto | Let browser determine width/height |
Input: <img class="h-auto w-64" src="...">
Effect: Image width is 16rem, height scales proportionally
|
w-min, w-max | Set width to minimum/maximum content size |
Input: <div class="w-min">Compact</div>
Effect: Element shrinks to the smallest width needed for content
|
Colors
| Class | Description | Real-World Example |
|---|---|---|
bg-red-500 | Set background color (medium red) |
Input: <div class="bg-red-500 p-4">Red Background</div>
Effect: Element has a medium red background color
|
text-green-700 | Set text color (dark green) |
Input: <p class="text-green-700">Green Text</p>
Effect: Text is displayed in dark green
|
border-blue-300 | Set border color (light blue) |
Input: <div class="border-2 border-blue-300">Blue Border</div>
Effect: Element has a light blue border
|
hover:bg-blue-700 | Change background on hover (dark blue) |
Input: <button class="bg-blue-500 hover:bg-blue-700">Hover Me</button>
Effect: Button background changes to darker blue on hover
|
bg-opacity-50 | Set background opacity to 50% |
Input: <div class="bg-blue-500 bg-opacity-50">Semi-transparent</div>
Effect: Background is semi-transparent blue
|
text-opacity-75 | Set text opacity to 75% |
Input: <p class="text-black text-opacity-75">Faded Text</p>
Effect: Text color is black at 75% opacity
|
placeholder-gray-400 | Set placeholder text color |
Input: <input class="placeholder-gray-400" placeholder="Enter text...">
Effect: Placeholder text appears in medium gray
|
caret-indigo-500 | Set cursor color in text inputs |
Input: <input class="caret-indigo-500">
Effect: Text input cursor is medium indigo color
|
from-blue-500, to-green-500 | Set gradient colors (used with bg-gradient-) |
Input: <div class="bg-gradient-to-r from-blue-500 to-green-500">Gradient</div>
Effect: Background is a gradient from blue to green
|
Typography
| Class | Description | Real-World Example |
|---|---|---|
text-lg | Set font size to large (1.125rem) |
Input: <p class="text-lg">Larger Text</p>
Effect: Text is displayed larger than normal
|
font-bold | Set font weight to bold |
Input: <p class="font-bold">Bold Text</p>
Effect: Text is displayed with bold weight
|
tracking-wide | Increase letter spacing |
Input: <h2 class="tracking-wide">Spaced Letters</h2>
Effect: Text has wider spacing between characters
|
leading-tight | Set line height to tight (reduced spacing) |
Input: <p class="leading-tight">Multiple lines with less space between them</p>
Effect: Text has reduced line height between lines
|
text-center | Center-align text |
Input: <h1 class="text-center">Centered Heading</h1>
Effect: Text is horizontally centered
|
uppercase | Convert text to uppercase |
Input: <span class="uppercase">attention</span>
Effect: Text displays as "ATTENTION"
|
truncate | Truncate text with ellipsis if it overflows |
Input: <p class="truncate w-48">This text is too long to fit in the container</p>
Effect: "This text is too long..." with ellipsis
|
italic, not-italic | Make text italic or remove italic |
Input: <em class="not-italic">Not italicized despite being in em tag</em>
Effect: Text in em tag displays in normal style, not italic
|
font-sans, font-serif, font-mono | Set font family |
Input: <code class="font-mono">console.log("Hello")</code>
Effect: Text displays in monospace font
|
text-justify | Justify text |
Input: <p class="text-justify">Long paragraph with justified text alignment, creating even edges on both left and right sides of the text block.</p>
Effect: Text is spaced to align with both left and right edges
|
Backgrounds
| Class | Description | Real-World Example |
|---|---|---|
bg-cover | Scale background image to cover entire element |
Input: <div class="bg-cover bg-[url('/img/hero.jpg')] h-64"></div>
Effect: Background image covers entire div, may be cropped
|
bg-contain | Scale background image to fit inside element |
Input: <div class="bg-contain bg-no-repeat bg-[url('/img/logo.png')] h-32"></div>
Effect: Background image fits fully inside container
|
bg-center, bg-top, bg-bottom | Position background image |
Input: <div class="bg-cover bg-center bg-[url('/img/bg.jpg')] h-48"></div>
Effect: Background image is centered within the element
|
bg-fixed, bg-local, bg-scroll | Control background attachment behavior |
Input: <div class="bg-fixed bg-cover bg-[url('/img/parallax.jpg')] h-screen"></div>
Effect: Background stays fixed while scrolling (parallax effect)
|
bg-no-repeat, bg-repeat-x | Control background image repetition |
Input: <div class="bg-no-repeat bg-[url('/img/icon.svg')] h-20"></div>
Effect: Background image appears once without repeating
|
bg-gradient-to-r | Create a gradient background (right direction) |
Input: <div class="bg-gradient-to-r from-blue-500 to-purple-500 h-24"></div>
Effect: Horizontal gradient from blue to purple
|
bg-gradient-to-tr | Create a gradient background (top-right direction) |
Input: <div class="bg-gradient-to-tr from-green-400 via-blue-500 to-purple-600 h-32"></div>
Effect: Diagonal gradient through three colors
|
from-blue-500, via-purple-500, to-pink-500 | Define gradient colors (start, middle, end) |
Input: <button class="bg-gradient-to-r from-green-400 to-blue-500 p-2">Gradient Button</button>
Effect: Button with a green to blue gradient background
|
bg-origin-border, bg-origin-padding | Set background position origin |
Input: <div class="bg-origin-border p-4 border-4 border-dashed border-gray-400 bg-[url('/img/pattern.jpg')]"></div>
Effect: Background image starts from the border edge
|
Borders & Radius
| Class | Description | Real-World Example |
|---|---|---|
border | Add 1px border on all sides |
Input: <div class="border border-gray-300">Content</div>
Effect: Element has a 1px light gray border
|
border-2, border-4, border-8 | Set border width (all sides) |
Input: <div class="border-2 border-blue-500">Thicker Border</div>
Effect: Element has a 2px blue border
|
border-t, border-r, border-b, border-l | Add border to specific side |
Input: <div class="border-b border-gray-200 pb-2">Section with bottom border</div>
Effect: Element has only a bottom border
|
border-dashed, border-dotted, border-solid | Set border style |
Input: <div class="border-2 border-dashed border-gray-400">Dashed Border</div>
Effect: Element has a 2px dashed gray border
|
border-gray-300 | Set border color (light gray) |
Input: <input class="border border-gray-300 px-4 py-2 rounded">
Effect: Input field has a light gray border
|
border-opacity-50 | Set border opacity to 50% |
Input: <div class="border-2 border-blue-500 border-opacity-50">Semi-transparent border</div>
Effect: Border color is 50% transparent
|
rounded | Add rounded corners (0.25rem radius) |
Input: <button class="rounded bg-blue-500 px-4 py-2 text-white">Button</button>
Effect: Button has slightly rounded corners
|
rounded-md, rounded-lg, rounded-xl | Add different levels of border radius |
Input: <div class="rounded-lg bg-gray-100 p-6">Card with large radius</div>
Effect: Element has 0.5rem border radius (8px)
|
rounded-full | Make element fully rounded (circle for square elements) |
Input: <img class="w-16 h-16 rounded-full" src="profile.jpg">
Effect: Image appears as a perfect circle
|
rounded-t, rounded-r, rounded-b, rounded-l | Round corners on specific sides |
Input: <div class="rounded-t-lg bg-blue-500 p-4">Card with top corners rounded</div>
Effect: Element has rounded top corners only
|
Effects
| Class | Description | Real-World Example |
|---|---|---|
shadow | Add a small shadow (default) |
Input: <div class="shadow bg-white p-4">Card with shadow</div>
Effect: Element has a subtle drop shadow
|
shadow-md, shadow-lg, shadow-xl | Add shadows of increasing sizes |
Input: <div class="shadow-lg rounded-lg bg-white p-6">Prominent card</div>
Effect: Element has a larger, more noticeable shadow
|
shadow-inner | Add an inset shadow |
Input: <div class="shadow-inner bg-gray-100 p-4">Inset shadow</div>
Effect: Element appears pressed in or indented
|
shadow-none | Remove shadows |
Input: <button class="shadow-none bg-blue-500 text-white p-2">Flat Button</button>
Effect: Button appears flat with no shadow
|
opacity-75, opacity-50, opacity-25 | Set element opacity |
Input: <div class="opacity-50">Semi-transparent element</div>
Effect: All content is 50% transparent
|
mix-blend-multiply, mix-blend-screen | Set blend mode for overlapping elements |
Input: <div class="relative">
<div class="absolute inset-0 bg-blue-500 mix-blend-multiply"></div>
<img src="photo.jpg">
</div>
Effect: Blue overlay blends with the image using multiply mode
|
transition | Add transition for hover/focus states (opacity, colors, etc.) |
Input: <button class="bg-blue-500 hover:bg-blue-700 text-white p-2 transition">Smooth Hover</button>
Effect: Background color changes smoothly on hover
|
duration-300 | Set transition duration to 300ms |
Input: <div class="hover:scale-105 transition duration-300">Hover me</div>
Effect: Element scales up smoothly over 300ms when hovered
|
ease-in-out, ease-linear | Set transition timing function |
Input: <button class="transition duration-300 ease-in-out transform hover:-translate-y-1">Hover me</button>
Effect: Button moves up smoothly with easing when hovered
|
Interactivity
| Class | Description | Real-World Example |
|---|---|---|
hover: | Apply styles on hover |
Input: <button class="bg-blue-500 hover:bg-blue-700 text-white">Hover me</button>
Effect: Button background changes when hovered
|
focus: | Apply styles when element receives focus |
Input: <input class="border focus:ring-2 focus:ring-blue-500 focus:outline-none">
Effect: Input gets a blue ring when focused
|
active: | Apply styles when element is active (clicked) |
Input: <button class="bg-blue-500 active:bg-blue-800">Click me</button>
Effect: Button darkens when pressed
|
disabled: | Apply styles when element is disabled |
Input: <button disabled class="bg-blue-500 disabled:opacity-50">Can't click</button>
Effect: Disabled button appears faded out
|
group-hover: | Apply styles when parent with class ‘group’ is hovered |
Input: <div class="group">
<h3>Card Title</h3>
<div class="invisible group-hover:visible">Hidden content</div>
</div>
Effect: Hidden content appears when parent is hovered
|
cursor-pointer | Change cursor to pointer (hand) |
Input: <div class="cursor-pointer">Click me</div>
Effect: Mouse cursor changes to a hand when hovering
|
select-none | Prevent text selection |
Input: <button class="select-none">Can't select this text</button>
Effect: Text in button cannot be selected/highlighted
|
pointer-events-none | Make element ignore pointer events |
Input: <div class="pointer-events-none">Can't click or hover</div>
Effect: Element ignores all mouse interactions
|
outline-none, focus:outline-none | Remove default focus outline |
Input: <button class="focus:outline-none focus:ring-2">Better Focus Style</button>
Effect: Button has no default outline but shows ring on focus
|
focus-within: | Apply styles when a child element receives focus |
Input: <div class="border focus-within:border-blue-500">
<input>
</div>
Effect: Container border changes color when input inside is focused
|
Transforms & Animations
| Class | Description | Real-World Example |
|---|---|---|
rotate-45 | Rotate element 45 degrees clockwise |
Input: <div class="rotate-45">Rotated Box</div>
Effect: Element rotates 45 degrees
|
scale-105, scale-90 | Scale element to 105% or 90% of original size |
Input: <button class="hover:scale-105 transition">Grow on hover</button>
Effect: Button grows slightly larger when hovered
|
translate-x-4, -translate-y-2 | Move element horizontally or vertically |
Input: <div class="hover:-translate-y-2 transition">Up on hover</div>
Effect: Element moves up 0.5rem when hovered
|
skew-x-6, skew-y-3 | Skew element along X or Y axis |
Input: <div class="skew-x-6">Skewed text</div>
Effect: Element is slanted horizontally
|
origin-top-right | Set transform origin point |
Input: <div class="origin-top-right rotate-45">Rotated from corner</div>
Effect: Element rotates around its top-right corner
|
animate-spin | Apply continuous spinning animation |
Input: <svg class="animate-spin h-5 w-5" viewBox="0 0 24 24">...</svg>
Effect: SVG continuously spins (loading indicator)
|
animate-pulse | Apply pulsing opacity animation |
Input: <div class="animate-pulse bg-gray-300 h-8 w-32"></div>
Effect: Element pulses (loading skeleton)
|
animate-bounce | Apply bouncing animation |
Input: <div class="animate-bounce">↓</div>
Effect: Element bounces up and down continuously
|
transform | Enable transformations (required in older Tailwind versions) |
Input: <div class="transform rotate-45 scale-110">Transformed</div>
Effect: Element is both rotated and scaled
|
Responsive Design
| Class | Description | Real-World Example |
|---|---|---|
sm: | Apply styles at small screens (640px) and up |
Input: <div class="text-center sm:text-left">Content</div>
Effect: Text is centered on mobile, left-aligned on larger screens
|
md: | Apply styles at medium screens (768px) and up |
Input: <div class="block md:flex">
<div>Column 1</div>
<div>Column 2</div>
</div>
Effect: Stacked on mobile, side-by-side on tablets and larger
|
lg: | Apply styles at large screens (1024px) and up |
Input: <div class="px-4 md:px-8 lg:px-16">Content</div>
Effect: Padding increases as screen size increases
|
xl: | Apply styles at extra large screens (1280px) and up |
Input: <div class="text-lg lg:text-xl xl:text-2xl">Responsive text</div>
Effect: Text size increases at each breakpoint
|
2xl: | Apply styles at 2x extra large screens (1536px) and up |
Input: <div class="max-w-5xl 2xl:max-w-7xl mx-auto">Content</div>
Effect: Container width increases on very large screens
|
dark: | Apply styles in dark mode (requires darkMode config) |
Input: <div class="bg-white text-black dark:bg-gray-800 dark:text-white">Content</div>
Effect: Light background/dark text in light mode, dark background/light text in dark mode
|
motion-safe:, motion-reduce: | Apply styles based on motion preferences |
Input: <div class="hover:scale-105 motion-reduce:transform-none transition">Interactive</div>
Effect: Scales on hover unless user prefers reduced motion
|
Combine with any utility | Use breakpoint prefixes with any Tailwind class |
Input: <div class="flex flex-col md:flex-row lg:justify-center xl:max-w-screen-lg">...</div>
Effect: Applies different layout rules at each screen size
|
Positioning
| Class | Description | Real-World Example |
|---|---|---|
relative | Position an element relative to its normal position |
Input: <div class="relative">
<div class="absolute inset-0">Overlay</div>
Content
</div>
Effect: Creates positioning context for absolute children
|
absolute | Position an element relative to nearest positioned ancestor |
Input: <button class="relative">
Button
<span class="absolute top-0 right-0 -mt-1 -mr-1 bg-red-500 rounded-full w-4 h-4"></span>
</button>
Effect: Creates a notification badge on a button
|
fixed | Position an element relative to the viewport |
Input: <nav class="fixed top-0 w-full bg-white shadow-md">Navbar</nav>
Effect: Navigation stays at top of screen while scrolling
|
sticky | Position an element based on scroll position |
Input: <div class="sticky top-0 bg-white p-4">Section Header</div>
Effect: Header sticks to top of viewport while scrolling through section
|
top-0, right-0, bottom-0, left-0 | Position from edges (works with relative/absolute/fixed/sticky) |
Input: <div class="absolute bottom-4 right-4">Bottom Right</div>
Effect: Element positioned 1rem from bottom and right edges
|
inset-0 | Position to all edges (equivalent to top-0 right-0 bottom-0 left-0) |
Input: <div class="absolute inset-0 bg-black opacity-50"></div>
Effect: Creates a full-size overlay
|
inset-x-0, inset-y-0 | Position to horizontal or vertical edges |
Input: <div class="absolute inset-x-0 bottom-0 h-16">Footer</div>
Effect: Element spans full width at bottom
|
z-10, z-20, z-50 | Set z-index to control stacking order |
Input: <div class="fixed inset-0 bg-black opacity-50 z-40"></div>
<div class="relative z-50">Modal content</div>
Effect: Modal appears above the overlay
|
Lists & Tables
| Class | Description | Real-World Example |
|---|---|---|
list-disc, list-decimal | Set list style type (bullets, numbers) |
Input: <ul class="list-disc pl-5">
<li>Item 1</li>
<li>Item 2</li>
</ul>
Effect: List with bullet points
|
list-inside, list-outside | Position list markers inside or outside list item |
Input: <ul class="list-decimal list-inside">
<li>First item with longer text that might wrap to multiple lines</li>
</ul>
Effect: Numbers appear inside the text boundary
|
list-none | Remove list markers |
Input: <ul class="list-none"><li>No bullet</li></ul>
Effect: List displays without bullets or numbers
|
table | Set display to table |
Input: <div class="table w-full">
<div class="table-row">
<div class="table-cell p-2">Cell 1</div>
<div class="table-cell p-2">Cell 2</div>
</div>
</div>
Effect: Div elements behave like table, rows, and cells
|
table-auto, table-fixed | Set table layout algorithm |
Input: <table class="table-fixed w-full">...</table>
Effect: Table uses fixed layout with equal column widths
|
border-collapse, border-separate | Control table border collapse behavior |
Input: <table class="border-collapse border">...</table>
Effect: Adjacent cell borders are merged into a single border
|
table-auto, table-fixed | Set table layout to automatic or fixed |
Input: <table class="table-fixed">...</table>
Effect: Fixed layout where column widths are determined by width settings
|
caption-top, caption-bottom | Position table caption at top or bottom |
Input: <table class="caption-bottom">
<caption>Table description</caption>
...
</table>
Effect: Caption appears below the table
|
Miscellaneous
| Class | Description | Real-World Example |
|---|---|---|
overflow-hidden | Hide content that exceeds container boundaries |
Input: <div class="overflow-hidden h-32">Very long content...</div>
Effect: Content is clipped when it exceeds height
|
overflow-x-auto, overflow-y-scroll | Add horizontal auto scrollbar or vertical forced scrollbar |
Input: <div class="overflow-x-auto"><div class="w-[1000px]">Wide content</div></div>
Effect: Horizontal scrollbar appears when needed
|
z-0, z-10, z-50 | Set stacking order with z-index |
Input: <div class="relative">
<div class="absolute z-10">Higher</div>
<div class="absolute z-0">Lower</div>
</div>
Effect: Element with z-10 appears above z-0
|
invisible, visible | Toggle visibility (still takes up space when invisible) |
Input: <div class="invisible">Hidden but still occupies space</div>
Effect: Element is not visible but layout is preserved
|
sr-only | Hide visually but keep accessible to screen readers |
Input: <button>
<svg>...</svg>
<span class="sr-only">Menu</span>
</button>
Effect: "Menu" text is announced to screen readers but not visible
|
appearance-none | Remove browser-specific styling |
Input: <select class="appearance-none p-2 pr-8 border">...</select>
Effect: Select dropdown without default arrow styling
|
whitespace-nowrap, whitespace-pre | Control how whitespace is handled |
Input: <div class="whitespace-nowrap overflow-x-auto">Long line of text</div>
Effect: Text doesn't wrap to new lines, scrolls horizontally
|
break-all, break-words | Control how text breaks |
Input: <p class="break-words">Verylongwordthatneedstobebrokentofitincontainer</p>
Effect: Long word breaks to fit container width
|
isolate | Create new stacking context |
Input: <div class="isolate">...stacking-sensitive content...</div>
Effect: Creates stacking context, isolating z-index effects
|
Divide Utilities
| Class | Description | Real-World Example |
|---|---|---|
divide-x, divide-y | Add borders between horizontal or vertical elements |
Input: <div class="divide-y divide-gray-200">
<div class="py-3">Item 1</div>
<div class="py-3">Item 2</div>
</div>
Effect: Light gray horizontal dividers between items
|
divide-x-2, divide-y-4 | Set divide border width |
Input: <div class="divide-x-2 divide-blue-200">
<div class="px-4">Left</div>
<div class="px-4">Right</div>
</div>
Effect: 2px vertical divider between elements
|
divide-gray-300 | Set divide border color |
Input: <div class="flex divide-x divide-gray-300">
<div class="px-4">Section 1</div>
<div class="px-4">Section 2</div>
</div>
Effect: Light gray vertical dividers between flex items
|
divide-dashed, divide-dotted | Set divide border style |
Input: <div class="divide-y divide-dashed divide-gray-300">
<div class="py-2">Item 1</div>
<div class="py-2">Item 2</div>
</div>
Effect: Dashed divider lines between elements
|
divide-opacity-50 | Set divide border opacity |
Input: <div class="divide-y divide-black divide-opacity-50">
<div class="py-2">Item 1</div>
<div class="py-2">Item 2</div>
</div>
Effect: Semi-transparent black divider lines
|
divide-solid | Set solid divide border |
Input: <div class="divide-y divide-solid divide-gray-200">
<div class="py-2">Item 1</div>
<div class="py-2">Item 2</div>
</div>
Effect: Solid divider lines between elements
|
Ring Utilities
| Class | Description | Real-World Example |
|---|---|---|
ring, ring-2, ring-4 | Add focus ring shadow of different sizes |
Input: <button class="ring-2 ring-blue-500 p-2">Button with ring</button>
Effect: Button with a blue focus ring around it
|
ring-blue-500 | Set ring color |
Input: <input class="focus:ring focus:ring-blue-500 focus:outline-none">
Effect: Input gets blue ring when focused
|
ring-offset-2 | Add space between element and ring |
Input: <button class="focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 p-2">Focused Button</button>
Effect: Ring appears with 2px of space from the button
|
ring-offset-white | Set color of ring offset space |
Input: <button class="ring-2 ring-blue-500 ring-offset-2 ring-offset-white p-2">Button</button>
Effect: White space between button and blue ring
|
ring-inset | Set ring to render inside the element border |
Input: <div class="ring-2 ring-blue-500 ring-inset p-4">Content</div>
Effect: Ring appears inside the element's boundaries
|
ring-opacity-50 | Set ring opacity |
Input: <button class="ring-2 ring-blue-500 ring-opacity-50">Button</button>
Effect: Semi-transparent blue ring
|
Filters
| Class | Description | Real-World Example |
|---|---|---|
filter | Enable filters on an element |
Input: <img class="filter blur-sm" src="image.jpg">
Effect: Image appears slightly blurred
|
blur-sm, blur, blur-xl | Apply blur effect of different intensities |
Input: <div class="blur-md bg-white p-5">Blurred content</div>
Effect: Content appears with medium blur
|
brightness-50, brightness-125 | Adjust element brightness (50% darker, 125% brighter) |
Input: <img class="brightness-75" src="image.jpg">
Effect: Image appears at 75% of its normal brightness
|
contrast-50, contrast-200 | Adjust element contrast |
Input: <img class="contrast-150" src="image.jpg">
Effect: Image appears with 150% contrast (more intense)
|
grayscale, grayscale-0 | Convert element to grayscale or remove grayscale |
Input: <img class="grayscale hover:grayscale-0 transition" src="image.jpg">
Effect: Image appears in grayscale, returns to color on hover
|
hue-rotate-90, -hue-rotate-60 | Rotate element colors on the color wheel |
Input: <img class="hue-rotate-180" src="image.jpg">
Effect: Image colors are inverted (180° rotation on color wheel)
|
invert, invert-0 | Invert element colors or remove inversion |
Input: <img class="invert" src="icon.svg">
Effect: Icon colors are inverted (white becomes black, etc.)
|
saturate-50, saturate-200 | Adjust color saturation of an element |
Input: <img class="saturate-200" src="image.jpg">
Effect: Image appears with more intense colors (200% saturation)
|
sepia, sepia-0 | Convert element to sepia tone or remove sepia |
Input: <img class="sepia hover:sepia-0 transition" src="image.jpg">
Effect: Image appears with vintage sepia effect, returns to normal on hover
|
backdrop-filter | Apply filters to area behind an element |
Input: <div class="backdrop-filter backdrop-blur-sm bg-white/30 p-4">Content</div>
Effect: Semi-transparent element with blurred background behind it
|
Gradients & Blend Modes
| Class | Description | Real-World Example |
|---|---|---|
bg-gradient-to-r, bg-gradient-to-br | Add gradient in specified direction (right, bottom-right) |
Input: <div class="bg-gradient-to-r from-blue-500 to-purple-500 h-20"></div>
Effect: Horizontal gradient from blue to purple
|
from-red-500 | Set gradient starting color |
Input: <button class="bg-gradient-to-r from-green-400 to-blue-500 px-4 py-2">Gradient Button</button>
Effect: Button with gradient from green to blue
|
via-purple-500 | Set gradient middle color |
Input: <div class="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 h-20"></div>
Effect: Gradient from pink through red to yellow
|
to-blue-500 | Set gradient ending color |
Input: <div class="h-10 bg-gradient-to-r from-sky-500 to-indigo-500"></div>
Effect: Gradient from sky blue to indigo
|
mix-blend-multiply | Set how element content blends with background |
Input: <div class="relative">
<img src="background.jpg">
<div class="absolute inset-0 bg-blue-500 mix-blend-multiply"></div>
</div>
Effect: Blue overlay multiplies with background image colors
|
mix-blend-screen | Screen blend mode (opposite of multiply) |
Input: <div class="relative">
<img src="dark-image.jpg">
<div class="absolute inset-0 bg-yellow-300 mix-blend-screen"></div>
</div>
Effect: Yellow overlay lightens dark background image
|
mix-blend-overlay | Overlay blend mode (combines multiply and screen) |
Input: <div class="relative">
<img src="image.jpg">
<div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 mix-blend-overlay"></div>
</div>
Effect: Gradient overlay preserves highlights and shadows of image
|
bg-blend-normal, bg-blend-multiply | Set how background layers blend together |
Input: <div class="bg-[url('/pattern.svg')] bg-blue-500 bg-blend-multiply p-4">Content</div>
Effect: Blue background multiplies with pattern background
|
Content Utilities
| Class | Description | Real-World Example |
|---|---|---|
before:content-['✓'] | Add content before an element using the content property |
Input: <li class="before:content-['✓'] before:mr-2 before:text-green-500">Completed task</li>
Effect: Adds a green checkmark before the list item
|
after:content-['→'] | Add content after an element using the content property |
Input: <a class="after:content-['→'] after:ml-1">Read more</a>
Effect: Adds an arrow after the link text
|
before:block, after:absolute | Control display and positioning of pseudo-elements |
Input: <div class="relative before:absolute before:content-[''] before:inset-0 before:bg-black before:bg-opacity-50">
<img src="image.jpg">
</div>
Effect: Creates a semi-transparent overlay on the image
|
before:w-4, after:h-4 | Set width and height of pseudo-elements |
Input: <button class="relative before:content-[''] before:absolute before:w-full before:h-0.5 before:bg-blue-500 before:bottom-0 before:left-0 before:scale-x-0 hover:before:scale-x-100 before:transition">
Hover me
</button>
Effect: Adds an animated underline effect on hover
|
before:bg-red-500, after:rounded-full | Style pseudo-elements with other Tailwind utilities |
Input: <span class="relative after:content-['New'] after:ml-2 after:text-xs after:font-bold after:bg-red-500 after:text-white after:py-0.5 after:px-1 after:rounded-md">
Feature
</span>
Effect: Adds a "New" badge after text
|
before:content-['*'] | Add an asterisk for required fields |
Input: <label class="before:content-['*'] before:text-red-500 before:mr-1">
Email
</label>
Effect: Adds a red asterisk before the label
|
before:content-[attr(data-tooltip)] | Use HTML attributes for pseudo-element content |
Input: <button data-tooltip="Click to save" class="relative before:content-[attr(data-tooltip)] before:absolute before:hidden hover:before:block before:bg-black before:text-white before:px-2 before:py-1 before:rounded before:bottom-full before:mb-2">
Save
</button>
Effect: Shows a tooltip on hover using the data-tooltip attribute value
|
Arbitrary Values
| Class | Description | Real-World Example |
|---|---|---|
mt-[23px] | Use an arbitrary margin-top value |
Input: <div class="mt-[23px]">Precisely positioned</div>
Effect: Element has exactly 23px of top margin
|
text-[13px] | Set text size to a specific pixel value |
Input: <p class="text-[13px]">Custom size text</p>
Effect: Text displays at exactly 13px size
|
bg-[#ffcc00] | Use a custom background color value |
Input: <div class="bg-[#ffcc00] p-4">Custom yellow background</div>
Effect: Element has a background color of #ffcc00 (yellow)
|
w-[calc(100%-2rem)] | Use a CSS calculation for width |
Input: <div class="w-[calc(100%-2rem)] mx-auto">Content</div>
Effect: Element width is 100% minus 2rem
|
grid-cols-[repeat(auto-fit,minmax(250px,1fr))] | Use complex grid layout values |
Input: <div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
<div>Card 1</div>
<div>Card 2</div>
<div>Card 3</div>
</div>
Effect: Responsive grid with automatically fitting columns, minimum 250px width
|
rotate-[17deg] | Apply a specific rotation |
Input: <img class="rotate-[17deg]" src="image.jpg">
Effect: Image rotated exactly 17 degrees
|
top-[117px] | Position at a specific pixel value from the top |
Input: <div class="absolute left-1/2 top-[117px] -translate-x-1/2">Precise position</div>
Effect: Element positioned exactly 117px from the top
|
z-[999] | Use a custom z-index value |
Input: <div class="relative z-[999]">Above everything else</div>
Effect: Element has z-index of 999
|
border-[3px] | Set a custom border width |
Input: <div class="border-[3px] border-blue-500">Content</div>
Effect: Element has a 3px blue border
|
leading-[3] | Set a custom line height |
Input: <p class="leading-[3]">Text with very large line spacing</p>
Effect: Text has a line height 3 times the font size
|
Transitions & Animations (Extended)
| Class | Description | Real-World Example |
|---|---|---|
delay-150, delay-300, delay-700 | Add delay to transitions (in milliseconds) |
Input: <div class="transition delay-150 hover:scale-110">Delayed Hover Effect</div>
Effect: Element scales after a 150ms delay when hovered
|
transition-colors, transition-opacity | Apply transitions only to specific properties |
Input: <button class="transition-colors duration-300 bg-blue-500 hover:bg-blue-700">Button</button>
Effect: Only the background color transitions smoothly when hovered
|
transition-all | Apply transitions to all changing properties |
Input: <div class="transition-all duration-300 hover:bg-green-500 hover:translate-y-1 hover:shadow-lg">Card</div>
Effect: Background, position, and shadow all transition smoothly on hover
|
animate-ping | Apply a “ping” animation (scale in/out quickly) |
Input: <span class="absolute h-3 w-3 animate-ping bg-red-500 rounded-full"></span>
Effect: Red dot pings continuously (like a notification indicator)
|
ease-in, ease-out, ease-in-out | Set animation easing function |
Input: <div class="transition ease-in-out duration-500 hover:translate-y-2">Smooth Motion</div>
Effect: Element moves down with easing at both start and end of animation
|
duration-100 through duration-1000 | Set transition/animation duration in milliseconds |
Input: <div class="transition duration-500 hover:scale-105">Slow Scale</div>
Effect: Element scales up over 500ms on hover
|
animate-[wiggle_1s_ease-in-out_infinite] | Apply custom animation with arbitrary value |
Input: <div class="animate-[wiggle_1s_ease-in-out_infinite]">Wiggle</div>
Effect: Element wiggles continuously (assuming you've defined a "wiggle" keyframe in your CSS)
|
Clearfix
| Class | Description | Real-World Example |
|---|---|---|
clearfix | Clear floats inside a container |
Input: <div class="clearfix">
<img class="float-left" src="image1.jpg">
<img class="float-right" src="image2.jpg">
</div>
<div>Next content</div>
Effect: Container properly contains the floated images, and "Next content" appears below them
|
Scroll & Overflow Utilities
| Class | Description | Real-World Example |
|---|---|---|
overflow-auto | Add scrollbars when content overflows |
Input: <div class="overflow-auto h-32">Long content that exceeds the height...</div>
Effect: Adds scrollbars only when content exceeds 8rem height
|
overflow-hidden | Hide content that overflows container |
Input: <div class="overflow-hidden h-20">Content that's too tall will be clipped</div>
Effect: Content beyond 5rem height is hidden with no scrollbar
|
overflow-visible | Allow content to overflow and be visible |
Input: <div class="overflow-visible h-20 border">Content will show outside the border</div>
Effect: Content extends beyond the container's boundaries
|
overflow-x-scroll, overflow-y-scroll | Add scrollbars in specific direction |
Input: <div class="overflow-x-scroll overflow-y-hidden whitespace-nowrap">
Very long horizontal content that doesn't wrap...
</div>
Effect: Horizontal scrollbar appears, no vertical scrolling
|
scrollbar-hide (with plugin) | Hide scrollbars visually while maintaining scroll functionality |
Input: <div class="overflow-y-scroll scrollbar-hide h-32">
Scrollable content without visible scrollbars...
</div>
Effect: Content is scrollable but no scrollbar is visible
|
scroll-smooth | Enable smooth scrolling behavior |
Input: <html class="scroll-smooth">...</html>
Effect: Clicking anchor links scrolls smoothly to the target
|
snap-x, snap-y | Enable scroll snapping in horizontal or vertical direction |
Input: <div class="snap-x overflow-x-auto flex">
<div class="snap-center">Slide 1</div>
<div class="snap-center">Slide 2</div>
</div>
Effect: Creates a carousel where slides snap into place when scrolling
|
Text Decoration & Shadow
| Class | Description | Real-World Example |
|---|---|---|
underline, no-underline | Add or remove text underline |
Input: <a class="no-underline hover:underline">Learn more</a>
Effect: Link has no underline until hovered
|
line-through | Add line through text (strikethrough) |
Input: <span class="line-through">$99</span> $79
Effect: Shows $99 with a line through it, like a discounted price
|
decoration-dotted, decoration-dashed | Set text decoration style |
Input: <span class="underline decoration-dotted">Glossary term</span>
Effect: Text has a dotted underline, suggesting a definition is available
|
decoration-2, decoration-4 | Set text decoration thickness |
Input: <h2 class="underline decoration-4 decoration-blue-500">Heading</h2>
Effect: Heading has thick blue underline (4px)
|
decoration-blue-500 | Set text decoration color |
Input: <p class="underline decoration-red-500">Important note</p>
Effect: Text has a red underline instead of matching the text color
|
text-shadow (with plugin or custom class) | Add shadow to text for depth or contrast |
Input: <h1 class="text-white text-shadow">Title on image</h1>
Effect: White text has shadow to improve readability on varying backgrounds
|
underline-offset-2, underline-offset-4 | Control distance between text and underline |
Input: <a class="underline underline-offset-4">Spaced link</a>
Effect: Underline appears further below the text than default
|
