CSS variables with Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a CSS variable for primary color in Tailwind.

Tailwind

:root { --primary-color: [1]; }

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

A#3490dc

Btext-blue-500

Cprimary

Dblue-600

Attempts:

3 left

💡 Hint

Common Mistakes

Using Tailwind class names instead of color codes.

Leaving the value empty or invalid.

The CSS variable must be assigned a valid color value like a hex code. '#3490dc' is a blue hex color.

2fill in blank

medium

Complete the Tailwind class to use the CSS variable for background color.

Tailwind

<div class="bg-[[1]] p-4 text-white">Hello</div>

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

Aprimary-color

Bvar(--primary-color)

C--primary-color

Dvar(primary-color)

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting 'var()' function.

Missing the double dash '--' in the variable name.

To use a CSS variable in Tailwind's arbitrary value syntax, use 'var(--variable-name)'.

3fill in blank

hard

Fix the error in the Tailwind class to correctly apply the CSS variable as text color.

Tailwind

<p class="text-[[1]]">Welcome!</p>

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

Avar(--primary-color)

B--primary-color

Cprimary-color

Dvar(primary-color)

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable name without 'var()'.

Missing the double dash '--' in the variable name.

The correct syntax to use a CSS variable in Tailwind arbitrary values is 'var(--variable-name)'.

4fill in blank

hard

Fill both blanks to create a CSS variable and use it for border color in Tailwind.

Tailwind

:root { [1]: #e3342f; } <div class="border-2 border-[[2]] p-2">Alert</div>

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

A--danger-color

Bvar(--danger-color)

C--alert-color

Ddanger-color

Attempts:

3 left

💡 Hint

Common Mistakes

Defining variable without '--'.

Using variable name without 'var()' in Tailwind.

Define the CSS variable with '--danger-color' and use it with 'var(--danger-color)' in Tailwind.

5fill in blank

hard

Fill all three blanks to define a CSS variable, use it for background and text color in Tailwind.

Tailwind

:root { [1]: #38c172; --white: #ffffff; } <button class="bg-[[2]] text-[[3]] px-4 py-2 rounded">Click me</button>

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

A--success-color

Bvar(--success-color)

Cvar(--white)

D--white

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names without '--' when defining.

Omitting 'var()' when using variables in Tailwind.

Confusing variable names for text color.

Define '--success-color' variable, use 'var(--success-color)' for background, and 'var(--white)' for text color.