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.