mcpField
T
tailwind

tailwind

github.com/heygen-comテスト・品質74.7k70.9k 回インストール今日更新
リポジトリ

tailwind について

HyperFramesのコンポジション向けTailwind CSSスキルです。v4のブラウザーランタイムの使い方、スタイルの準備状態、決定論的なレンダリング上の注意点を扱います。

主な機能

  1. 01Tailwind v4ブラウザーランタイム向け
  2. 02@themeと@utilityによるスタイル定義
  3. 03動的クラス名による描画リスクの説明
  4. 04コンポジションの検証とレンダリング

活用シーン

  1. 01ユーティリティクラスでHyperFramesをスタイリング
  2. 02v3の設定方法からv4ブラウザーランタイムへの移行
  3. 03レンダリング時のスタイル欠落やちらつきの調査

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/heygen-com/hyperframes --skill tailwind

インストール後、Claude Code で/tailwindを入力して読み込まれたか確認します。

詳細

HyperFrames 向け Tailwind CSS

HyperFrames の init --tailwind は、@tailwindcss/[email protected] に固定された Tailwind ブラウザーランタイムを使用します。Tailwind v3 ではなく、v4 として扱ってください。

このスキルは CLI が生成するコンポジション HTML 向けです。内部で引き続き Tailwind v3、tailwind.config.js、PostCSS、@tailwind ディレクティブを使用している packages/studio 向けではありません。

使用するタイミング

  • ユーザーが HyperFrames のコンポジションで Tailwind を使いたい場合。
  • プロジェクトが hyperframes init --tailwind で作成された場合。
  • index.html に window.__tailwindReady がある場合。
  • ユーティリティクラス、CSS ファーストのテーマトークン、カスタムユーティリティ、または v3 から v4 への移行に関するガイダンスが必要な場合。
  • スタイルが適用されず、プロジェクトがブラウザーランタイムに依存している場合。

バージョン契約

  • 固定されたランタイム：@tailwindcss/[email protected]。
  • ブラウザーランタイムスクリプトは CLI によって挿入されます。cdn.tailwindcss.com に置き換えないでください。
  • HyperFrames は、フレームのキャプチャ開始前に window.__tailwindReady の完了を待ちます。
  • 準備完了のためのシムは決定論的な状態に保つ必要があります。レンダーループのポーリング API、時刻に基づく再試行、固定された Tailwind ランタイムスクリプト以外のランタイムでのネットワークリクエストは使用しないでください。
  • オフライン、制限されたネットワーク環境、または本番環境で安定したレンダリングが必要な場合は、ブラウザーランタイムに依存せず、Tailwind を CSS にコンパイルしてスタイルシートを直接含めてください。

v4 のルール

Tailwind v4 は CSS ファーストです。

<style type="text/tailwindcss">
  @theme {
    --color-brand: oklch(0.68 0.2 252);
    --font-display: "Inter", sans-serif;
  }

  @utility headline-balance {
    text-wrap: balance;
    letter-spacing: 0;
  }
</style>

ブラウザーランタイムを使うコンポジションでは、v3 のセットアップパターンを避けてください。

/* Do not use these in Tailwind v4 browser-runtime compositions. */
@tailwind base;
@tailwind components;
@tailwind utilities;

v4 のブラウザーランタイムを使うコンポジションで、色、フォント、間隔、ユーティリティを定義するだけのために tailwind.config.js を追加しないでください。text/tailwindcss のスタイルブロック内で @theme と @utility を使用してください。

コンパイル済みの v4 ビルドで既存の JavaScript 設定ファイルが本当に必要な場合は、CSS から @config で明示的に読み込み、ブラウザーで検証してください。v4 が v3 の設定ファイルを自動検出すると想定しないでください。

HyperFrames のコンポジションパターン

静的なレイアウトとビジュアルスタイルは Tailwind に任せます。モーションのタイミングは GSAP または別のシーク可能なアダプターで管理します。

<section
  class="clip absolute inset-0 grid place-items-center bg-zinc-950 text-white"
  data-start="0"
  data-duration="5"
  data-track-index="1"
>
  <div class="w-[1280px] max-w-[82vw] text-center">
    <p class="mb-6 text-xl font-medium uppercase tracking-[0.18em] text-cyan-300">
      Render-ready Tailwind
    </p>
    <h1 class="text-7xl font-black leading-none text-balance">
      Utility classes, deterministic frames.
    </h1>
  </div>
</section>

繰り返し項目には、クラス名を動的に生成するのではなく、クラスリストと CSS カスタムプロパティを使うことをおすすめします。

<span class="inline-block translate-y-[calc(var(--i)*6px)] opacity-80" style="--i: 0"></span>
<span class="inline-block translate-y-[calc(var(--i)*6px)] opacity-80" style="--i: 1"></span>
<span class="inline-block translate-y-[calc(var(--i)*6px)] opacity-80" style="--i: 2"></span>

動的クラスの安全性

Tailwind のブラウザーランタイムは現在のドキュメントをスキャンし、認識できるクラス名の CSS を生成します。シーク時にのみ生成されるクラス名に、レンダリングに不可欠なスタイルを依存させないでください。

// Risky: Tailwind may not see every generated class before capture.
element.className = `bg-${color}-500`;

代わりに、HTML、データ属性、または明示的な CSS に完全なクラス名を記述してください。

<div data-tone="blue" class="bg-blue-500 data-[tone=rose]:bg-rose-500"></div>

生成クラスが避けられない場合は、検証前に、そのクラスの完全なトークンが text/tailwindcss ブロック内にあることを確認してください。

動画固有の注意事項

  • 動画レイアウトには、w-[...]、h-[...]、aspect-video、grid、flex、固定パディングなど、安定した寸法を使用してください。
  • アニメーションするプロパティには、トランスフォームと不透明度を優先してください。
  • シーク可能なランタイムが状態を管理しない限り、レンダリングに不可欠なタイミング制御に Tailwind のトランジションを使用しないでください。
  • 決定論的なレンダリングが必要なコンテンツでは、ホバー、フォーカス、スクロール、ビューポート、ポインターの各バリアントを避けてください。
  • 枠線の色を明示してください。Tailwind v4 では v3 からデフォルトの枠線の挙動が変更されているため、border のみよりも border border-white/20 のほうが安全です。
  • v4 のユーティリティ名を使用してください。該当する置き換えには shadow-xs、rounded-xs、outline-hidden、shrink-*、grow-* を使います。
  • 古いブラウザーへの対応が必要な場合は、最新の CSS ユーティリティに注意してください。Tailwind v4 は最新のブラウザーを対象としています。

検証

Tailwind が有効なコンポジションを編集した後は、次を実行してください。

npx hyperframes lint
npx hyperframes validate
npx hyperframes inspect

レンダリングを確認するには、次を実行してください。

npx hyperframes render . --workers 1 --quality draft --output tailwind-proof.mp4

検証時にフレーム 0 でスタイルが適用されない瞬間がないことを確認してください。プレビューではスタイルが表示されるのにレンダリングでは表示されない場合は、window.__tailwindReady が存在し、キャプチャ開始前に解決されることを確認してください。

クイックデバッグチェックリスト

  1. プロジェクトが hyperframes init --tailwind でスキャフォールディングされていることを確認します。
  2. スクリプトが @tailwindcss/[email protected] を参照していることを確認します。
  3. window.__tailwindReady が存在することを確認します。
  4. v3 の @tailwind ディレクティブを v4 のブラウザーランタイム CSS に置き換えます。
  5. カスタムトークンを tailwind.config.js から @theme に移します。
  6. 動的に組み立てられたクラスを、完全な静的トークンに置き換えます。
  7. npx hyperframes validate を実行し、短い検証用の出力をレンダリングします。

クレジットと参考資料

  • Tailwind CSS 公式の v4 インストール、アップグレード、互換性に関するドキュメント：https://tailwindcss.com/docs
  • Tailwind CSS v4 リリースノート：https://tailwindcss.com/blog/tailwindcss-v4
  • コミュニティによる Tailwind スキルを、v4 固有の注意点とスキルの構成の参考として確認しましたが、このスキルでは長期的に維持される契約をリポジトリ内に保持し、HyperFrames 固有の内容にしています。

コメント

Markdown 対応