CSS Variables & Theming FAQs

Question 1

How do I use theme variables with Tailwind CSS?

Accepted Answer

You can use Tailwind's arbitrary value syntax by destructuring themeVars.vars and injecting them into classes, such as className={`z-[${zIndex.popup}]`}.

Question 2

What is the advantage of using the prepareCssVars utility?

Accepted Answer

It automatically generates CSS custom property declarations for the :root element and provides a corresponding TypeScript object for type-safe variable referencing.

Question 3

Should I use these variables for spacing and colors?

Accepted Answer

No, per base-joy best practices, spacing should use standard Tailwind classes and colors should be handled via ColorContext. Use this for Z-index and animations.

Question 4

How are animation tokens structured?

Accepted Answer

Tokens are categorized into popup specific (duration/scale/opacity), general durations (fast/normal/slow), and easing functions (standard/accelerate/decelerate).

Question 5

Does this skill support runtime theme switching?

Accepted Answer

Yes, by passing a custom theme object to the ThemeProvider, CSS variables are updated globally without needing to recompile styles.

CSS Variables & Theming

Key Features

Use Cases

CSS Variables & Theming

Key Features

Use Cases