Tailwind Cheat Sheet

Leave a Comment / Cheat Sheet / By
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

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Shopping Cart