Tailwind CSS v4 Arbitrary Values — Dynamic and Custom Utilities
In this tutorial, you will learn about Tailwind CSS v4 Arbitrary Values. We cover key concepts, practical examples, and best practices to help you master this topic.
Tailwind CSS v4 arbitrary values let you use any CSS value directly with bracket syntax (p-[17px], bg-[#1da1f1]), with improved syntax for functions, custom properties, and calculations.
What You'll Learn
You will learn how to use arbitrary values for any utility, combine them with calc() and var(), use automatic unit inference, and understand the improved syntax in v4.
Why It Matters
Arbitrary values eliminate custom CSS for one-off values. DodaTech's v4 projects use arbitrary values for dynamic data-driven styles and third-party integration.
Real-World Use
Durga Antivirus Pro dashboard uses arbitrary values for dynamic chart colors (bg-[var(--chart-color)]), dynamic spacing (p-[calc(var(--spacing)*2)]), and font sizes from user preferences.
flowchart LR
A[Generators] --> B[Arbitrary Values]
B --> C[Bracket Syntax]
B --> D[Dynamic Values]
B --> E[CSS Functions]
B --> F[Unit Inference]
style B fill:#38bdf8,stroke:#0284c7,color:#fff
style C fill:#22c55e,stroke:#16a34a,color:#fff
Basic Arbitrary Values
<div class="space-y-4 p-8">
<!-- Arbitrary spacing -->
<div class="p-[17px] bg-blue-100 rounded">
padding: 17px (exact value, not in scale)
</div>
<!-- Arbitrary width -->
<div class="w-[calc(100%-3rem)] bg-green-100 p-4 rounded">
calc width
</div>
<!-- Arbitrary color -->
<div class="bg-[#1da1f1] text-white p-4 rounded">
Twitter blue via arbitrary color
</div>
<!-- Arbitrary font size -->
<p class="text-[2.5rem] font-bold">Custom font size</p>
<!-- Arbitrary border radius -->
<div class="rounded-[30px] bg-purple-100 p-6">
Custom 30px radius
</div>
</div>
Expected output: Elements with exact pixel values, calculated widths, custom hex colors, and non-standard font sizes -- all without custom CSS.
Arbitrary Values with CSS Variables
<div class="space-y-4 p-8" style="--brand-color: #7c3aed; --card-padding: 2rem;">
<!-- Use CSS variables in arbitrary values -->
<div class="bg-[var(--brand-color)] text-white p-4 rounded-lg">
Dynamic brand color from CSS variable
</div>
<div class="p-[var(--card-padding)] bg-gray-100 rounded-lg">
Dynamic spacing from CSS variable
</div>
<!-- Variable with calc -->
<div class="p-[calc(var(--card-padding)*0.5)] bg-gray-200 rounded-lg">
Half padding via calc
</div>
<!-- Variable with fallback -->
<div class="bg-[var(--undefined-color,#3b82f6)] text-white p-4 rounded-lg">
Color variable with fallback
</div>
</div>
Expected output: Values driven by CSS variables. Change the variable value and all arbitrary value references update. Fallbacks prevent missing variable issues.
Arbitrary Grid Values
<div class="space-y-4 p-8">
<!-- Grid with arbitrary columns -->
<div class="grid grid-cols-[1fr_2fr_1fr] gap-4">
<div class="bg-blue-100 p-4 rounded">1fr</div>
<div class="bg-blue-200 p-4 rounded">2fr</div>
<div class="bg-blue-300 p-4 rounded">1fr</div>
</div>
<!-- Grid with minmax -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4 mt-6">
<div class="bg-green-100 p-4 rounded">Auto fit card</div>
<div class="bg-green-200 p-4 rounded">Responsive grid</div>
<div class="bg-green-300 p-4 rounded">No media queries</div>
</div>
<!-- Grid template areas -->
<div class="grid grid-areas-[header_header_header_sidebar_content_sidebar] grid-cols-[1fr_3fr_1fr] gap-4 mt-6">
<div class="grid-in-[header] bg-purple-100 p-4 rounded">Header</div>
<div class="grid-in-[sidebar] bg-purple-200 p-4 rounded">Sidebar</div>
<div class="grid-in-[content] bg-purple-300 p-4 rounded">Content</div>
</div>
</div>
Expected output: Advanced grid layouts with arbitrary track sizes, auto-fit/auto-fill with minmax, and named grid areas -- all inline in HTML.
Arbitrary Gradients
<div class="grid grid-cols-3 gap-4 p-8">
<!-- Conic gradient -->
<div class="w-32 h-32 rounded-full bg-[conic-gradient(var(--tw-gradient-stops))] from-pink-500 via-purple-500 to-blue-500"></div>
<!-- Multiple background images -->
<div class="w-32 h-32 rounded-lg bg-[linear-gradient(to_right,transparent_50%,black_50%)]"></div>
<!-- Radial gradient with shape -->
<div class="w-32 h-32 rounded-lg bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-blue-400 to-purple-600"></div>
<!-- Gradient with exact stops -->
<div class="w-32 h-32 rounded-lg bg-[linear-gradient(135deg,#667eea_0%,#764ba2_100%)]"></div>
</div>
Expected output: Complex gradient patterns using arbitrary values with various gradient types and stops.
Arbitrary Transforms
<div class="space-y-8 p-8">
<!-- 3D transform -->
<div class="w-32 h-32 bg-blue-100 rounded-lg flex items-center justify-center
hover:[transform:rotateX(45deg)_rotateY(30deg)]
transition-transform duration-300 cursor-pointer">
3D Rotate
</div>
<!-- Custom scale and translate -->
<div class="w-32 h-32 bg-green-100 rounded-lg flex items-center justify-center
hover:[transform:scale(1.2)_translateX(10px)]
transition-transform duration-300 cursor-pointer">
Custom transform
</div>
<!-- Transform with perspective -->
<div class="w-32 h-32 bg-purple-100 rounded-lg flex items-center justify-center
hover:[transform:perspective(500px)_rotateY(20deg)]
transition-transform duration-300 cursor-pointer"
style="perspective: 500px;">
Perspective rotate
</div>
</div>
Expected output: 3D transforms, custom combinations, and perspective effects using arbitrary transform values.
Arbitrary Properties
<div class="space-y-4 p-8">
<!-- Arbitrary CSS property -->
<div class="[scrollbar-width:thin] [scrollbar-color:#7c3aed_transparent] h-20 overflow-auto bg-gray-50 p-2 rounded">
<p class="h-32 text-gray-600">Custom scrollbar with arbitrary properties</p>
</div>
<!-- Container query inline -->
<div class="@container [container-type:inline-size]">
<div class="@sm:bg-blue-100 p-4 rounded">
Container query with arbitrary container properties
</div>
</div>
<!-- View transitions -->
<div class="[view-transition-name:card]">
<p>Element with view transition name</p>
</div>
<!-- Custom cursor -->
<div class="w-32 h-32 bg-gray-100 rounded-lg flex items-center justify-center [cursor:zoom-in]">
Zoom cursor
</div>
</div>
Expected output: Any CSS property can be set with arbitrary bracket syntax, enabling modern CSS features not yet available as dedicated Tailwind utilities.
Common Mistakes
1. Forgetting Spaces Inside Brackets
p-[calc(100%-2rem)] fails. Use spaces: p-[calc(100%-2rem)] or encode: p-[calc(100%-2rem)]. The correct syntax is p-[calc(100%-2rem)] (no spaces unless quoted) or use underscores for spaces: p-[calc(100%_-_2rem)].
2. Using Arbitrary Values in @apply
@apply can use arbitrary values: @apply p-[17px] bg-[#1da1f1].
3. Not Quoting Strings Inside Brackets
content-[Hello] should be content-['Hello'] with quotes.
4. Arbitrary Font Families
font-[Inter] works if the font is loaded. Multiple words need quotes: font-['Playfair_Display'] (underscore for space).
5. Overusing Arbitrary Values
Arbitrary values are for one-offs. If a value appears 3+ times, add it to @theme.
Practice Questions
How do you use an arbitrary value for padding?
p-[17px]for exact value.p-[var(--custom)]for variable reference.How do spaces work in arbitrary values? Use underscores for spaces:
p-[calc(100%_-_2rem)].Can arbitrary values use CSS variables? Yes:
bg-[var(--color-brand)].How do you create a custom grid track?
grid-cols-[1fr_2fr_1fr]for three unequal columns.What is arbitrary properties syntax?
[property:value]e.g.,[scrollbar-width:thin].
Challenge
Build a component that uses 5 different arbitrary value types: dynamic spacing from CSS variable, custom grid with auto-fit, transform with perspective, gradient with exact stops, and custom scrollbar properties.
FAQ
Mini Project
Build a data-driven dashboard component that uses arbitrary values extensively: dynamic CSS variable colors for charts, arbitrary grid tracks for layout, calc-based responsive spacing, custom transform for chart tooltips, and arbitrary properties for custom scrollbars.
What's Next
Now master Override Strategy for controlling Tailwind's CSS output. Then explore Performance for optimizing v4 builds.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro