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.

Practice

1. What is the main benefit of using CSS variables with Tailwind CSS?

easy

A. They make your CSS files larger and slower to load.

B. They automatically generate new classes for every color.

C. They replace the need for Tailwind utility classes.

D. They allow you to reuse values like colors and spacing easily.

Solution

1. Step 1: Understand CSS variables purpose

   CSS variables store values like colors or spacing to reuse them easily.

2. Step 2: Connect with Tailwind usage

   Tailwind supports CSS variables to keep design consistent and easy to update.

3. Final Answer:

   They allow you to reuse values like colors and spacing easily. -> Option D

4. Quick Check:

   CSS variables = reuse values [OK]

Hint: CSS variables store reusable values for consistency [OK]

Common Mistakes:

• Thinking CSS variables replace Tailwind classes
• Believing CSS variables slow down CSS loading
• Assuming CSS variables auto-generate classes

2. Which is the correct way to use a CSS variable for color in Tailwind's arbitrary value syntax?

easy

A. bg-[var(--main-color)]

B. bg-var(--main-color)

C. bg-[--main-color]

D. bg-[var(main-color)]

Solution

1. Step 1: Recall Tailwind arbitrary value syntax

   Tailwind uses square brackets for arbitrary values, e.g., bg-[value].

2. Step 2: Use correct CSS variable syntax inside brackets

   CSS variables use var(--variable-name), so bg-[var(--main-color)] is correct.

3. Final Answer:

   bg-[var(--main-color)] -> Option A

4. Quick Check:

   Arbitrary value with var() = bg-[var(--main-color)] [OK]

Hint: Use bg-[var(--name)] for CSS variables in Tailwind [OK]

Common Mistakes:

• Omitting var() function
• Missing square brackets around the value
• Using incorrect variable syntax like var(main-color)

3. Given this CSS: :root { --btn-color: #4ade80; } and this Tailwind class: class="bg-[var(--btn-color)] p-4 rounded", what color will the button background be?

medium

A. Default Tailwind blue color.

B. No background color applied.

C. A bright green color (#4ade80).

D. An error will occur and no style applied.

Solution

1. Step 1: Identify CSS variable value

   The variable --btn-color is set to #4ade80, a bright green color.

2. Step 2: Understand Tailwind usage

   The class bg-[var(--btn-color)] uses that variable for background color.

3. Final Answer:

   A bright green color (#4ade80). -> Option C

4. Quick Check:

   CSS var used correctly = green background [OK]

Hint: Check CSS variable value to predict Tailwind color output [OK]

Common Mistakes:

• Assuming Tailwind default color overrides variable
• Thinking variable is ignored without explicit Tailwind color
• Believing syntax causes error

4. What is wrong with this Tailwind class if the CSS variable is defined as --text-color: #333;?
class="text-[var(text-color)] font-bold"

medium

A. Missing double dash before variable name inside var().

B. Square brackets are not allowed in Tailwind classes.

C. CSS variables cannot be used with text color in Tailwind.

D. font-bold conflicts with text color variable.

Solution

1. Step 1: Check CSS variable syntax

   CSS variables require two dashes: --text-color, so var(--text-color) is correct.

2. Step 2: Identify error in class

   The class uses var(text-color) missing the double dash, causing invalid variable reference.

3. Final Answer:

   Missing double dash before variable name inside var(). -> Option A

4. Quick Check:

   CSS var syntax needs -- before name [OK]

Hint: Always use -- before variable name inside var() [OK]

Common Mistakes:

• Omitting -- in CSS variable name
• Thinking font-bold affects color variables
• Believing square brackets are invalid in Tailwind

5. You want to create a reusable button style in Tailwind that uses a CSS variable for background color and changes on hover. Which code snippet correctly applies this using CSS variables and Tailwind?

hard

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Use correct CSS variable syntax in Tailwind

   Tailwind requires arbitrary values in brackets with var(--variable), so bg-[var(--btn-bg)] is correct.

2. Step 2: Apply hover state correctly

   Hover uses hover:bg-[var(--btn-hover)] to change background on hover properly.

3. Final Answer:

   <button class='bg-[var(--btn-bg)] hover:bg-[var(--btn-hover)] text-white px-4 py-2 rounded'>Click me</button> -> Option B

4. Quick Check:

   Correct var() syntax + hover state = Click me [OK]

Hint: Use bg-[var(--name)] and hover:bg-[var(--name)] for hover colors [OK]

Common Mistakes:

• Omitting var() or -- in variable names
• Using bg-var() without brackets
• Incorrect hover syntax without hover: prefix