Tailwind CSS INTERMEDIATETailwind CSS
Utility-first CSS framework v4 - configure in CSS, lightning-fast builds, modern features
20 min read
tailwindcssutility-classesresponsivestylingframeworkv4
Table of Contents
Getting Started
Installation and basic setup
Installation (v4)
Install Tailwind CSS v4 with new CSS-first configuration
bash
💡 v4 uses CSS-based configuration, no more JS config file!
⚡ 5x faster full builds, 100x faster incremental builds
📌 @theme directive for customizing design tokens in CSS
🟢 Built-in tooling - no extra build steps needed
installationsetupv4
Basic Usage
How to use Tailwind utility classes
html
💡 Combine multiple utilities to build complex designs
⚡ Use dark: prefix for dark mode variants
📌 Order of classes doesn't matter for specificity
🟢 Start with mobile-first, add responsive prefixes for larger screens
basicsusage
Layout
Container, display, positioning, and box model utilities
Container & Display
Container sizing and display properties
html
💡 Container max-widths: sm:640px, md:768px, lg:1024px, xl:1280px, 2xl:1536px
⚡ Use hidden with responsive prefixes for show/hide logic
📌 contents makes element's children act like direct children of parent
🟢 Combine container with mx-auto for centering
containerdisplay
Flexbox
Flexbox layout utilities
html
💡 flex-1 allows item to grow and shrink, ignoring initial size
⚡ gap utilities work with both flexbox and grid
📌 items-center + justify-center = perfect centering
🎯 Use flex-wrap for responsive layouts that stack on small screens
flexboxflex
Grid
CSS Grid layout utilities
html
💡 Grid is perfect for 2D layouts, Flexbox for 1D
⚡ Use grid-cols-1 on mobile, increase on larger screens
📌 col-span and row-span work like table colspan/rowspan
🟢 grid-flow-col is great for horizontal scrolling layouts
gridlayout
Positioning
Position and placement utilities
html
💡 inset-0 is shorthand for top/right/bottom/left: 0
⚡ Combine position with translate for perfect centering
📌 sticky needs a top/bottom value to work properly
🔥 Negative values work with -top-4 syntax
positionz-index
Spacing
Padding, margin, and space between utilities
Padding
Padding utilities for all sides
css
💡 Spacing scale is consistent across padding, margin, gap, etc.
⚡ px/py for horizontal/vertical saves writing two classes
📌 Logical properties (ps/pe) adapt to text direction
🟢 Default unit is rem for better accessibility
paddingspacing
Margin
Margin utilities including negative margins
css
💡 mx-auto requires a width to center elements
⚡ Negative margins are great for overlapping elements
📌 Auto margins work differently in flex vs block context
🎯 Use negative margins to break out of parent padding
marginspacing
Space Between
Control space between child elements
html
💡 space-x/y adds margin to children, divide-x/y adds borders
⚡ Use gap with flexbox/grid instead of space for better control
📌 space utilities don't work with wrapped flex items
🎨 Negative space is perfect for overlapping avatars
space-betweendivide
Sizing
Width, height, and size constraint utilities
Width
Width utilities for elements
css
💡 max-w-prose is perfect for readable text content
⚡ Fractional widths (w-1/2) are great for layouts
📌 w-screen breaks out of containers to full viewport
🟢 min-w-0 prevents flex items from overflowing
widthsizing
Height
Height utilities for elements
css
💡 h-screen is useful for full-page layouts
⚡ Percentage heights need parent with defined height
📌 min-h-screen ensures content fills viewport minimum
🎯 Use aspect-ratio utilities instead of padding hack now
heightsizing
Size & Aspect Ratio
Combined size utilities and aspect ratios
html
💡 size utilities set width and height simultaneously
⚡ aspect-ratio is native CSS, no padding hack needed
📌 Combine aspect-ratio with object-cover for images
🟢 Use arbitrary values like aspect-[4/3] for custom ratios
sizeaspect-ratio
Typography
Font, text, and typography utilities
Font Size & Line Height
Text size and line height utilities
css
💡 Font sizes include optimized line-heights by default
⚡ Larger text sizes (5xl+) have line-height of 1
📌 Use leading utilities to override default line-heights
🟢 text-base is 16px, the browser default
font-sizeline-height
Font Weight & Style
Font weight, style, and variants
css
💡 Not all fonts support all weights - check your font
⚡ tabular-nums is great for aligning numbers in tables
📌 tracking adjusts letter-spacing, not word-spacing
🟢 Use font-mono for code snippets
font-weightfont-style
Text Color & Decoration
Text color, decoration, and transform utilities
css
💡 Use decoration utilities for custom underline styles
⚡ truncate is a combo utility for text overflow
📌 text-current uses the current color value
🎨 Decoration color can differ from text color
text-colortext-decoration
Text Alignment & Wrapping
Text alignment, wrapping, and whitespace
css
💡 break-words prevents long strings from breaking layouts
⚡ whitespace-pre preserves formatting from source
📌 text-justify can create rivers in text
🟢 Use align utilities for inline elements, not flex items
text-alignwhitespace
Backgrounds
Background colors, gradients, images, and effects
Background Color
Background color utilities
css
💡 Use opacity modifier (/) instead of separate opacity class
⚡ Arbitrary values with square brackets for custom colors
📌 bg-current uses the current text color
🎨 50-950 scale provides consistent color progression
background-coloropacity
Background Gradients
Gradient background utilities
html
💡 Gradients need from- and to- colors minimum
⚡ via- adds a middle color stop
📌 Use arbitrary values for radial/conic gradients
🎨 Gradient stops can have percentage positions
gradientsbackground-gradient
Background Images
Background image size, position, and repeat
html
💡 bg-cover scales image to cover entire container
⚡ bg-fixed creates parallax effect on scroll
📌 bg-clip-text creates gradient text (use with text-transparent)
🎯 Combine position and size for perfect image display
background-imagebackground-size
Borders
Border width, color, style, and radius utilities
Border Width & Style
Border width and style utilities
css
💡 border alone adds 1px solid border
⚡ Use border-x/y for horizontal/vertical borders
📌 Border color defaults to currentColor
🟢 Directional borders great for dividers
border-widthborder-style
Border Color
Border color utilities
css
💡 Must have border width for color to show
⚡ Use opacity modifier for semi-transparent borders
📌 Different sides can have different colors
🎨 border-current matches text color
border-color
Border Radius
Rounded corner utilities
css
💡 rounded-full creates circles with square elements
⚡ Directional rounding great for cards and modals
📌 Logical properties (s/e) adapt to text direction
🟢 Default rounded is 0.25rem (4px)
border-radiusrounded
Outline & Rings
Outline and ring utilities for focus states
css
💡 Rings use box-shadow, don't affect layout
⚡ outline-none removes default browser outline
📌 Ring offset creates gap between element and ring
♿ Always provide visible focus indicator for accessibility
outlineringfocus
Effects & Filters
Shadows, opacity, blend modes, and filters
Box Shadows
Box shadow utilities for depth
css
💡 Shadows are layered for more realistic depth
⚡ Use transition-shadow for smooth hover effects
📌 shadow-inner creates inset/pressed effect
🎨 Colored shadows need both shadow size and color
box-shadowshadow
Opacity & Blend Modes
Opacity and blend mode utilities
css
💡 Use opacity modifier on colors instead when possible
⚡ Blend modes great for creative image effects
📌 mix-blend affects element, bg-blend affects backgrounds
🎨 multiply darkens, screen lightens
opacityblend-mode
Filters
Filter effects for blur, brightness, and more
css
💡 backdrop- filters affect elements behind
⚡ Combine filters for complex effects
📌 drop-shadow follows alpha channel, box-shadow doesn't
🎨 Use filter transitions for smooth hover effects
filtersblureffects
Transitions & Animations
Transition and animation utilities
Transitions
Transition property and duration utilities
css
💡 transition without property animates common properties
⚡ Use transition-colors for theme switching
📌 ease-out feels most natural for UI
🟢 Combine with hover/focus states for interactivity
transitiondurationtiming
Animations
Keyframe animation utilities
css
💡 animate-spin perfect for loading indicators
⚡ animate-ping great for notification badges
📌 Use arbitrary values for one-off animations
🎯 Combine multiple animations with custom keyframes
animationkeyframes
Transform
Transform utilities for scale, rotate, translate
css
💡 Combine transforms with transitions for smooth effects
⚡ Use -translate for moving elements up/left
📌 Transform origin changes the pivot point
🎯 Negative values available for rotate, translate, skew
transformscalerotatetranslate
Interactivity
Cursor, user select, scroll behavior utilities
Cursor & Pointer Events
Cursor styles and pointer event utilities
css
💡 pointer-events-none makes element click-through
⚡ cursor-grab/grabbing for draggable elements
📌 Nested pointer-events-auto overrides parent none
🟢 cursor-not-allowed for disabled states
cursorpointer-events
User Select & Resize
Text selection and resize utilities
css
💡 select-all useful for code blocks and share links
⚡ scroll-smooth for smooth anchor scrolling
📌 Snap scrolling great for carousels and galleries
🟢 resize-none commonly used on form textareas
user-selectresizescroll
Overflow & Scrollbar
Overflow behavior and scrollbar styling
css
💡 overflow-clip vs hidden: clip doesn't create scroll container
⚡ truncate combines three properties for text ellipsis
📌 overscroll-contain prevents scroll chaining
🟢 Use overflow-x-auto for responsive tables
overflowscrollbar
Responsive Design
Breakpoints and responsive utilities
Breakpoints
Responsive breakpoint prefixes
css
💡 Mobile-first: write base styles, add larger screen overrides
⚡ Every utility can be prefixed with breakpoint
📌 Breakpoints use min-width (mobile-first)
🟢 Use container queries for component-based responsive design
breakpointsresponsive
Responsive Patterns
Common responsive design patterns
html
💡 Start with mobile layout, enhance for larger screens
⚡ Use container + mx-auto for centered max-width layouts
📌 overflow-x-auto makes tables scrollable on mobile
🟢 Test at each breakpoint during development
responsive-patternslayouts
Utilities & Helpers
Screen readers, content, and other utilities
Screen Readers
Accessibility utilities for screen readers
html
💡 sr-only hides visually but keeps for screen readers
♿ Essential for accessible icon buttons and loading states
📌 focus:not-sr-only reveals skip links on focus
🟢 Always provide text alternatives for icons
accessibilityscreen-readers
Content & Pseudo-elements
Content utilities and pseudo-element styling
css
💡 Use content-[''] for decorative pseudo-elements
⚡ Escape special characters in content values
📌 Pseudo-elements need content to be visible
🎨 Great for decorative elements without extra HTML
contentpseudo-elements
Arbitrary Values & Important
Custom values and important modifier
css
💡 Square brackets for any value not in Tailwind
⚡ ! prefix adds !important to any utility
📌 Arbitrary properties for CSS Tailwind doesn't cover
🟢 Use sparingly - consider extending config instead
arbitrary-valuesimportant