Tailwind CSS v4.0 リリース

 (tailwindcss.com)
1 ポイント 投稿者 GN⁺ 2025-01-24 | 1件のコメント | WhatsAppで共有

  • Tailwind CSS v4.0 リリース

    • パフォーマンスと柔軟性を最適化した新バージョンで、最新のWebプラットフォームの進化を最大限に活用
    • 新しい高性能エンジンにより、フルビルド速度は最大5倍、インクリメンタルビルド速度は100倍以上高速化
    • 最新のCSS機能を活用し、モダンなWeb向けに設計

  • 新しい高性能エンジン

    • Tailwind CSS v4.0 はフレームワークを全面的に書き直したバージョンで、アーキテクチャを最適化して速度を最大化
    • インクリメンタルビルドは100倍以上高速化され、マイクロ秒単位で完了

  • モダンなWebのための設計

    • ネイティブのカスケードレイヤー、登録済みカスタムプロパティ、color-mix() などの最新CSS機能を活用
    • 論理プロパティを使用して RTL 対応を簡素化し、生成されるCSSサイズを削減

  • 簡素化されたインストール

    • インストール手順が簡素化され、依存関係が減り、CSSファイルに1行のコードを追加するだけで利用可能
    • 外部プラグインなしで @import ルールを標準で提供

  • Vite プラグイン

    • Vite ユーザーは @tailwindcss/vite を使用して Tailwind を統合可能
    • Vite プラグインを使うことでパフォーマンスがさらに向上

  • 自動コンテンツ検出

    • テンプレートファイルを自動検出するため設定不要
    • .gitignore ファイル内の項目を自動的に無視し、不要なスキャンを防止

  • 組み込みの import サポート

    • @import を使って他のCSSファイルをインラインで読み込み可能
    • Tailwind CSS に最適化された import システムにより、パフォーマンスをさらに向上

  • CSS 優先の設定

    • JavaScript ではなく CSS でプロジェクトを設定可能
    • tailwind.config.js ファイルなしで CSS ファイルから直接カスタマイズ可能

  • CSS テーマ変数

    • デザイントークンを CSS 変数として提供し、ランタイムで簡単に参照可能

  • 動的ユーティリティ値とバリアント

    • さまざまなユーティリティやバリアントが任意の値を受け取れるよう簡素化
    • グリッドサイズやカスタムデータ属性を簡単に設定可能

  • モダン化された P3 カラーパレット

    • デフォルトのカラーパレットを rgb から oklch にアップグレードし、より鮮やかな色を提供

  • コンテナクエリ

    • コンテナサイズに応じて要素をスタイリングできる API を標準搭載

  • 新しい 3D 変形ユーティリティ

    • 3D 空間で要素を変形できる API を追加

  • 拡張されたグラデーション API

    • 線形、円錐形、放射状グラデーションを生成できるユーティリティを追加

  • @starting-style サポート

    • JavaScript なしで、要素が最初に表示されるときにプロパティを遷移できる機能を追加

  • not- バリアント*

    • CSS :not() 疑似クラスのサポートを追加

  • 追加された新しいユーティリティとバリアント

    • inset-shadow-*、field-sizing、color-scheme など、さまざまな新しいユーティリティとバリアントを追加

Tailwind CSS v4.0 は、パフォーマンスと柔軟性を最大化した最新バージョンで、多彩な新機能と改善点を提供します。

関連記事

1件のコメント

 
GN⁺ 2025-01-24
Hacker Newsの反応

  • Tailwind v4の進化を前向きに評価しており、CSS変数とCSSのみの設定をサポートしている点が大きな利点だとしている。Tailwindは今やユーティリティとしての役割をしっかり果たしていると見ている

  • CSSは以前よりユーザーフレンドリーになっており、スタイル属性を直接HTMLに使うほうがシンプルな場合もある。しかし、それでもスタイル属性を避けたい人もいる

  • Tailwindを使うとスタイルを一か所で読めるのがよい。クラス名は長くなるが、スタイルを簡単に修正できるので便利だ

  • Tailwindを初めて触ったときは、CSSを学び直さなければならない点が負担だった。しかし、チーム開発やスケーラビリティの面で有用だと理解した。今でも基本的なスタイルシートのほうを好んでいる

  • Tailwindを使ったプロジェクトでは、直感的でドキュメントも充実していてよかった。スタイル名を考える必要がなく、時間の節約に役立った

  • Tailwindの最新アップデートでビルド時間が短縮され、JS設定も不要になった。CSSでほとんどの作業をこなせるようになった

  • Tailwindを使おうとしたが、Bootstrapより結果がよくなかった。デザイナーにならずにそれなりに良い成果物を得る方法を考えている

  • Tailwindのすっきりしているが画一的なデザインが広く見られる。Tailwindのインラインスタイル的アプローチの長所と限界を示している

  • Tailwind v4へのアップデートが既存アプリに影響した。互換性の問題により、v3を使い続けるかビルドスクリプトを修正しなければならない状況だ