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.