Arbitrary properties for unsupported CSS in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a custom CSS property using Tailwind's arbitrary properties syntax.

Tailwind

<div class="[1]">Hello World</div>

Drag options to blanks, or click blank then click option'

A[scrollbar-width:thin]

B[bg-blue-500]

C[color:red]

D[font-size:2rem]

Attempts:

3 left

💡 Hint

Common Mistakes

Using Tailwind utility classes without brackets for unsupported CSS properties.

Forgetting the colon between property and value inside brackets.

Tailwind allows arbitrary CSS properties inside square brackets. Here, [scrollbar-width:thin] sets a custom scrollbar width.

2fill in blank

medium

Complete the code to set a custom CSS property for the border radius using Tailwind's arbitrary properties.

Tailwind

<button class="rounded [1]">Click me</button>

Drag options to blanks, or click blank then click option'

A[border-radius:1.5rem]

B[border-radius:10px]

C[border-radius:5rem]

D[border-radius:50%]

Attempts:

3 left

💡 Hint

Common Mistakes

Using percentage values when pixels are expected.

Omitting the square brackets.

Using [border-radius:10px] applies a 10px border radius as a custom CSS property in Tailwind.

3fill in blank

hard

Fix the error in the Tailwind class that tries to set a custom CSS property for text shadow.

Tailwind

<p class="text-lg [1]">Shadow text</p>

Drag options to blanks, or click blank then click option'

A[text-shadow:2px,2px,4px,rgba(0,0,0,0.5)]

B[text-shadow:2px_2px_4px_rgba(0,0,0,0.5)]

C[text-shadow='2px 2px 4px rgba(0,0,0,0.5)']

D[text-shadow:2px 2px 4px rgba(0,0,0,0.5)]

Attempts:

3 left

💡 Hint

Common Mistakes

Replacing spaces with underscores or commas inside the CSS value.

Using quotes inside the brackets incorrectly.

Spaces must be used inside the CSS value, not underscores or commas. Also, use colon and square brackets for arbitrary properties.

4fill in blank

hard

Fill both blanks to create a div with a custom CSS property for backdrop blur and a custom color using Tailwind arbitrary properties.

Tailwind

<div class="[1] [2] p-4">Blurred background</div>

Drag options to blanks, or click blank then click option'

A[backdrop-filter:blur(5px)]

B[backdrop-blur:5px]

C[background-color:#ff6347]

D[bg:#ff6347]

Attempts:

3 left

💡 Hint

Common Mistakes

Using Tailwind's backdrop-blur utility instead of arbitrary property.

Using incorrect syntax for background color.

Use [backdrop-filter:blur(5px)] for blur effect and [background-color:#ff6347] for a custom tomato color background.

5fill in blank

hard

Fill all three blanks to create a paragraph with a custom font size, line height, and letter spacing using Tailwind arbitrary properties.

Tailwind

<p class="[1] [2] [3]">Custom text style</p>

Drag options to blanks, or click blank then click option'

A[font-size:1.25rem]

B[line-height:1.75]

C[letter-spacing:0.05em]

D[font-weight:bold]

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up units or forgetting square brackets.

Using Tailwind utility classes instead of arbitrary properties.

Use arbitrary properties [font-size:1.25rem], [line-height:1.75], and [letter-spacing:0.05em] to style text precisely.

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