การใช้ตัวแปร CSS ใน Tailwind

CSS custom properties (also called CSS variables) let you define values once and reference them throughout your stylesheet. They are runtime values — they can be changed by JavaScript or by switching a class on a parent element. Combining CSS variables with Tailwind's config creates a powerful theming system: design tokens live in CSS variables, and Tailwind generates utility classes that reference those variables.

Wire CSS variables into Tailwind's config using the var(--variable-name) syntax as the value. This creates utility classes that output var() references in the generated CSS. At runtime, when the variable value changes (such as in dark mode or on theme switch), all elements using those utility classes update instantly without rebuilding the CSS or toggling additional classes.

When you want opacity modifier support (bg-primary/50) for CSS variable colors, Tailwind needs to know how to apply opacity. The trick is to store colors as space-separated RGB channel values and use the <alpha-value> placeholder in the config. Tailwind replaces this placeholder with the opacity fraction at compile time, generating correct rgba() or rgb(... / alpha) syntax.

The most elegant use of CSS variables in Tailwind is automatic dark mode without dark: prefixes everywhere. Define your semantic tokens (surface, text, border) as CSS variables and change their values in the .dark selector. Components using bg-surface automatically get the dark background — no extra classes needed on individual elements. This drastically reduces the amount of markup needed for dark mode.

CSS variables enable multiple themes beyond just light and dark. Define a set of CSS variables for each theme and apply different sets by toggling a data-theme attribute or class on the root element. Users can switch from your default blue theme to a green or high-contrast theme instantly, with all Tailwind utilities that reference those variables updating in real time.

Inside CSS files processed by Tailwind, the special theme() function lets you reference Tailwind theme values directly. Use it in custom CSS rules or @layer blocks to access your configured colors, spacing, and typography values. This is the inverse of the previous pattern — instead of CSS variables in the Tailwind config, you bring Tailwind token values into your CSS.

You can combine CSS variables with @apply in your custom CSS layers. Define a component class using @apply for most utilities, then use CSS variables for the values that need to change at runtime. This hybrid approach keeps your HTML lean while still enabling dynamic theming for the values that matter most to your design system.

Typography tokens like font size, line height, and letter spacing can also be defined as CSS variables and referenced in Tailwind's config. This enables responsive typography where JavaScript adjusts font-size variables based on viewport conditions, or a11y-friendly font scaling where users can increase text size and the variables cascade through the entire design system automatically.

CSS custom properties are supported in all modern browsers (Chrome, Firefox, Safari, Edge). They are NOT supported in Internet Explorer 11. If your project must support IE11, CSS variables cannot be used for theming. For all other projects (which is the vast majority today), CSS variables are a safe and powerful choice with excellent browser adoption across the global user base.

CSS variables are easy to inspect and debug in browser DevTools. Select any element and look at its Computed tab — you will see the resolved values of any CSS variables in play. The Elements panel shows the variable declaration in the cascade. You can even override CSS variable values directly in DevTools to preview theme changes without modifying code, which is excellent for rapid iteration on design tokens.

Use static config values for design tokens that never change at runtime — spacing scale, border radius scale, breakpoints, and font size scale. Use CSS variables for tokens that change based on theme, user preference, or runtime context — colors, surface backgrounds, text colors, and semantic design tokens. This division keeps the parts of your design system that vary at runtime in CSS, and the structural layout rules in the config where they are processed at build time.

Test your understanding of using CSS variables in Tailwind CSS.

In this lesson you learned: CSS variables in Tailwind's config create runtime-swappable design tokens, use the <alpha-value> placeholder with RGB channel variables for opacity modifier support, and semantic CSS variables swapped in a .dark or [data-theme] selector enable automatic theming without per-element dark: classes. Next up we dive into the @apply directive for extracting repeated utility patterns.