Square bracket notation for custom values in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Using square bracket notation for custom colors in Tailwind CSS

Which Tailwind CSS class correctly applies a background color of #1a2b3c using square bracket notation?

A bg-[#1a2b3c]

B bg-#1a2b3c

C bg-[[#1a2b3c]]

D bg-1a2b3c

💡 Hint

Remember that Tailwind uses square brackets to wrap custom values without spaces.

The correct syntax for custom colors in Tailwind uses square brackets around the value with no extra characters. Option A is correct: bg-[#1a2b3c]. Option A and D omit brackets, which is invalid. Option A adds an extra bracket inside, causing a syntax error.

❓ rendering

intermediate

Visual effect of square bracket notation for custom font size

What font size will the text have when using the class text-[22px] in Tailwind CSS?

Tailwind

<p class="text-[22px]">Sample Text</p>

A The text will be 22 pixels tall.

B The text size will not change and cause an error.

C The text size will be 2.2 rem.

D The text will be the default Tailwind font size.

💡 Hint

Square bracket notation sets exact CSS values.

The class text-[22px] sets the font size exactly to 22 pixels. Tailwind allows custom values inside square brackets to override defaults. So the text will appear 22 pixels tall.

❓ selector

advanced

Selecting elements with custom width using square bracket notation

Which Tailwind CSS class sets an element's width to exactly 18.5rem using square bracket notation?

A w-[18,5rem]

B width-[18.5rem]

C w-18.5rem

D w-[18.5rem]

💡 Hint

Tailwind uses w- prefix for width and square brackets for custom values.

Option D is correct because w-[18.5rem] sets width to 18.5 rem exactly. Option D uses an invalid prefix. Option D lacks brackets and is invalid. Option D uses a comma instead of a dot, which is invalid in CSS.

❓ layout

advanced

Using square bracket notation for custom margin in Tailwind CSS

You want to add a left margin of exactly 13.75rem to a div. Which class correctly applies this margin using square bracket notation?

Tailwind

<div class="???">Content</div>

A ml-[13,75rem]

B ml-[13.75rem]

C ml-13.75rem

D margin-left-[13.75rem]

💡 Hint

Tailwind uses ml- for margin-left and square brackets for custom values.

Option B is correct: ml-[13.75rem] sets margin-left to 13.75 rem exactly. Option B uses an invalid prefix. Option B lacks brackets, so it is invalid. Option B uses a comma instead of a dot, which is invalid in CSS.

❓ accessibility

expert

Accessibility considerations when using square bracket notation for custom colors

You apply a text color using text-[#123456] in Tailwind CSS. What is the best practice to ensure good accessibility?

Tailwind

<p class="text-[#123456]">Important text</p>

A Use any custom color since Tailwind guarantees accessibility.

B Add <code>aria-label</code> to fix color contrast issues automatically.

C Check the color contrast ratio against the background to ensure readability.

D Avoid using square bracket notation for colors to maintain accessibility.

💡 Hint

Accessibility depends on color contrast, not just syntax.

Using custom colors requires checking contrast to ensure text is readable for all users. Tailwind does not automatically guarantee accessibility for custom colors. Adding aria-label does not fix color contrast. Avoiding square bracket notation is unnecessary if contrast is good.