Back to Home
Tailwind CSS logoTailwind CSS INTERMEDIATE

Tailwind CSS

Comprehensive Tailwind CSS v4 reference covering utility classes, dark mode, states, responsive design, colors, layout, typography, customization with @theme, and more.

12 min read
tailwindcssutility-classesresponsivestylingframeworkv4

Installation & Setup

Install Tailwind CSS v4 and configure your project.

Installation (v4)

Install Tailwind CSS v4 with Vite, PostCSS, or the CLI.

css
💡 v4 is CSS-first — no tailwind.config.js needed, use @theme in CSS instead
⚡ Just @import "tailwindcss" replaces all three @tailwind directives from v3
📌 Tailwind v4 auto-detects your source files — no content config needed
🟢 Use the Vite plugin for the best DX with hot reload and fast builds
installsetupv4

Dark Mode

Style for light and dark color schemes using the dark: variant.

Dark Mode

Apply different styles in dark mode using the dark: variant.

html
💡 Dark mode follows the OS preference by default — no config needed
⚡ Prefix any utility with dark: to apply it only in dark mode
📌 For manual toggle, override the dark variant with @variant to use a .dark class
🟢 Common pattern: pair light/dark values on the same element (bg-white dark:bg-gray-900)
dark-modethemevariant

States & Variants

Apply styles on hover, focus, active, and other interactive states.

Hover, Focus & Other States

Style elements based on pseudo-classes and interactive states.

html
💡 Use focus-visible: instead of focus: for keyboard-only focus rings (better UX)
⚡ Combine states: hover:dark:bg-gray-700 applies on hover in dark mode
📌 disabled: automatically sets cursor-not-allowed if you add it alongside opacity
🟢 Use before: and after: with content-[""] to create decorative pseudo-elements
hoverfocusstatespseudo-classes

Group & Peer Modifiers

Style elements based on parent or sibling state.

html
💡 group-hover: styles children when the group parent is hovered — no JS needed
⚡ Use named groups (group/card) when nesting groups inside each other
📌 The peer element MUST come before peer-* elements in the HTML — it only works forward
🟢 peer-checked: + sr-only creates custom checkboxes/toggles without JavaScript
grouppeermodifiersinteractive

Colors & Opacity

Use the color palette and opacity modifiers across all utilities.

Color System & Opacity

Apply colors with the built-in palette and opacity shorthand.

html
💡 Append /opacity to any color utility: bg-blue-500/50, text-white/80, ring-red-500/25
⚡ The color scale runs 50-950: use lower numbers for light, higher for dark
📌 In v4, use bg-(--my-var) shorthand to reference CSS custom properties directly
🟢 shadow-xl/20 sets shadow opacity — great for subtle, non-harsh shadows
colorsopacitypalette

Layout

Container, display, positioning, z-index, overflow, and columns.

Container & Display

Set container width, display type, and visibility.

html
💡 hidden sets display:none; invisible sets visibility:hidden (keeps layout space)
⚡ Use columns-2/3 for magazine-style multi-column text flow
📌 overflow-auto only shows scrollbars when content overflows; scroll always shows them
🟢 container + mx-auto + px-4 is the standard centered layout pattern
containerdisplayoverflowcolumns

Positioning & Z-Index

Position elements and control stacking order.

html
💡 inset-0 is shorthand for top-0 right-0 bottom-0 left-0 — perfect for overlays
⚡ sticky top-0 makes an element stick to the top when scrolling past it
📌 absolute elements position relative to the nearest relative/absolute/fixed parent
🟢 Use -z-10 for negative z-index — places element behind the default layer
positionz-indexstickyfixed

Flexbox & Grid

Layout with flexbox and CSS grid utilities.

Flexbox

Flexible box layout for rows and columns.

html
💡 flex items-center justify-center is the classic centering pattern
⚡ Use flex-1 for items that should grow to fill available space equally
📌 shrink-0 prevents an item from shrinking — useful for fixed-size icons/buttons
🟢 gap-4 adds spacing between flex items without margin hacks
flexflexboxlayout

Grid

CSS Grid layout for complex two-dimensional layouts.

html
💡 grid-cols-[repeat(auto-fit,minmax(250px,1fr))] is a responsive grid without breakpoints
⚡ col-span-full makes an item stretch across all columns — great for full-width sections
📌 place-items-center centers both horizontally and vertically in one class
🟢 Use grid-cols-[custom] with arbitrary values for non-standard column widths
gridlayoutcolumns

Spacing & Sizing

Padding, margin, width, height, and space between elements.

Padding & Margin

Control inner and outer spacing.

html
💡 Use gap-4 on flex/grid instead of space-x/y — gap is more reliable with wrapping
⚡ mx-auto centers a block element; ml-auto pushes it to the right
📌 divide-y adds borders between children — much cleaner than border-b on each item
🟢 Negative margins (-mt-4) let elements overlap — useful for overlapping cards/avatars
paddingmarginspacingdivide

Width, Height & Aspect Ratio

Set element dimensions and aspect ratios.

html
💡 h-dvh is the mobile-safe viewport height — accounts for browser chrome on phones
⚡ size-12 sets both width and height to 3rem — perfect for icons and avatars
📌 max-w-prose (65ch) is the ideal line length for readable body text
🟢 Use w-fit to make an element only as wide as its content
widthheightsizingaspect-ratio

Typography

Font sizing, weight, text color, decoration, alignment, and line clamp.

Font & Text

Control font size, weight, line height, and text styling.

html
💡 line-clamp-2 truncates text to 2 lines with an ellipsis — no CSS hacks needed
⚡ decoration-2 + underline-offset-4 creates modern-looking styled underlines
📌 text-shadow is new in v4 — supports color and opacity modifiers like text-shadow-lg/50
🟢 Use tracking-tight on large headings and tracking-wide on small uppercase labels
typographyfonttext

Text Alignment & Wrapping

Align text and control overflow behavior.

html
💡 truncate is a shorthand that combines overflow-hidden + text-ellipsis + whitespace-nowrap
⚡ text-balance creates even line lengths — ideal for headings
📌 text-pretty avoids orphaned single words on the last line of paragraphs
🟢 Use text-start/text-end instead of text-left/text-right for RTL language support
alignmentwrappingtruncate

Backgrounds & Borders

Background colors, gradients, border radius, rings, and outlines.

Backgrounds & Gradients

Background colors, images, and gradient utilities.

html
💡 Use via-color to add a mid-point color stop in gradients
⚡ bg-blue-500/10 creates a subtle tint — great for hover states and cards
📌 bg-fixed creates a parallax scrolling effect on background images
🟢 Gradient directions: to-r (right), to-b (bottom), to-br (bottom-right), etc.
backgroundsgradientsimages

Borders, Rings & Radius

Border styling, focus rings, outlines, and rounded corners.

html
💡 ring-2 creates a focus ring using box-shadow — doesn't affect layout like border does
⚡ Use ring-offset-2 to add space between the element and its ring
📌 rounded-full on a square element creates a circle; on a rectangle creates a pill
🟢 inset-ring puts the ring inside the element — useful for image borders
bordersringsradiusoutline

Effects & Filters

Shadows, opacity, blend modes, and CSS filters.

Shadows, Opacity & Filters

Box shadows, opacity, and visual filters.

html
💡 shadow-xl/20 adds opacity to shadows — makes them subtle and professional
⚡ backdrop-blur-md + bg-white/30 creates the popular frosted glass effect
📌 Shadow colors (shadow-blue-500/25) create modern colored shadow effects
🟢 Use shadow-inner for inset shadows — great for pressed button states
shadowsopacityfiltersblurbackdrop

Transitions & Animations

Smooth transitions, keyframe animations, and transforms.

Transitions & Transforms

Animate property changes and transform elements.

html
💡 transition-colors is more performant than transition-all — specify what you animate
⚡ hover:-translate-y-1 + hover:shadow-lg creates the classic "lift on hover" card effect
📌 duration-200 to duration-300 feels natural for most UI transitions
🟢 active:scale-95 creates a satisfying press-down effect on buttons
transitionstransformsanimations

Keyframe Animations

Built-in and custom keyframe animations.

html
💡 animate-pulse is perfect for skeleton loading states — just add it to gray boxes
⚡ animate-ping creates a radar-like ping effect — great for notification badges
📌 Define custom animations in @theme with @keyframes in v4
🟢 Combine with conditionals: show animate-spin while loading, hide when done
animationskeyframesspinpulse

Responsive Design

Breakpoints, responsive patterns, and container queries.

Breakpoints & Responsive

Mobile-first responsive design with breakpoint prefixes.

html
💡 Tailwind is mobile-first: unprefixed classes apply to all sizes, breakpoints add overrides
⚡ Use max-md: to target screens BELOW a breakpoint — replaces tricky max-width media queries
📌 @container queries (v4) make components responsive to their parent, not the viewport
🟢 Common pattern: flex-col on mobile + md:flex-row on desktop for stack-to-row layouts
responsivebreakpointscontainer-queries

Customization

Customize Tailwind with @theme, @apply, and arbitrary values.

@theme, @apply & Arbitrary Values

Extend the default theme, use utilities in custom CSS, and write one-off values.

css
💡 @theme replaces tailwind.config.js in v4 — everything is CSS-native now
⚡ Use @apply sparingly — it's best for repeated component patterns, not one-off styles
📌 @variant lets you use dark:, hover:, etc. inside custom CSS blocks
🟢 Arbitrary values [347px] are escape hatches for one-off values not in the scale
themeapplycustomizationarbitrary

Interactivity & Accessibility

Cursor, scroll behavior, screen readers, and tables.

Cursor, Scroll & Tables

Interactive behavior, scroll snap, and table styling.

html
💡 sr-only hides content visually but keeps it accessible to screen readers
⚡ snap-x + snap-mandatory creates swipeable carousels without JavaScript
📌 scroll-mt-16 offsets anchor scroll targets — essential when you have a fixed header
🟢 accent-blue-500 styles native checkboxes and range inputs — no custom CSS needed
cursorscrollaccessibilitytablessvg