CSS Reference Tailwind v4 (2026) 0 Views

Tailwind CSS v4 Utility Finder

Search, filter, and discover the new Tailwind CSS v4 utility classes and configuration directives. From standard flexbox layouts to the new Oxide engine's CSS-first features.

What changed in Tailwind CSS v4?

CSS-first configuration: No more tailwind.config.js by default. Configure your theme directly in CSS.
@theme directive: Replaces theme.extend to add custom design tokens.
Automatic content detection: The new Oxide engine automatically finds templates. No need for content array.

Built-in @import: Natively import other CSS files or Tailwind plugins directly.
Lightning fast Oxide engine: Written in Rust, it's 10x faster than v3.
Native Color-mix: Opacity modifiers now use native CSS color-mix() under the hood.

Filter:

Showing 71 utilities

Layout

flex

Creates a block-level flex container

display: flex;

Layout

inline-flex

Creates an inline-level flex container

display: inline-flex;

Layout

grid

Creates a grid container

display: grid;

Layout

block

Creates a block-level element

display: block;

Layout

hidden

Hides the element

display: none;

Layout

container

Sets element's max-width to match min-width of current breakpoint

width: 100%; /* + breakpoints */

Layout

columns-2

Sets the number of columns to 2

columns: 2;

Layout

grid-cols-3

Creates a grid with 3 equally sized columns

grid-template-columns: repeat(3, minmax(0, 1fr));

Layout

col-span-2

Makes element span 2 columns

grid-column: span 2 / span 2;

Layout

gap-4

Sets the grid/flex gap to 1rem

gap: 1rem; /* 16px */

Layout

place-items-center

Centers grid items on both axes

place-items: center;

Spacing

p-4

Sets padding to 1rem on all sides

padding: 1rem; /* 16px */

Spacing

px-6

Sets horizontal padding to 1.5rem

padding-left: 1.5rem; padding-right: 1.5rem;

Spacing

py-2

Sets vertical padding to 0.5rem

padding-top: 0.5rem; padding-bottom: 0.5rem;

Spacing

m-auto

Sets margin to auto on all sides

margin: auto;

Spacing

mx-auto

Centers a block element horizontally

margin-left: auto; margin-right: auto;

Spacing

mt-8

Sets top margin to 2rem

margin-top: 2rem; /* 32px */

Spacing

space-x-4

Adds horizontal space between children

/* Applies margin-left to child elements */

Spacing

space-y-2

Adds vertical space between children

/* Applies margin-top to child elements */

Spacing

gap-x-8

Sets horizontal gap in grid/flex to 2rem

column-gap: 2rem;

Spacing

gap-y-4

Sets vertical gap in grid/flex to 1rem

row-gap: 1rem;

Typography

text-sm

Small text size

font-size: 0.875rem; line-height: 1.25rem;

Typography

text-lg

Large text size

font-size: 1.125rem; line-height: 1.75rem;

Typography

text-xl

Extra large text size

font-size: 1.25rem; line-height: 1.75rem;

Typography

font-bold

Bold font weight

font-weight: 700;

Typography

font-black

Black/heaviest font weight

font-weight: 900;

Typography

tracking-tight

Tighter letter spacing

letter-spacing: -0.025em;

Typography

leading-relaxed

Relaxed line height for reading

line-height: 1.625;

Typography

text-balance

Balances lines of text evenly

text-wrap: balance;

Typography

text-wrap

Allows text to wrap normally

text-wrap: wrap;

Typography

truncate

Truncates text with ellipsis

overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

Colors & Backgrounds

text-gray-900

Sets text color to dark gray

color: var(--color-gray-900);

Colors & Backgrounds

bg-blue-500

Sets background color to blue

background-color: var(--color-blue-500);

Colors & Backgrounds

text-white

Sets text color to white

color: #fff;

Colors & Backgrounds

bg-gradient-to-r

Creates right-facing gradient

background-image: linear-gradient(to right, var(--tw-gradient-stops));

Colors & Backgrounds

from-blue-600

Sets gradient start color

--tw-gradient-from: var(--color-blue-600); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

Colors & Backgrounds

to-purple-600

Sets gradient end color

--tw-gradient-to: var(--color-purple-600);

Colors & Backgrounds

bg-clip-text

Clips background to text

background-clip: text; -webkit-background-clip: text;

Colors & Backgrounds

text-transparent

Makes text transparent (useful for gradient text)

color: transparent;

Colors & Backgrounds

bg-opacity-50

Sets background opacity

/* v3 legacy, v4 uses color-mix or opacity modifiers */

Colors & Backgrounds

bg-red-500/20

v4 syntax for background color with opacity

background-color: color-mix(in srgb, var(--color-red-500) 20%, transparent);

Borders & Effects

rounded-xl

Extra large border radius

border-radius: 0.75rem;

Borders & Effects

rounded-full

Fully rounded border (pill shape)

border-radius: 9999px;

Borders & Effects

border

Adds 1px border

border-width: 1px;

Borders & Effects

border-gray-200

Sets border color to light gray

border-color: var(--color-gray-200);

Borders & Effects

shadow-md

Medium drop shadow

box-shadow: var(--shadow-md);

Borders & Effects

shadow-xl

Extra large drop shadow

box-shadow: var(--shadow-xl);

Borders & Effects

ring-2

Adds 2px focus ring

box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);

Borders & Effects

ring-blue-500

Sets ring color to blue

--tw-ring-color: var(--color-blue-500);

Borders & Effects

backdrop-blur-xl

Extra large background blur

backdrop-filter: blur(24px);

Borders & Effects

opacity-80

Sets element opacity to 80%

opacity: 0.8;

Transitions & Animation

transition-all

Animates all transitionable properties

transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;

Transitions & Animation

duration-300

Sets transition duration to 300ms

transition-duration: 300ms;

Transitions & Animation

ease-in-out

Sets ease-in-out timing function

transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

Transitions & Animation

hover:scale-105

Scales element up 5% on hover

/* On hover */ transform: scale(1.05);

Transitions & Animation

animate-pulse

Pulsing opacity animation (skeleton loading)

animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

Transitions & Animation

animate-spin

Spinning animation (loading indicator)

animation: spin 1s linear infinite;

Transitions & Animation

animate-bounce

Bouncing animation

animation: bounce 1s infinite;

Transitions & Animation

delay-150

Delays transition by 150ms

transition-delay: 150ms;

Transitions & Animation

group-hover:translate-x-2

Translates element 0.5rem right when parent group is hovered

/* On group hover */ transform: translateX(0.5rem);

Tailwind v4 New

@theme

CSS-first configuration replaces tailwind.config.js for defining theme variables

/* CSS Directive */

Tailwind v4 New

@import 'tailwindcss'

Replaces @tailwind base, components, utilities directives

/* CSS Directive */

Tailwind v4 New

@plugin

Imports external plugins directly in your CSS file

/* CSS Directive */

Tailwind v4 New

color-mix()

v4 natively uses CSS color-mix for opacity handling

background: color-mix(in srgb, var(--color-blue-500) 50%, transparent);

Tailwind v4 New

@container

Marks an element as a container for container queries

container-type: inline-size;

Tailwind v4 New

@min-w-sm:block

Container query applying display:block when container is sm width

@container (min-width: 24rem) { display: block; }

Tailwind v4 New

@max-w-md:hidden

Container query applying display:none when container is max md width

@container (max-width: 28rem) { display: none; }

Tailwind v4 New

perspective-1000

New 3D transform utilities natively supported in v4

perspective: 1000px;

Tailwind v4 New

rotate-y-180

New native 3D rotation utilities

transform: rotateY(180deg);

Tailwind v4 New

Automatic Content Detection

v4's Oxide engine automatically finds templates, no need for content:[] config

/* Core Engine Feature */

Tailwind v4 New

CSS-first Config

Configuration is done entirely via CSS variables instead of JS config

/* Core Engine Feature */

Spotlight Hardware & Tools

Handpicked Partner Deals & Gear

Discover top-rated mechanical keyboards, 4K monitors, coding software, and curated developer workstation bundles.

🔥 Explore Deals ✨ Browse Stacks

Cite & Link This Resource

Backlink Magnet

Writing a blog post, GitHub README, or docs? Embed a backlink snippet or badge to cite this cheat sheet.

[Tailwind CSS v4 Utility Class Finder](https://devdossier.com/resources/tailwind-v4-utility-finder) - Interactive Reference & Cheat Sheet via DevDossier

Tailwind CSS v4 Utility Finder

What changed in Tailwind CSS v4?

flex

inline-flex

grid

block

hidden

container

columns-2

grid-cols-3

col-span-2

gap-4

place-items-center

p-4

px-6

py-2

m-auto

mx-auto

mt-8

space-x-4

space-y-2

gap-x-8

gap-y-4

text-sm

text-lg

text-xl

font-bold

font-black

tracking-tight

leading-relaxed

text-balance

text-wrap

truncate

text-gray-900

bg-blue-500

text-white

bg-gradient-to-r

from-blue-600

to-purple-600

bg-clip-text

text-transparent

bg-opacity-50

bg-red-500/20

rounded-xl

rounded-full

border

border-gray-200

shadow-md

shadow-xl

ring-2

ring-blue-500

backdrop-blur-xl

opacity-80

transition-all

duration-300

ease-in-out

hover:scale-105

animate-pulse

animate-spin

animate-bounce

delay-150

group-hover:translate-x-2

@theme

@import 'tailwindcss'

@plugin

color-mix()

@container

@min-w-sm:block

@max-w-md:hidden

perspective-1000

rotate-y-180

Automatic Content Detection

CSS-first Config

Handpicked Partner Deals & Gear

Cite & Link This Resource

Find Us Everywhere

Core Channels

Earn Microsoft Rewards with DevDossier