Arbitrary properties for unsupported CSS in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Using arbitrary properties in Tailwind CSS

Which of the following Tailwind CSS classes correctly applies a CSS property scroll-margin-top with a value of 2rem using arbitrary properties?

A scroll-margin-top:2rem

B scroll-margin-top-[2rem]

C [scroll-margin-top:2rem]

D scroll-margin-top(2rem)

💡 Hint

Remember that arbitrary properties in Tailwind use square brackets with the full CSS property and value inside.

Tailwind allows arbitrary CSS properties by wrapping the full property and value inside square brackets, like [property:value]. So [scroll-margin-top:2rem] is correct.

Options A, C, and D are not valid Tailwind arbitrary property syntax.

❓ rendering

intermediate

Visual effect of arbitrary CSS property in Tailwind

Given the following HTML snippet styled with Tailwind CSS, what visual effect will the class [scroll-padding-top:4rem] have when the user scrolls to an anchor link inside the page?

Tailwind

<nav class="fixed top-0 w-full bg-white shadow">
  <a href="#section1" class="block p-4">Section 1</a>
</nav>
<main class="pt-16 [scroll-padding-top:4rem]">
  <section id="section1" class="h-screen bg-gray-100">Content</section>
</main>

A The page will scroll so the top of #section1 is 4rem below the viewport top, avoiding overlap with the fixed nav.

B The page will scroll normally with #section1 at the very top of the viewport, overlapping the fixed nav.

C The page will add 4rem of padding inside #section1, pushing content down visually.

D The page will not scroll at all when clicking the anchor link.

💡 Hint

Scroll padding controls the offset when scrolling to anchors, useful with fixed headers.

The scroll-padding-top property sets the offset from the top of the viewport when scrolling to an anchor. Here, [scroll-padding-top:4rem] ensures the section is visible below the fixed nav bar.

Option A ignores the offset, C changes padding inside the section (not scroll behavior), and D is incorrect.

❓ selector

advanced

Combining arbitrary properties with pseudo-classes in Tailwind

Which Tailwind CSS class correctly applies backdrop-filter: blur(5px) only when the element is hovered?

A hover:backdrop-filter(blur(5px))

B [hover:backdrop-filter:blur(5px)]

C [backdrop-filter:hover:blur(5px)]

D hover:[backdrop-filter:blur(5px)]

💡 Hint

In Tailwind, pseudo-classes come before the arbitrary property in the class name.

The correct syntax is to prefix the arbitrary property with the pseudo-class, like hover:[property:value]. So hover:[backdrop-filter:blur(5px)] applies the blur only on hover.

Other options misuse the brackets or pseudo-class placement.

❓ accessibility

advanced

Accessibility considerations when using arbitrary CSS properties

When using arbitrary CSS properties like [scroll-margin-top:3rem] in Tailwind, which accessibility best practice should you keep in mind?

A Ensure the offset does not hide focused elements or cause keyboard navigation confusion.

B Always add <code>aria-hidden="true"</code> to elements with arbitrary properties.

C Avoid using arbitrary properties because screen readers do not support them.

D Use arbitrary properties only on decorative elements without interactive content.

💡 Hint

Think about how scrolling and focus work for keyboard users.

Using scroll offsets can cause focused elements to be hidden behind fixed headers, confusing keyboard users. So ensure offsets keep focused elements visible.

Options A, B, and C are incorrect or harmful for accessibility.

🧠 Conceptual

expert

Why use arbitrary properties in Tailwind CSS?

Which statement best explains the main advantage of using arbitrary properties like [text-shadow:2px_2px_4px_rgba(0,0,0,0.5)] in Tailwind CSS?

A They enable JavaScript to dynamically change CSS properties without reloading the page.

B They allow applying any CSS property value without needing to extend Tailwind's config or write custom CSS files.

C They replace the need for semantic HTML elements by styling everything inline.

D They automatically optimize CSS for better performance and smaller file size.

💡 Hint

Think about flexibility and avoiding extra setup.

Arbitrary properties let you use any CSS property directly in your class names, so you don't have to add new utilities in Tailwind config or write separate CSS files.

Options B, C, and D describe unrelated or incorrect benefits.

Practice

1. What is the main purpose of using arbitrary properties in Tailwind CSS?

easy

A. To add custom CSS styles not available in Tailwind's default classes

B. To remove all default Tailwind styles from an element

C. To write JavaScript code inside Tailwind classes

D. To create animations automatically without extra code

Solution

1. Step 1: Understand Tailwind's default classes

   Tailwind provides many utility classes but may not cover every CSS property you need.

2. Step 2: Purpose of arbitrary properties

   Arbitrary properties let you write any CSS property and value inside square brackets to extend Tailwind easily.

3. Final Answer:

   To add custom CSS styles not available in Tailwind's default classes -> Option A

4. Quick Check:

   Arbitrary properties = custom CSS in Tailwind [OK]

Hint: Think: 'Add any CSS style directly' [OK]

Common Mistakes:

• Confusing arbitrary properties with removing styles
• Thinking it runs JavaScript
• Assuming it creates animations automatically

2. Which of the following is the correct syntax to set a CSS property scroll-margin-top to 2rem using Tailwind's arbitrary properties?

easy

A. scroll-margin-top-[2rem]

B. [scroll-margin-top=2rem]

C. scroll-margin-top:2rem

D. [scroll-margin-top:2rem]

Solution

1. Step 1: Recall Tailwind arbitrary property syntax

   It uses square brackets with property and value separated by a colon, like [property:value].

2. Step 2: Match syntax to options

   Only [scroll-margin-top:2rem] matches the correct format: [scroll-margin-top:2rem].

3. Final Answer:

   [scroll-margin-top:2rem] -> Option D

4. Quick Check:

   Syntax = [property:value] [OK]

Hint: Use square brackets and colon for property:value [OK]

Common Mistakes:

• Using equal sign instead of colon
• Placing brackets incorrectly
• Omitting brackets entirely

3. What will be the rendered style of this HTML element?

<div class="[border-radius:1rem] bg-blue-500 p-4 text-white">Hello</div>

medium

A. A box with default border radius and no background color

B. A blue box with white text but no rounded corners

C. A blue box with white text and rounded corners of 1rem radius

D. A box with red background and sharp corners

Solution

1. Step 1: Analyze the classes

   The class [border-radius:1rem] sets border radius to 1rem. bg-blue-500 sets blue background. p-4 adds padding. text-white sets text color white.

2. Step 2: Visualize the result

   The div will show a blue box with white text and rounded corners of 1rem radius.

3. Final Answer:

   A blue box with white text and rounded corners of 1rem radius -> Option C

4. Quick Check:

   Arbitrary border-radius + bg-blue-500 = blue rounded box [OK]

Hint: Look for arbitrary property inside brackets for custom style [OK]

Common Mistakes:

• Ignoring arbitrary property effect
• Confusing background color classes
• Assuming default border radius

4. Identify the error in this Tailwind class usage:

<div class="[padding-top=2rem] text-center">Content</div>

medium

A. Using equal sign (=) instead of colon (:) inside brackets

B. Missing quotes around the class attribute

C. Incorrect property name; should be paddingTop

D. Arbitrary properties cannot be used with padding

Solution

1. Step 1: Check arbitrary property syntax

   Tailwind requires a colon between property and value inside brackets, like [padding-top:2rem].

2. Step 2: Identify the error

   The code uses an equal sign = which is invalid syntax.

3. Final Answer:

   Using equal sign (=) instead of colon (:) inside brackets -> Option A

4. Quick Check:

   Arbitrary syntax = colon, not equal sign [OK]

Hint: Use colon, never equal sign, inside arbitrary brackets [OK]

Common Mistakes:

• Using = instead of :
• Thinking camelCase is required
• Believing arbitrary properties can't style padding

5. You want to add a custom CSS property scroll-padding-left with value 3rem to a div using Tailwind. Which class should you use, and why might this be necessary?

hard

A. scroll-padding-left-[3rem] because brackets go around the value only

B. [scroll-padding-left:3rem] because Tailwind does not have a built-in class for this property

C. scroll-padding-left-3rem because Tailwind supports all scroll-padding classes by default

D. scroll-padding-left:3rem because colons are allowed directly in class names

Solution

1. Step 1: Recognize unsupported CSS property

   Tailwind does not provide default classes for scroll-padding-left.

2. Step 2: Use arbitrary property syntax

   To add unsupported CSS, use square brackets with property and value separated by colon: [scroll-padding-left:3rem].

3. Final Answer:

   [scroll-padding-left:3rem] because Tailwind does not have a built-in class for this property -> Option B

4. Quick Check:

   Unsupported CSS = use arbitrary property [OK]

Hint: Use brackets with property:value for unsupported CSS [OK]

Common Mistakes:

• Assuming Tailwind has built-in class for all CSS
• Placing brackets only around value
• Using colon directly in class without brackets