0
0
Tailwindmarkup~5 mins

Why arbitrary values exist in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Arbitrary values let you use custom sizes or colors not in Tailwind's default list. This helps you make your design exactly how you want.

You want a color shade that Tailwind doesn't have.
You need a spacing size like 7.5rem, which is not in the default scale.
You want a border radius that is not one of Tailwind's preset options.
You want to try a font size that is between Tailwind's standard sizes.
You want to quickly test a style without changing Tailwind config.
Syntax
Tailwind
class="property-[value]"

Use square brackets [ ] to wrap your custom value.

Make sure to write the value exactly as CSS expects, including units like rem, px, %, etc.

Examples
Sets a background color to a custom hex code.
Tailwind
class="bg-[#1a2b3c]"
Adds a top margin of 3.5 rem units.
Tailwind
class="mt-[3.5rem]"
Gives a border radius of 12 pixels.
Tailwind
class="rounded-[12px]"
Sets the font size to 18 pixels.
Tailwind
class="text-[18px]"
Sample Program

This example shows a button with a custom background color, padding, and rounded corners using arbitrary values. When you hover, the background changes to another custom color.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Arbitrary Values Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-100">
  <button class="bg-[#ff6347] text-white px-[2.5rem] py-[1rem] rounded-[1.25rem] hover:bg-[#e5533d] transition">
    Custom Button
  </button>
</body>
</html>
OutputSuccess
Important Notes

Arbitrary values give you freedom but use them wisely to keep your design consistent.

Always include units like rem or px when needed, or the style might not work.

Check your browser's developer tools to see the applied styles and debug if needed.

Summary

Arbitrary values let you use any CSS value inside Tailwind classes.

They help you customize designs beyond Tailwind's default options.

Use square brackets and include proper units for your custom values.