Tailwind CSS Academy · レッスン

TailwindでのCSS変数の利用

デザイントークンをCSSカスタムプロパティとして定義し、Tailwind設定内で参照して、動的でテーマに対応した値を作成します。

レッスン 4/413 ステップ

「TailwindでのCSS変数の利用」はCoddyKit上の無料Tailwind CSS Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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時間対応のAIチューター）、Tailwind CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Tailwind CSS Academyコースには全4レッスンが含まれています。

「TailwindでのCSS変数の利用」で何を学びますか？

デザイントークンをCSSカスタムプロパティとして定義し、Tailwind設定内で参照して、動的でテーマに対応した値を作成します。ブラウザで直接実行するハンズオンコードでTailwind CSS Academyを演習し、24時間対応の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に戻る