Why arbitrary values exist in Tailwind - Quick Recap

Recall & Review

beginner

What are arbitrary values in Tailwind CSS?

Arbitrary values let you use custom styles not included in Tailwind's default set by writing them directly in square brackets, like <code>bg-[#123456]</code> for a custom color.

beginner

Why does Tailwind allow arbitrary values?

Because sometimes you need a style that Tailwind doesn’t have built-in. Arbitrary values let you add those exact styles without writing extra CSS files.

intermediate

How do arbitrary values improve developer experience?

They save time by letting you write one-off styles quickly in your HTML or JSX, avoiding switching between files or writing custom CSS.

beginner

Give an example of an arbitrary value for padding in Tailwind.

You can write p-[13px] to set padding exactly to 13 pixels, even if Tailwind doesn’t have that size predefined.

intermediate

What is a potential downside of using too many arbitrary values?

Using many arbitrary values can make your code harder to read and maintain because styles are less consistent and harder to find in one place.

What syntax does Tailwind use for arbitrary values?

A Curly braces around the value, like <code>text-{20px}</code>

B No special syntax, just write the value directly

C Parentheses around the value, like <code>text-(20px)</code>

D Square brackets around the value, like <code>text-[20px]</code>

Tailwind uses square brackets to wrap arbitrary values, for example text-[20px].

Why might you use an arbitrary value instead of a default Tailwind class?

A To use a style size or color not included in Tailwind's presets

B Because arbitrary values are faster to load

C To avoid writing any CSS at all

D Because Tailwind does not support responsive design

Arbitrary values let you use custom sizes or colors not in Tailwind’s default set.

Which of these is a valid arbitrary value for background color in Tailwind?

A bg-(#ff5733)

B bg-[#ff5733]

C bg-{#ff5733}

D bg-ff5733

The correct syntax uses square brackets: bg-[#ff5733].

What is a risk of overusing arbitrary values?

A Code becomes harder to maintain and less consistent

B Tailwind will stop working

C Your website will load slower

D You cannot use responsive design anymore

Too many arbitrary values can make your code messy and inconsistent.

How do arbitrary values help with responsive design?

A They disable responsiveness for that element

B They automatically adjust sizes on different screens

C You can combine them with responsive prefixes like <code>md:p-[15px]</code>

D They replace media queries

You can use arbitrary values with responsive prefixes to set custom styles at different screen sizes.

Explain why Tailwind CSS includes arbitrary values and how they help developers.

Think about times when you need a style Tailwind doesn’t have.

Describe the syntax for using arbitrary values in Tailwind and give two examples.

Remember the brackets and how you write the value inside.

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