Tailwindcss v4がリリースされたので触ってみた

これまで参画してきたプロダクトがtailwindcssを使っているところがなく、個人的に少し触っていた程度なのですが、最近朝活にハマり時間を持て余すようになったのでtailwindを少し踏み込んで実装してみました。
(tailwindのTは大文字だというツッコミはあると思います...Tの大文字変換が面倒なので許してください🙇‍♂️)

tailwind初めての人向け

tailwindって何がいい？(個人の感想)

1. class名前を考える必要がなくなるのがいい(styled-component使っている人はコンポーネント名)
2. 最近のトレンド技術ほとんどがtailwindを推しているから、個人開発をする時何も考えずにcssのライブラリが設定されているので楽
3. tailwindが事前に用意しているユーティリティクラス(text-red-400みたいな)のを一度覚えてしまえばcssの設定が楽
4. clsxとかclass-variance-authorityとか使えば、コンポーネントの設計が結構楽だし可読性が上がる
5. 最新の技術を用いる時だいたい使われているので、移植が簡単。例えばboltなどで生成したコードとかv0とかで生成したコードとか
6. themaの設定が綺麗なコードになる(普通のcssでもそれなりに綺麗にはなるけど。。。)

tailwindの面倒なところ(個人の感想)

1. ユーティリティクラスを覚えるのが面倒
2. classがかなりの長文になる(これはrootのthema設定とかでなんとかなる気もする)
3. tailwindが嫌いな人に受け入れてもらうために説得が大変(主に上記の二つに躓きそう)
4. たまに、tailwindで設定できないことがまだある(今回のv4でだいぶ解消されたみたいだけど)

今回の発信内容

tailwindの設定周りについての記事になります。
tailwind.config.cssあたりを触ってみたいと思っていた方などにおすすめ

用語の確認

1. デザイントークン:
   --color-red-500などデザインの低レベル層のこと(ユーティリティクラスとごっちゃになるやつ
2. ユーティリティクラス:
   text-red-500などのこと
3. ディレクティブ:
   「@」のこと
4. バリアント:
   dark:とかfocus:などの擬似クラスなどの制御に使用する

CSS First Configurations の導入

早速ですがtailwind.config.jsの利用がv4からなくなりcssでの管理に移行しました。
理由としてはTailwind CSS v4.0 は、フレームワークを CSS ネイティブにし、JavaScript ライブラリのように感じさせないようにすることだそうです。
shadcn uiなどのライブラリを利用していた人がtailwindcss v4に切り替えたらなぜかうまく動かない方はcssでの操作に切り替えた方が良さそう。

基本的にtailwind.configの内容はこれから紹介する@themaディレクティブでの操作になるそうです。

@〇〇系をまとめる

ただし今回は個人的に試してみたかったものだけ

@thema

tailwindcss v4では、@themeディレクティブが導入され、テーマ変数の定義方法が変更されました。

1. ユーティリティクラスの自動生成
2. トップレベルでの定義の強制
3. 通常のCSS変数との区別

これらの設定をする際は@themaを使いましょう！

例1) 新しくデザイントークンを作成したい

@thema {
    --color-foge-100: oklch(0.99 0 0);
}

-------------
<div className="text-foge-100">foge</div>

例2) 既存のユーティリティクラスを消して自分だけの設定を作りたい

@thema {
    --color-red-100: var(--color-white);
}

@theme {
  --color-*: initial; ← これで既存の色のデザイントークンは消えます
  --color-white: #fff;
  --color-purple: #000;
}

-------------
<div className="text-purple">foge</div> ← 黒くなります

例3) keyframeの設定をしたい

@theme {
  --animate-fade-in-scale: fade-in-scale 0.3s ease-out;
  @keyframes fade-in-scale {
    0% {
      opacity: 0;
      transform: scale(0.95);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
}

*ユーティリティクラスには紐づけたくないが、cssでは利用したい場合は@themaの外で設定するといい

@layer

tailwindの各レイヤーについての設定をするときに利用します。
レイヤーは主に
base > components > utilities の順に優先されます。

例1) HTMLの要素に対してデフォルトの設定をしたい

@layer base {
    h1 {
    color: var(--color-red-500);
  }
  h2 {
    color: var(--color-blue-500);
  }
}
----------------------------------
<h1>Hello World</h1> ← 赤くなる
<h1 className="text-blue-500">Hello World</h1> ← baseはutilityよりも優先度が低いため青くなる
<h2>こんにちは世界</h2> ← 青くなる
<p>あああ</p> ← 変化なし

例2)自作のコンポーネントを作成する

@layer components {
  .typography {
    p {
      font-size: var(--text-base); /* Tailwindの基本フォントサイズ */
      color: var(--color-red-700); /* Tailwindのグレー700 */
    }
    h1 {
      font-size: var(--text-2xl--line-height); /* Tailwindの2XLサイズと行間 */
      font-weight: var(
        --font-weight-semibold
      ); /* Tailwindのセミボールドフォント */
      color: var(--color-gray-950); /* Tailwindのグレー950 */
    }
    h2 {
      font-size: var(--text-xl); /* TailwindのXLサイズ */
      font-weight: var(
        --font-weight-semibold
      ); /* Tailwindのセミボールドフォント */
      color: var(--color-gray-950); /* Tailwindのグレー950 */
    }
  }
}
------------------------------------
*classにコンポーネント名を入れるとそれがデフォルトの値として設定される
<div className="typography">
<h1>Hello World</h1>
<h2>こんにちは世界</h2>
      <p>あああ</p>
</div>

@utility

css形式でユーティリティクラスを作成することができます

例1) 自分だけのユーティリティクラスを作成したい

@utility content-auto {
  content-visibility: auto;
}
---------------------------------
<div class="content-auto">
  <!-- ... -->
</div>

例2) 既存のものユーティリティクラスを変更したい

darkモード用の変数対応をしたい時

@thme {
    --color-border: hsl(220 13% 91%);
}
@theme {
     @media (prefers-color-scheme: dark) {
        :root {
            --color-border: var(--color-white);
        }
    }
}

@utility border {
    border-color: var(--color-border);
}
---------------------------------
<div class="border">
  <!-- ... -->
</div>

@custom-media

何度も利用するバリアントはここで定義しておく

例1) ダークモードの時に利用するデザイントークンを設定したい

@custom-variant dark {
    --background: 224 71.4% 4.1%;
}

まとめ

tailwind v4を触って一番思ったことは、公式の内容が大きく変わったなと思いました。昔のtailwindに慣れているせいか少し違和感もありましたが、触っているうちに慣れ、より使いやすくなったのを実感しました。興味のある方はぜひ。

また、個人開発みたいに自由な開発をする時は、今回のような設定ファイルを触ることはないのでよかったです。触ってみて思ったのはやはりデザインがしっかりと決まってから設定周りを調整した方がいいと思いました。初めはTypographyなどの共通コンポーネントとかで、文字の管理をしてある程度プロダクト全体のデザインが固まってきた段階で変数とか決めた方がいいかなと思いました。