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:<br>

: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:<br>

@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.