Tailwind CSS Arbitrary Values Cheatsheet
Master custom values with the [ ] brackets syntax.
Click any example to copy the class to your clipboard.
What are Arbitrary Values?
Tailwind's arbitrary value syntax lets you use any CSS value by wrapping it in square brackets [ ].
w-64w-[237px]When to use: Use utility classes for common values to stay consistent. Use arbitrary values for one-off designs, exact brand specs, or pixel-perfect implementations.
Quick Reference
Common arbitrary value patterns. Click any example to copy.
| Tailwind Class | Type | CSS Output | |
|---|---|---|---|
w-[200px] | Sizing | width: 200px | |
bg-[#1a1a1a] | Color | background-color: #1a1a1a | |
text-[22px] | Typography | font-size: 22px | |
top-[10px] | Positioning | top: 10px | |
grid-cols-[1fr_2fr] | Grid | grid-template-columns: 1fr 2fr | |
rotate-[17deg] | Transform | transform: rotate(17deg) |
Spacing & Sizing
Use exact pixel values, viewport units, rem, or calc() for precise control over dimensions and spacing.
| Class | Description | |
|---|---|---|
w-[200px] | Exact pixel width | |
h-[50vh] | Viewport height percentage | |
p-[13px] | Odd padding value | |
m-[2.5rem] | Custom rem spacing | |
gap-[17px] | Precise gap between flex/grid items | |
w-[calc(100%-20px)] | Width with calc() | |
max-w-[1400px] | Custom max-width container | |
min-h-[calc(100vh-64px)] | Full height minus header |
Live Example
Fixed dimensionsWith calc()Colors
Use hex, RGB, HSL, or CSS variables for exact brand colors.
| Class | Description | |
|---|---|---|
bg-[#1a1a1a] | Hex color | |
text-[rgb(255,0,0)] | RGB color | |
border-[hsl(200,50%,50%)] | HSL color | |
bg-[rgba(0,0,0,0.5)] | RGBA with transparency | |
text-[color:var(--brand-primary)] | CSS variable | |
ring-[#3b82f6] | Custom ring color | |
divide-[#e5e7eb] | Custom divider color | |
decoration-[#8b5cf6] | Text decoration color |
Live Examples
bg-[#1a1a1a]bg-[rgb(...)]bg-[hsl(...)]rgba(...,0.3)Typography
Set exact font sizes, line heights, letter spacing, and weights.
| Class | Description | |
|---|---|---|
text-[22px] | Exact font size | |
leading-[1.7] | Custom line-height | |
tracking-[0.05em] | Letter spacing in ems | |
font-[600] | Numeric font weight | |
text-[length:var(--font-size)] | Font size from CSS var | |
text-[clamp(1rem,2.5vw,2rem)] | Responsive with clamp() |
Live Examples
Custom typography with text-[22px] leading-[1.7] tracking-[0.05em]
Responsive with clamp: text-[clamp(1rem,2.5vw,2rem)]
Positioning
Precise positioning with pixels, percentages, calc(), or CSS variables.
| Class | Description | |
|---|---|---|
top-[117px] | Precise positioning | |
left-[calc(50%-10px)] | Calculated position | |
z-[9999] | High z-index | |
inset-[10px] | Offset from all sides | |
right-[2.5rem] | Right offset in rem | |
-top-[5px] | Negative positioning |
Live Example
Grid & Flexbox
Create custom grid templates and flex layouts with arbitrary values.
| Class | Description | |
|---|---|---|
grid-cols-[200px_1fr_200px] | Fixed-fluid-fixed layout | |
gap-[17px] | Custom gap | |
basis-[200px] | Flex basis | |
grid-cols-[repeat(auto-fit,minmax(250px,1fr))] | Responsive grid | |
gap-x-[2rem] | Horizontal gap only | |
flex-[0_0_300px] | Flex shorthand |
Live Example
grid-cols-[200px_1fr_200px] gap-[17px]Transforms
Rotate, scale, translate, and skew with custom degree or unit values.
| Class | Description | |
|---|---|---|
rotate-[17deg] | Custom rotation | |
scale-[1.1] | Precise scale | |
translate-x-[3px] | Exact translation | |
skew-x-[5deg] | Custom skew | |
rotate-[var(--rotation)] | Dynamic rotation |
Live Examples
rotate-[17deg]scale-[1.3]translate-x-[15px]skew-x-[10deg]Other Properties
Border radius, shadows, filters, opacity, aspect ratios, and more.
| Class | Description | |
|---|---|---|
rounded-[13px] | Custom border radius | |
shadow-[0_8px_30px_rgb(0,0,0,0.12)] | Custom box shadow | |
blur-[2px] | Precise blur | |
opacity-[0.87] | Exact opacity | |
aspect-[16/9] | Custom aspect ratio | |
delay-[250ms] | Animation delay | |
duration-[350ms] | Transition duration | |
stroke-[1.5] | SVG stroke width |
Pseudo-classes with Arbitrary Values
Combine modifiers (hover, focus, responsive breakpoints, dark mode) with arbitrary values.
| Class | Description | |
|---|---|---|
hover:bg-[#333333] | Custom hover color | |
focus:ring-[3px] | Precise focus ring width | |
md:w-[500px] | Responsive arbitrary value | |
dark:bg-[#1e1e1e] | Dark mode custom color | |
hover:scale-[1.05] | Hover scale animation | |
active:translate-y-[2px] | Button press effect | |
group-hover:opacity-[0.87] | Group interaction | |
peer-focus:text-[#3b82f6] | Peer state styling |
Interactive Example
Using calc() in Arbitrary Values
Use calc() for dynamic calculations. Replace spaces with underscores for proper parsing.
w-[calc(100% - 2rem)]Spaces cause parsing issues
w-[calc(100%_-_2rem)]Use underscores instead
Common calc() Examples
w-[calc(100%_-_20px)]h-[calc(100vh_-_64px)]max-w-[calc(100vw_-_4rem)]left-[calc(50%_-_100px)]Using CSS Variables
Reference CSS custom properties (variables) in arbitrary values for dynamic theming.
Syntax Pattern
bg-[var(--color-primary)]text-[length:var(--font-size)]| Class | Description | |
|---|---|---|
bg-[var(--brand-primary)] | Background from CSS variable | |
text-[color:var(--text-color)] | Text color with type hint | |
w-[length:var(--container-width)] | Width from variable | |
rotate-[var(--rotation)] | Dynamic rotation angle |
Best Practices
✓ Do
- •Use standard utilities for common values (w-64, bg-blue-500)
- •Use arbitrary values for one-off designs and exact brand specs
- •Replace spaces with underscores in calc(): calc(100%_-_20px)
- •Add type hints for CSS variables: text-[length:var(--size)]
- •Combine with modifiers: hover:bg-[#333] md:w-[500px]
✗ Don't
- •Don't overuse arbitrary values - maintain design consistency
- •Don't use spaces in calc() - they break parsing
- •Don't create duplicates: use w-[256px] when w-64 exists
- •Don't forget quotes for multi-word font names
- •Don't use arbitrary values if extending config is better
Frequently Asked Questions
What are Tailwind arbitrary values?
Tailwind arbitrary values let you use custom values that don't exist in the default utility classes. Use square brackets like w-[200px] or bg-[#1a1a1a] to apply any CSS value directly in your HTML.
When should I use arbitrary values vs utility classes?
Use utility classes for common values (w-64, bg-blue-500) to stay consistent. Use arbitrary values for one-off designs, exact brand colors, or specific measurements that don't match the default scale.
Can I use calc() with Tailwind arbitrary values?
Yes! Use calc() inside brackets: w-[calc(100%-2rem)] or h-[calc(100vh-64px)]. Replace spaces with underscores: w-[calc(100%_-_2rem)] for proper parsing.
Do arbitrary values work with modifiers like hover: and md:?
Absolutely. Combine modifiers with arbitrary values: hover:bg-[#ff0000], md:w-[500px], focus:ring-[3px], dark:text-[#e5e5e5].
How do I use CSS variables in arbitrary values?
For colors, use bg-[var(--color-name)]. For other properties, add a type hint: text-[length:var(--font-size)] or w-[length:var(--width)].
Can I use arbitrary values in JIT mode?
Yes! Arbitrary values are fully supported in both JIT (Just-In-Time) mode and the new Tailwind v4. They're generated on-demand when detected in your HTML.
More Tailwind Cheatsheets
Flexbox Cheatsheet
All flex utilities at a glance
Grid Cheatsheet
CSS Grid utilities explained
Typography Cheatsheet
Font and text utilities
Spacing Cheatsheet
Padding, margin, and gap
Sizing Cheatsheet
Width, height, and min/max
Background Cheatsheet
Background utilities reference
Effects Cheatsheet
Shadow, opacity, and blend
Transition Cheatsheet
Transition and animation classes
Transform Cheatsheet
Scale, rotate, translate, skew
Cursor Cheatsheet
All cursor utility classes
Ring Cheatsheet
Focus ring utilities
Outline Cheatsheet
Outline width, color, offset
Overflow Cheatsheet
Overflow and scroll utilities
Font Weight Cheatsheet
All font-weight classes
Margin & Padding
Spacing shorthand classes
Container Cheatsheet
Container query classes
Columns Cheatsheet
Multi-column layout utilities
Divide Cheatsheet
Divider between children
Scroll Cheatsheet
Scroll snap and behavior
Text Decoration
Underline, overline, strikethrough
Text Transform
Uppercase, lowercase, capitalize
Pointer Events
pointer-events-none and auto
User Select
Text selection control
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow