CSS variables with Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding CSS Variables in Tailwind

Which statement correctly describes how CSS variables can be used with Tailwind CSS?

A CSS variables can be defined in a <style> block or external CSS and then referenced inside Tailwind utility classes using var(--variable-name).

B Tailwind automatically converts all CSS variables into fixed colors during build time, so you cannot use var() inside Tailwind classes.

C CSS variables cannot be used with Tailwind CSS because Tailwind only supports fixed values.

D CSS variables must be declared inside Tailwind config file to be used in utility classes.

💡 Hint

Think about how CSS variables work in normal CSS and how Tailwind utilities can reference them.

CSS variables are standard CSS features. You can define them anywhere in CSS and then use var(--variable-name) inside Tailwind utility classes by using square bracket notation, e.g., bg-[var(--my-color)].

📝 Syntax

intermediate

Using CSS Variables in Tailwind Utility Classes

Which Tailwind class correctly applies a background color using a CSS variable named --main-bg?

A bg--main-bg

B bg-var(--main-bg)

C bg-[var(--main-bg)]

D bg(var(--main-bg))

💡 Hint

Tailwind uses square brackets to allow arbitrary values.

To use a CSS variable in Tailwind, you wrap the var(--variable) inside square brackets after the utility prefix, like bg-[var(--main-bg)].

❓ rendering

advanced

Visual Result of CSS Variable with Tailwind

Given the CSS and HTML below, what color will the box's background be when rendered in the browser?

Tailwind

/* CSS */
:root {
  --box-color: #4ade80;
}

/* HTML */
<div class="w-40 h-40 bg-[var(--box-color)]"></div>

A A green box with a background color #4ade80

B A box with no background color (transparent)

C A box with a red background color

D The box will not render due to invalid CSS

💡 Hint

Check the CSS variable value and how it is used in the Tailwind class.

The CSS variable --box-color is set to a green shade (#4ade80). The Tailwind class uses bg-[var(--box-color)] to apply that color as background, so the box will appear green.

❓ selector

advanced

Targeting Elements with CSS Variables and Tailwind

You want to create a button that changes its text color based on a CSS variable --btn-text. Which Tailwind class correctly applies this text color?

A text--btn-text

B text-[var(--btn-text)]

C text-var(--btn-text)

D text(var(--btn-text))

💡 Hint

Remember how Tailwind handles arbitrary values with square brackets.

Tailwind uses square brackets to accept arbitrary CSS values. To use a CSS variable for text color, write text-[var(--btn-text)].

❓ accessibility

expert

Ensuring Accessibility with CSS Variables and Tailwind

You use a CSS variable --primary-color for background and text colors in Tailwind. What is the best practice to ensure good accessibility (color contrast) for all users?

A Set the CSS variable colors only for light mode and ignore dark mode contrast.

B Use any colors you like in CSS variables because Tailwind automatically adjusts contrast.

C Avoid using CSS variables for colors and only use Tailwind's default color palette for accessibility.

D Define the CSS variable with colors that meet WCAG contrast standards and test with tools; update variables if needed.

💡 Hint

Accessibility means good contrast and testing with real tools.

Accessibility requires colors to have enough contrast. When using CSS variables, you must define colors that meet these standards and test them. Tailwind does not automatically fix contrast issues.

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