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.