CSS variables with Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a CSS variable and why use it?

A CSS variable is a custom property that stores a value you can reuse throughout your styles. It helps keep your design consistent and makes updates easier by changing the value in one place.

beginner

How do you define a CSS variable in Tailwind's :root?

You define CSS variables inside the :root selector in your CSS file or inside a @layer base block in Tailwind. For example:

:root { --main-color: #4ade80; }

intermediate

How can you use a CSS variable inside Tailwind utility classes?

You can use the var(--variable-name) syntax inside Tailwind's theme.extend or directly in your CSS. For example, setting a background color: bg-[color:var(--main-color)] applies the CSS variable as a background color.

intermediate

Why combine CSS variables with Tailwind instead of only using Tailwind colors?

CSS variables let you change colors dynamically (like dark mode or themes) without rebuilding Tailwind classes. They add flexibility and make your design easier to maintain and customize.

intermediate

How do you update a CSS variable value for a dark mode theme in Tailwind?

You can override the CSS variable inside a dark mode selector. For example:

@media (prefers-color-scheme: dark) { :root { --main-color: #22c55e; } }

This changes the variable when dark mode is active.

Where do you usually define CSS variables for use with Tailwind?

A Inside the :root selector or @layer base in CSS

B Directly inside Tailwind config colors array

C Only inside HTML style attributes

D Inside JavaScript files

CSS variables are custom properties defined in CSS, usually inside the :root selector or Tailwind's @layer base for global access.

How do you reference a CSS variable in Tailwind utility classes?

A Using $variable-name directly

B You cannot use CSS variables in Tailwind classes

C Using --variable-name without var()

D Using var(--variable-name) inside square brackets, e.g., bg-[color:var(--main-color)]

Tailwind supports arbitrary values inside square brackets, so you can use CSS variables with var() syntax like bg-[color:var(--main-color)].

What is a main benefit of using CSS variables with Tailwind?

A They replace Tailwind colors completely

B They allow dynamic theming without rebuilding Tailwind classes

C They make Tailwind slower

D They only work in old browsers

CSS variables let you change colors or styles dynamically, such as switching themes, without needing to rebuild or change Tailwind classes.

How can you change a CSS variable for dark mode in Tailwind?

A You cannot change CSS variables for dark mode

B Change the Tailwind config colors only

C Override the variable inside a dark mode media query or class

D Use inline styles on every element

You override CSS variables inside a dark mode selector, such as @media (prefers-color-scheme: dark) or a .dark class, to change their values.

Which syntax is correct to define a CSS variable for a green color?

A :root { --main-green: #22c55e; }

B var(--main-green): #22c55e;

C --main-green: #22c55e;

D main-green = #22c55e;

CSS variables are defined inside selectors like :root with --variable-name: value; syntax.

Explain how to set up and use a CSS variable for colors in a Tailwind project.

Think about where CSS variables live and how Tailwind allows custom values.

Describe how CSS variables help implement dark mode in Tailwind.

Focus on how variable values change depending on theme.

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