Arbitrary Values and Properties

🧑‍🏫 Sabse pehle — simple mein samjho#

Kabhi-kabhi humein aisi value chahiye hoti hai jo Tailwind ki list mein nahi hai (jaise ekdum exact 321px ki width, ya ek special brand color #1da1f2). Puraane CSS mein iske liye alag class banani padti thi. Par Tailwind ka magic dekho: tum seedha class ke andar hi brackets [] laga kar apni custom value daal sakte ho! Isko Arbitrary Values kehte hain. Isse tumhe custom CSS likhne ki zaroorat hi nahi padti.

Arbitrary Values []#

When Tailwind's predefined utility scale doesn't fit your precise needs, you can inject exact values directly into the HTML using square brackets.

• Custom Width: w-[321px]
• Custom Color: bg-[#1da1f2] (Great for Twitter blue!)
• Custom Spacing: mt-[17px] or top-[11.5%]

This feature alone prevents you from having to maintain a bloated custom CSS file for one-off design exceptions.

Arbitrary Properties#

What if you need to use a CSS property that Tailwind hasn't provided a built-in utility class for? You can write the entire CSS property and value inside the brackets!

<!-- Try modifying the arbitrary width w-[321px] or color bg-[#1da1f2]! -->
<div class="max-w-md mx-auto p-8 rounded-[30px] bg-[#1da1f2]/10 border-[3px] border-[#1da1f2] shadow-[0_10px_40px_-10px_rgba(29,161,242,0.4)]">
  <div class="flex items-center gap-[18px]">
    <div class="w-[52px] h-[52px] bg-[#1da1f2] rounded-full flex items-center justify-center text-white font-bold text-[22px]">
      X
    </div>
    <div class="[letter-spacing:-0.5px]">
      <h3 class="font-bold text-[#14171a] text-[19px] m-0">Arbitrary Magic</h3>
      <p class="text-[#657786] text-[15px] m-0 mt-[2px]">Using exact hex codes and px values</p>
    </div>
  </div>
</div>

Arbitrary Variants#

Just as you can apply arbitrary values, you can also create highly specific, arbitrary conditions (variants) using the [&] syntax. The & symbol represents the current element.

This is incredibly useful for targeting nested children without having to apply classes directly to them (for example, when styling raw HTML coming from a CMS or markdown).

<!-- Arbitrary Variants Example: Styling children elements easily -->
<!-- Change the [&>li:nth-child(even)] class to odd, or change the bg color! -->
<div class="max-w-md mx-auto bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
  <h3 class="font-bold text-gray-800 mb-4 text-lg">Top Performers</h3>
  <!-- We target every <li> inside this <ul> and style the even ones differently -->
  <ul class="m-0 p-0 list-none [&>li]:flex [&>li]:justify-between [&>li]:px-4 [&>li]:py-3 [&>li]:border-b [&>li:last-child]:border-0 [&>li:nth-child(even)]:bg-gray-50 [&>li:hover]:bg-blue-50 [&>li]:transition-colors [&>li]:cursor-pointer">
    <li><span class="font-medium text-gray-700">Alice</span> <span class="font-bold text-indigo-600">98</span></li>
    <li><span class="font-medium text-gray-700">Bob</span> <span class="font-bold text-indigo-600">92</span></li>
    <li><span class="font-medium text-gray-700">Charlie</span> <span class="font-bold text-indigo-600">85</span></li>
    <li><span class="font-medium text-gray-700">David</span> <span class="font-bold text-indigo-600">79</span></li>
  </ul>
</div>

When NOT to use them#

While arbitrary values are a superpower, relying on them too heavily ruins the core benefit of Tailwind: a consistent design system. If you find yourself using text-[14px] everywhere instead of text-sm, you are defeating the purpose of the framework! Reserve arbitrary values solely for unique, one-off exceptions.