Why arbitrary values exist in Tailwind - Browser Rendering Impact

Render Flow - Why arbitrary values exist

[Write Tailwind class] -> [Parse class name] -> [Check predefined scale] -> [Not found?] -> [Parse arbitrary value] -> [Apply CSS with custom value] -> [Render element]

Tailwind reads each class name, tries to match it to predefined values, and if it doesn't find one, it parses the arbitrary value inside brackets and applies it as custom CSS.

Render Steps - 3 Steps

Code Added:class="bg-[#ff6347]"

Before

[___________]
|           |
|           |
|           |
|___________|

→

After

[###########]
|           |
|           |
|           |
|___________|

The background color changes to a bright tomato red using the arbitrary hex color value.

🔧 Browser Action:Parses arbitrary color value and applies background-color style.

Code Sample

A div with a custom tomato background color, padding of 2.5rem, and text size of 1.25rem using arbitrary values.

Tailwind

<div class="bg-[#ff6347] p-[2.5rem] text-[1.25rem]">Hello!</div>

Render Quiz - 3 Questions

After applying step 1, what visual change do you see?

A Padding increases inside the box

B Text size becomes larger

C Background color changes to a custom tomato red

D No visible change

Common Confusions - 2 Topics

Why can't I just use normal Tailwind classes for all sizes and colors?

Tailwind has a fixed set of predefined sizes and colors for consistency and performance. Arbitrary values let you use any value when the predefined ones don't fit your design.

💡 Use arbitrary values inside brackets [ ] when you need a custom size or color not in Tailwind's scale.

Why do I need to put the value inside square brackets?

Square brackets tell Tailwind to treat the value as a custom CSS value instead of a predefined keyword. This helps Tailwind parse and apply it correctly.

💡 Always wrap custom values in [ ] to activate arbitrary value parsing.

Property Reference

Property	Example Arbitrary Value	Visual Effect	Common Use
background-color	[#ff6347]	Changes background to custom color	Custom brand or accent colors
padding	[2.5rem]	Adds custom spacing inside element	Precise spacing beyond default scale
font-size	[1.25rem]	Sets text size to exact value	Fine-tuning typography

Concept Snapshot

Tailwind uses predefined scales for colors, sizes, and spacing. Arbitrary values let you use any CSS value by wrapping it in [ ]. This allows precise control beyond the default scale. Use square brackets to signal custom values. Common properties: background-color, padding, font-size. Arbitrary values keep design flexible and consistent.

Practice

1. Why do arbitrary values exist in Tailwind CSS?

easy

A. To allow using any custom CSS value beyond default Tailwind options

B. To restrict styling only to predefined Tailwind classes

C. To automatically generate animations

D. To replace JavaScript functionality

Solution

1. Step 1: Understand Tailwind's default options

   Tailwind provides many predefined classes but cannot cover every possible CSS value.

2. Step 2: Purpose of arbitrary values

   Arbitrary values let you write any CSS value inside square brackets to customize styles beyond defaults.

3. Final Answer:

   To allow using any custom CSS value beyond default Tailwind options -> Option A

4. Quick Check:

   Arbitrary values = custom CSS values [OK]

Hint: Think: Custom styles beyond presets use arbitrary values [OK]

Common Mistakes:

• Thinking arbitrary values limit styling
• Confusing arbitrary values with animations
• Believing arbitrary values replace JavaScript

2. Which of the following is the correct syntax to set a custom width of 450 pixels using Tailwind's arbitrary values?

easy

A. width-450

B. w-[450px]

C. w-450px

D. width-[450]

Solution

1. Step 1: Recall Tailwind arbitrary value syntax

   Arbitrary values use square brackets with the CSS value inside, e.g., w-[450px].

2. Step 2: Check each option

   Only w-[450px] uses square brackets and includes units correctly.

3. Final Answer:

   w-[450px] -> Option B

4. Quick Check:

   Correct syntax = w-[450px] [OK]

Hint: Remember: square brackets around full CSS value with units [OK]

Common Mistakes:

• Omitting square brackets
• Missing units like px
• Using dash instead of brackets

3. What will be the width of the div rendered by this code?

<div class="w-[30rem] bg-blue-500 text-white p-4">Hello</div>

medium

A. Default width with blue background

B. Width of 30px with blue background

C. Width of 30rem (about 480px) with blue background

D. Width of 30rem but no background color

Solution

1. Step 1: Interpret the class w-[30rem]

   This sets the width to exactly 30rem, which is about 480 pixels (1rem ≈ 16px).

2. Step 2: Check other classes

   bg-blue-500 sets a blue background, text-white sets white text, and p-4 adds padding.

3. Final Answer:

   Width of 30rem (about 480px) with blue background -> Option C

4. Quick Check:

   Arbitrary width 30rem + blue bg = Width of 30rem (about 480px) with blue background [OK]

Hint: Remember rem units scale with root font size (~16px) [OK]

Common Mistakes:

• Confusing rem with px
• Ignoring background color class
• Assuming default width

4. Identify the error in this Tailwind class usage:

<div class="h-[100] bg-red-400">Error</div>

medium

A. Missing units inside the arbitrary value brackets

B. Incorrect use of square brackets

C. bg-red-400 is not a valid Tailwind class

D. Height cannot be set with arbitrary values

Solution

1. Step 1: Check the arbitrary value syntax

   The height is set as h-[100] but lacks units like px or rem.

2. Step 2: Understand CSS requirements

   CSS requires units for length values unless it's zero; so 100 alone is invalid.

3. Final Answer:

   Missing units inside the arbitrary value brackets -> Option A

4. Quick Check:

   Units required inside brackets [OK]

Hint: Always include units like px or rem inside brackets [OK]

Common Mistakes:

• Forgetting units inside arbitrary values
• Thinking brackets are wrong syntax
• Assuming Tailwind classes are invalid

5. You want to create a button with a custom border radius of 12px and a padding of 1.25rem using Tailwind. Which class combination correctly uses arbitrary values to achieve this?

hard

A. rounded-12px p-1.25rem

B. rounded-12 p-1.25rem

C. rounded-[12] p-[1.25]

D. rounded-[12px] p-[1.25rem]

Solution

1. Step 1: Use square brackets for arbitrary values

   Custom values must be inside square brackets with units, e.g., rounded-[12px] and p-[1.25rem].

2. Step 2: Check each option

   Only rounded-[12px] p-[1.25rem] correctly uses brackets and includes units for both border radius and padding.

3. Final Answer:

   rounded-[12px] p-[1.25rem] -> Option D

4. Quick Check:

   Arbitrary values need brackets + units [OK]

Hint: Use brackets and units for all custom CSS values [OK]

Common Mistakes:

• Omitting brackets
• Leaving out units
• Mixing syntax without brackets