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.

Practice

1. What does the square bracket notation in Tailwind CSS allow you to do?

easy

A. Disable Tailwind's default styles

B. Write JavaScript code inside Tailwind classes

C. Create new Tailwind utility classes permanently

D. Use custom CSS values not included in Tailwind's default set

Solution

1. Step 1: Understand Tailwind's default values

   Tailwind provides a set of predefined values for spacing, colors, sizes, etc.

2. Step 2: Role of square bracket notation

   Square bracket notation lets you write any CSS value directly inside a class, like mt-[10px] for margin-top 10 pixels.

3. Final Answer:

   Use custom CSS values not included in Tailwind's default set -> Option D

4. Quick Check:

   Square brackets = custom CSS values [OK]

Hint: Square brackets mean custom CSS values inside Tailwind classes [OK]

Common Mistakes:

• Thinking it creates new permanent classes
• Confusing with JavaScript code inside classes
• Assuming it disables Tailwind styles

2. Which of the following is the correct Tailwind class to set a width of exactly 250 pixels using square bracket notation?

easy

A. width-[250]

B. w-[250px]

C. w-250px

D. w-[250]

Solution

1. Step 1: Identify correct Tailwind prefix for width

   Tailwind uses w- prefix for width utilities.

2. Step 2: Use square brackets with full CSS value

   Inside brackets, you must include the unit, so 250px is correct.

3. Final Answer:

   w-[250px] -> Option B

4. Quick Check:

   Width with unit inside brackets = w-[250px] [OK]

Hint: Use full CSS value with units inside brackets after utility prefix [OK]

Common Mistakes:

• Omitting units inside brackets
• Using wrong prefix like width-
• Not using brackets for custom values

3. What will be the rendered width of a div with class class="w-[15rem]" in Tailwind CSS?

medium

A. 15 rem units (usually 15 times root font size)

B. 15 pixels

C. 15 percent width

D. 15 viewport width units

Solution

1. Step 1: Understand the CSS unit inside brackets

   The class w-[15rem] sets width to 15 rem units, where 1 rem equals the root font size (usually 16px).

2. Step 2: Interpret the rendered size

   15 rem means 15 times the root font size, so it is not pixels or percent but relative to font size.

3. Final Answer:

   15 rem units (usually 15 times root font size) -> Option A

4. Quick Check:

   Square bracket value with rem = relative font size width [OK]

Hint: Read units inside brackets literally as CSS units [OK]

Common Mistakes:

• Assuming rem means pixels
• Confusing rem with percent or viewport units
• Ignoring units inside brackets

4. You wrote class="p-[20]" to add padding of 20 pixels, but it doesn't work. What is the error?

medium

A. Padding cannot be customized in Tailwind

B. Square brackets are not allowed for padding

C. Missing unit inside square brackets

D. Class name should be padding-[20px]

Solution

1. Step 1: Check the syntax of the custom value

   Inside square brackets, you must include the CSS unit, like 20px, not just a number.

2. Step 2: Understand Tailwind's requirement for units

   Without units, the CSS value is invalid, so the style won't apply.

3. Final Answer:

   Missing unit inside square brackets -> Option C

4. Quick Check:

   Always include units inside brackets for custom values [OK]

Hint: Always add units like px, rem inside brackets for spacing [OK]

Common Mistakes:

• Omitting units inside brackets
• Using wrong class names like padding-
• Thinking padding can't be customized

5. You want a button with a background color exactly #1a73e8 and a border radius of 12px using Tailwind's square bracket notation. Which class combination is correct?

hard

A. bg-[#1a73e8] rounded-[12px]

B. bg-#1a73e8 rounded-12px

C. background-[#1a73e8] border-radius-[12px]

D. bg-[#1a73e8] rounded-[12]

Solution

1. Step 1: Use correct Tailwind prefixes

   Background color uses bg- and border radius uses rounded-.

2. Step 2: Apply square bracket notation with full CSS values

   Inside brackets, include the full hex color #1a73e8 and the unit 12px for radius.

3. Step 3: Check for syntax correctness

   bg-[#1a73e8] rounded-[12px] uses correct prefixes and proper bracket notation with units and hash symbol.

4. Final Answer:

   bg-[#1a73e8] rounded-[12px] -> Option A

5. Quick Check:

   Use correct prefixes + full CSS values in brackets [OK]

Hint: Use bg- and rounded- with full CSS values inside brackets [OK]

Common Mistakes:

• Omitting # in hex color
• Missing units for border radius
• Using wrong prefixes like background-