Tailwind 4 で Typesafe デザイン トークンを探索する

Tailwind 4 はしばらく前から構想があり、チームは 2024 年 3 月に進捗状況を初めてオープンソース化しました。私の意見では、最も注目すべき変更の 1 つは、この変更です。 JavaScript ベースの構成から CSS ベースの構成へ。 Tailwind 4 は現在ベータ版であり、私が収集した情報によると、チームは特に Safari との互換性に関して、まだいくつかの課題に取り組んでいます。

注: この記事の後半では、コンポーネントベースのフレームワーク/ライブラリを使用していることを前提としますが、ここで説明する概念は他のアプローチにも簡単に応用できます。

テイルウィンド 4 の変更点

CSS 構成への移行

これについて、特に TypeScript ユーザーからいくつかの苦情を聞きました。ただし、Tailwind 4.0 のロードマップには、最優先事項として従来の tailwind.config.js のサポートが含まれています。

JavaScript 構成ファイルのサポート — 従来の tailwind.config.js ファイルとの互換性を再導入し、v4 への移行を容易にします。

とはいえ、これは主に移行を目的としているようで、持続可能な長期的なソリューションではない可能性があります。

これはタイプセーフティにとって何を意味しますか

Tailwind 4 は内部で新しい @property CSS ルールを使用して内部カスタム プロパティを定義します。

@property を使用して、適切な型と制約を持つ内部カスタム プロパティを定義します

現状では、VS コードで @property ルールをサポートする適切な構文ハイライトを見つけることができません。私よりも幸運な人がいるかどうかを確認するために Bluesky に連絡しました。

将来的には @property のサポートが改善されることを願っています。詳細については後ほど説明します。

@property CSS ルールとは何ですか

@property ルールは、JavaScript を実行することなく、スタイルシート内で直接カスタム プロパティの登録を表します。有効な @property ルールによりカスタム プロパティが登録されます。これは、同等のパラメーターを指定して registerProperty() を呼び出すのと似ています。

デザイントークンとは

Tailwind 4 の今後の変更とその潜在的な影響について説明したので、デザイン トークンについてお話しましょう。この用語に馴染みがない方のために、簡単に説明します。デザイン トークンは、デザイン上の決定を一貫した再利用可能な形式 (通常は変数) で保存および管理する方法です。これらは、色、タイポグラフィ、間隔、影などのデザイン システムの主要な視覚的プロパティを構造化された方法で表します。目標は、これらの設計値を一元管理して、さまざまなプラットフォームやツール間で簡単に更新、保守、共有できるようにすることです。

設計システムは通常、システム値とコンポーネント値という 2 つの主なタイプの値で構成されます。たとえば、システム値は次のようになります:

const SYSTEM_TOKENS: ISystemTokens = {
  /* ... */
  COLORS: {
    /* ... */
    GREEN: {
      LIGHT: "#E0E5D9",
      MEDIUM: "#3F6212",
      DARK: "#28331A",
    }
    /* ... */
  },
  TYPOGRAPHY: {
    /* ... */
  }
  /* ... */
}

その後、次のようにコンポーネント トークン内でシステム値を参照できます。

import { SYSTEM_TOKENS } from "...";

const BUTTON_VALUES: IButtonTokens = {
  /* ... */
  COLORS: {
    /* ... */
    BACKGROUND: SYSTEM_TOKENS.COLORS.GREEN.DARK,
    /* ... */
  },
  TYPOGRAPHY: {
    /* ... */
  }
  /* ... */
}

デザイン システムについてさらに詳しく知りたい場合は、マテリアル デザインなどのよく知られたシステムを検討する価値があります。

Tailwind を使用したコンポーネント設計トークンの構築

約 1 週間前、Tailwind CSS でコンポーネント バリアントを作成するために使用してきた代替アプローチについて説明する記事を書きました。簡単に説明すると、この記事では、Tailwind とともに CSS 変数を活用して複雑なバリアントを管理し、動的なコンポーネント プロパティと変数マッピングを通じてバリアント値をインラインで設定する方法を検討します。私がどのようにしてこのアプローチにたどり着いたかについて興味がある場合は、ここで詳しく読むことができます: Tailwind CSS を使用してコンポーネント バリアントを記述するための別のアプローチ

デザイントークンに依存するコンポーネントの部分を特定することから始める必要があります。前述したように、これには、色、タイポグラフィ、間隔、およびデザインに不可欠なその他の固定システム値が含まれます。デザイン トークンなしで、次の Button コンポーネントを見てみましょう:

<button>



<p>In the example above, we can pinpoint several values that can be tokenized. Each of the following classes could correspond to a value in our design system:</p>

<ul>
<li>p-4</li>
<li>bg-red</li>
<li>text-white</li>
</ul>

<p>Now that we've identified the values that can be tokenised, we can categorise them into two groups: static values and dynamic values. Static values are those in your component that remain constant, while dynamic values are those that can change based on the props passed to the component. For our example we'll make the padding (p-4) static, while the text colour (text-white) and background (bg-red) should be set dynamically via a theme prop.</p>

<h3>
  
  
  Creating the tokens
</h3>

<h4>
  
  
  Tailwind 4 config
</h4>

<p>First we need to define our System tokens in the new Tailwind CSS config:<br>
</p>

<pre class="brush:php;toolbar:false">@import "tailwindcss";

@theme {
  --color-white: #FFFFFF;
  --color-green-light: #E0E5D9;
  --color-green-medium: #3F6212;
  --color-green-dark: #28331A;
  --color-red-light: #F4CCCC;
  --color-red-medium: #D50000;
  --color-red-dark: #640000;

  --spacing-sm: 1rem;
  --spacing-md: 2rem;
}

システムトークン

次に、system.tokens.ts ファイルを作成する必要があります。

export type TColor = "--color-white" | "--color-green-light" | "--color-green-medium" | "--color-green-dark" | "--color-red-light" | "--color-red-medium" | "--color-red-dark";

export type TSpacing = "--spacing-sm" | "--spacing-md";


interface ISystemTokens {
  COLORS: {
    WHITE: TColor;
    GREEN: {
      LIGHT: TColor;
      MEDIUM: TColor;
      DARK: TColor;
    },
    RED: {
      LIGHT: TColor;
      MEDIUM: TColor;
      DARK: TColor;
    }
  },
  SPACING: {
    SMALL: TSpacing;
    MEDIUM: TSpacing;
  }
}

export const  SYSTEM_TOKENS: ISystemTokens {
  COLORS: {
    WHITE: "--color-white";
    GREEN: {
      LIGHT: "--color-green-light";
      MEDIUM: "--color-green-light";
      DARK: "--color-green-light";
    },
    RED: {
      LIGHT: "--color-red-light";
      MEDIUM: "--color-red-medium";
      DARK: "--color-red-dark";
    }
  },
  SPACING: {
    SMALL: "--spacing-sm";
    MEDIUM: "--spacing-md";
  }
}

システム デザイン トークンは、次のようにデザイン内で参照できます。
$system.COLORS.GREEN.LIGHT.

理想的な世界では、SCSS インポートを JavaScript に変換するのと同じように、CSS ファイルの @property ルールから TColor および TSpacing タイプにタイプを直接エクスポートできます。残念ながら、現時点では、私の知る限り、これは不可能です。

コンポーネントトークン

システム トークンを実装したので、コンポーネントへの統合を開始できます。最初のステップは、.tokens.ts ファイルを設定することです。これを説明するために、前に見た Button コンポーネントの例を取り上げ、対応する Button.tokens.ts ファイルを作成してみましょう。

要約すると、Button コンポーネントの構造は次のとおりです。

<button>



<p>Earlier, we discussed the distinction between static values (like p-4) and dynamic values (like bg-red and text-white). This distinction will guide how we organise our design tokens. Static properties, like p-4, should be grouped under STATIC, while dynamic properties, like bg-red and text-white, should be grouped under the appropriate prop identifier. In this case, since we’re controlling bg-red and text-white through a theme prop, they should be placed under the THEME section in our tokens file. For our example we'll assume 2 theme variables - PRIMARY and SECONDARY.<br>
</p>

<pre class="brush:php;toolbar:false">import { SYSTEM_TOKENS, TColor, TSpacing } from "./system.tokens.ts";
import { TTheme } from "./Button"; // PRIMARY, SECONDARY

interface IButtonStaticTokens {
  padding: TSpacing;
}

interface IButtonThemeTokens {
  backgroundColor: TColor;
  textColor: TColor;
}

export const STATIC: IButtonStaticTokens {
  padding: "--spacing-sm";
}

export const THEME: IButtonStaticTokens {
  PRIMARY: {
    backgroundColor: "--color-red-dark";
    textColor: "--color-red-light";
  },
  SECONDARY: {
    backgroundColor: "--color-green-dark";
    textColor: "--color-green-light";
  };
}

コンポーネント デザイン トークンは、$component.Button.THEME.PRIMARY.backgroundColor のようにデザイン内で参照できます。私の好みの命名規則は次のとおりです:
$component...tokenName

$component: $system トークンと $component トークンを区別します
: コンポーネントの内部ファイル命名規則に従います
PROP_NAME: 定数ケース
PROP_VALUE: 内部プロパティ値の大文字と小文字に従う必要があります
トークン名(backgroundColor): キャメルケース*

これは最終的には個人の好みの問題であり、自分のワークフローに何が最適かを決めるのはあなた次第です。

• トークンに名前を付けるとき、:hover など、要素の状態のトークンを指定する必要がある場合は、キャメル ケースから少し逸脱します。そのような場合は、hover__backgroundColor.
のように、トークン名の先頭に状態を付け、その後に 2 つのアンダースコアを付けます。

コンポーネントでのデザイントークンの使用

記事の前半で述べたように、Tailwind CSS を使用してコンポーネント バリアントを作成するための別のアプローチを検討することについて以前に書きました。ここではそのアプローチについて言及するので、まだ読んでいない場合は、このメソッドの背後にあるコンテキストを理解するために最初に確認すると役立つかもしれません。

記事のこの部分では、JavaScript フレームワークまたはライブラリを使用してコンポーネントを構築していることを前提としています。

ボタンコンポーネントの更新

既存のトークン化可能なクラスを、CSS 変数を利用した Tailwind クラスに置き換える必要があります。変数名は、2 つのボタン コンポーネントのトークン インターフェイス、IButtonStaticTokens および IButtonThemeTokens;
の変数名と一致していることに注意してください。

<p>クラスを更新したので、コンポーネント スタイルを動的に適用し、変数を更新する必要があります。これを実現するには、コンポーネントで variableMap 関数を使用します。基本的に、この関数は Button.tokens.ts のトークンをコンポーネント上のインライン CSS 変数に直接マップし、クラスが参照できるようにします。変数マップの例については、この記事の最後を参照してください。<br>
</p>

<pre class="brush:php;toolbar:false">
  



<h2>
  
  
  結論
</h2>

<p>Tailwind 4 のリリースと、現在とそれ以降でチームがどのような変化を起こすかを楽しみにしています。私は、デザイントークン、バリアント、タイプセーフティに関するいくつかの課題に対処するためのアイデアを実験するのを楽しんでいます。</p>

<p>これは実験的なアプローチであり、強い意見があると思います。</p>

<p>この記事が興味深い、または役立つと思われた場合は、Bluesky (ここで最もアクティブです)、Medium、Dev、Twitter で私をフォローしてください。</p>


          

            
        

以上がTailwind 4 で Typesafe デザイン トークンを探索するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。