Tailwind CSS Academy · 강의

Tailwind에서 CSS 변수 사용하기

디자인 토큰을 CSS 사용자 지정 속성으로 정의하고 Tailwind 구성 파일 안에서 참조해 동적이고 테마를 인식하는 값을 만듭니다.

레슨 4/413개 단계

Tailwind에서 CSS 변수 사용하기은(는) CoddyKit의 무료 Tailwind CSS Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Tailwind CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

CSS Custom Properties as Design Tokens

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.

/* CSS variables defined in :root */
:root {
  --color-primary: #6366f1;
  --color-surface: #ffffff;
  --color-on-surface: #111827;
  --spacing-section: 5rem;
}

/* Dark mode swaps values without changing class names */
.dark {
  --color-surface: #1f2937;
  --color-on-surface: #f9fafb;
}

Referencing CSS Variables in Tailwind Config

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.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        surface: 'var(--color-surface)',
        'on-surface': 'var(--color-on-surface)',
      },
      spacing: {
        section: 'var(--spacing-section)',
      },
    },
  },
};

The alpha-value Placeholder for Opacity

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.

/* CSS: store as RGB channels, not hex */
:root {
  --color-primary: 99 102 241;   /* R G B without rgb() wrapper */
}
.dark {
  --color-primary: 129 140 248;  /* lighter shade for dark mode */
}

/* tailwind.config.js */
colors: {
  primary: 'rgb(var(--color-primary) / <alpha-value>)',
}

<!-- Now opacity modifier works -->
<div class="bg-primary/50">  <!-- 50% opacity primary background -->

Automatic Dark Mode With CSS Variables

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 */
:root {
  --surface: 255 255 255;   /* white */
  --on-surface: 17 24 39;   /* gray-900 */
}
.dark {
  --surface: 31 41 55;      /* gray-800 */
  --on-surface: 249 250 251; /* gray-50 */
}

<!-- tailwind.config.js adds: bg-surface, text-on-surface -->

<!-- HTML: no dark: prefix needed! -->
<div class="bg-surface text-on-surface p-6 rounded-xl">
  Automatically adapts to dark mode via CSS variable swap
</div>

Multi-Theme Switching at Runtime

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.

/* Multiple brand themes using data-theme */
:root, [data-theme='blue'] {
  --color-accent: 99 102 241;
}
[data-theme='green'] {
  --color-accent: 22 163 74;
}
[data-theme='orange'] {
  --color-accent: 234 88 12;
}

<!-- Toggle themes with JavaScript -->
<script>
  document.documentElement.setAttribute('data-theme', 'green');
</script>

Using the theme() Function in CSS

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.

/* Using theme() function in CSS */
@layer components {
  .btn-primary {
    background-color: theme('colors.blue.600');
    padding: theme('spacing.3') theme('spacing.6');
    border-radius: theme('borderRadius.lg');
    font-weight: theme('fontWeight.semibold');
    color: theme('colors.white');
  }

  .btn-primary:hover {
    background-color: theme('colors.blue.700');
  }
}

Combining CSS Variables and @apply

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.

@layer components {
  .card {
    @apply rounded-xl border p-6 shadow-sm;
    background-color: rgb(var(--surface) / 1);
    color: rgb(var(--on-surface) / 1);
    border-color: rgb(var(--border) / 1);
  }

  .card-header {
    @apply font-semibold text-lg mb-4 pb-4;
    border-bottom: 1px solid rgb(var(--border) / 1);
  }
}

CSS Variables for Typography Tokens

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.

/* Typography tokens as CSS variables */
:root {
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --line-height-normal: 1.5;
  --font-weight-heading: 700;
}

/* tailwind.config.js */
theme: {
  extend: {
    fontSize: {
      'token-base': 'var(--font-size-base)',
      'token-lg': 'var(--font-size-lg)',
    },
  },
}

Browser Support Considerations

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 work in all modern browsers */
/* Browser support: Chrome 49+, Firefox 31+, Safari 9.1+, Edge 15+ */

/* For IE11 fallback (if required): */
.button {
  background-color: #6366f1;            /* IE11 fallback */
  background-color: var(--color-primary); /* modern browsers override above */
}

Inspecting CSS Variables in DevTools

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.

CSS Variables vs Config Values: When to Use Which

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.

Quick Check

Test your understanding of using CSS variables in Tailwind CSS.

인터랙티브 레슨에서 답해보세요

Lesson Recap

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.

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 30
레슨: 120

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“Tailwind에서 CSS 변수 사용하기” 강의는 무료인가요?

네 — “Tailwind에서 CSS 변수 사용하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Tailwind CSS Academy 강의 전체를 잠금 해제할 수 있습니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Tailwind에서 CSS 변수 사용하기”에서 뭘 배우나요?

디자인 토큰을 CSS 사용자 지정 속성으로 정의하고 Tailwind 구성 파일 안에서 참조해 동적이고 테마를 인식하는 값을 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 Tailwind CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Tailwind CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Tailwind CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“Tailwind에서 CSS 변수 사용하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Tailwind CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Tailwind CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Tailwind CSS Academy(으)로 돌아가기