Tailwind Arbitrary Values
Tailwind's built-in classes cover most design needs. But sometimes you need a very specific value — like a pixel-perfect width, a unique color from a design file, or an exact padding that doesn't exist in Tailwind's scale. Arbitrary values solve this without writing custom CSS.
What Are Arbitrary Values
An arbitrary value is a custom number or value you write directly inside square brackets in a Tailwind class. Tailwind generates the CSS for it on the fly.
Syntax: property-[value]
Examples:
w-[300px] → width: 300px
text-[#ff6347] → color: #ff6347
mt-[13px] → margin-top: 13px
bg-[#1a1a2e] → background-color: #1a1a2e
Regular Class vs Arbitrary Value
Regular (from Tailwind scale):
w-64 → width: 16rem (256px)
text-xl → font-size: 1.25rem
Arbitrary (your exact value):
w-[270px] → width: 270px
text-[22px] → font-size: 22px
Width and Height
<div class="w-[380px] h-[220px] bg-blue-100 rounded">
Fixed 380px wide, 220px tall
</div>
<div class="w-[60%] bg-green-100 p-4">
60% of its parent's width
</div>
<div class="h-[calc(100vh-80px)] bg-gray-50">
Full viewport height minus 80px navbar
</div>Diagram: calc() Use Case
+---------------------------------------------+
| Navbar (80px tall) |
+---------------------------------------------+
| |
| Main Content |
| h-[calc(100vh-80px)] |
| ↑ fills exactly the remaining screen |
| |
+---------------------------------------------+
Total: 80px + calc(100vh-80px) = 100vh
Custom Colors
<p class="text-[#e63946]">Custom red text</p>
<div class="bg-[#1a1a2e] text-white p-6">Custom dark background</div>
<button class="bg-[rgb(99,102,241)] text-white px-4 py-2 rounded">Indigo Button</button>
<span class="border border-[hsl(220,90%,56%)] text-[hsl(220,90%,56%)]">Blue outline</span>Arbitrary values accept any valid CSS color format: hex, rgb, rgba, hsl, hsla.
Custom Spacing and Padding
<div class="mt-[13px] mb-[27px]">Odd spacing from a design file</div>
<div class="px-[22px] py-[11px] bg-gray-100 rounded">Custom padding</div>
<div class="gap-[18px] flex">Custom flex gap</div>Custom Font Size and Line Height
<h1 class="text-[56px] leading-[1.1] font-black">Hero Title</h1>
<p class="text-[15px] leading-[1.8] text-gray-700">Body copy with relaxed line height.</p>Custom Positioning
<div class="relative w-full h-[400px] bg-gray-200">
<!-- Positioned at exact pixel offsets -->
<div class="absolute top-[30px] left-[45px] bg-white shadow p-4 rounded">
Tooltip or floating card
</div>
</div>Positioning Diagram
+----------------------------------+
| Parent (relative) |
| |
| +-----------+ |
| | Floating | ← top-[30px] |
| | element | ← left-[45px] |
| +-----------+ |
| |
+----------------------------------+
Custom Border and Outline
<div class="border-[3px] border-[#7c3aed] rounded-[12px] p-4">
Custom purple border, 3px thick, 12px radius
</div>
<input class="outline-[2px] outline-[#3b82f6] p-2 rounded" type="text" />Custom Grid Layouts
<!-- 5-column grid (not in default Tailwind scale) -->
<div class="grid grid-cols-[repeat(5,1fr)] gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<!-- Specific column widths -->
<div class="grid grid-cols-[200px_1fr_150px]">
<aside>Sidebar (200px)</aside>
<main>Main content (flexible)</main>
<aside>Right panel (150px)</aside>
</div>Grid Columns Diagram
grid-cols-[200px_1fr_150px]:
+----------+------------------------+----------+
| 200px | 1fr (stretches) | 150px |
| Sidebar | Main Content | Panel |
+----------+------------------------+----------+
CSS Variables as Arbitrary Values
You can reference CSS custom properties (variables) inside arbitrary value brackets.
<!-- Define your CSS variable -->
<style>
:root {
--brand-color: #7c3aed;
--card-width: 340px;
}
</style>
<!-- Use it in Tailwind -->
<div class="bg-[var(--brand-color)] text-white p-4 rounded">
Uses a CSS variable for background color
</div>
<div class="w-[var(--card-width)]">
Uses a CSS variable for width
</div>Combining Arbitrary Values with Variants
Arbitrary values work with responsive, hover, focus, and dark variants.
<div class="w-full md:w-[600px]">
Full width on mobile, 600px on medium screens
</div>
<button class="bg-[#7c3aed] hover:bg-[#5b21b6] text-white px-4 py-2 rounded">
Hover changes exact color
</button>
<div class="dark:bg-[#0f172a] bg-white p-6">
Custom dark mode background color
</div>When to Use Arbitrary Values
USE arbitrary values when:
✓ A designer gave you exact pixel values
✓ You need a specific brand color not in your config
✓ You need calc() expressions
✓ You need advanced grid templates
✓ One-off values that don't need to repeat
AVOID arbitrary values when:
✗ The value repeats across many components
→ Add it to tailwind.config.js instead
✗ The value exists in Tailwind's default scale
→ Use the standard class (w-64 not w-[256px])
Space in Arbitrary Values
CSS values that normally use spaces need an underscore inside arbitrary brackets. Tailwind converts underscores to spaces in the generated CSS.
<!-- Grid template with multiple values -->
<div class="grid-cols-[1fr_2fr_1fr]">
<!-- generates: grid-template-columns: 1fr 2fr 1fr -->
</div>
<!-- Background gradient -->
<div class="bg-[linear-gradient(to_right,#3b82f6,#7c3aed)]">
<!-- generates: background: linear-gradient(to right, #3b82f6, #7c3aed) -->
</div>Underscore Rule
What you write: bg-[linear-gradient(to_right,#3b82f6,#8b5cf6)]
↑
underscore = space in CSS
What CSS gets: background: linear-gradient(to right, #3b82f6, #8b5cf6);
Key Points
- Arbitrary values use square brackets:
w-[300px],text-[#ff0000] - They work with any CSS-valid value: px, rem, %, hex, rgb, hsl, calc()
- Use underscores inside brackets where CSS normally uses spaces
- They work with all Tailwind variants:
hover:,md:,dark: - If the same value repeats often, move it to your config file instead
- CSS variables are supported with
var(--name)syntax