Tailwind CSS v4.0 の進捗をオープンソースとして公開

 (tailwindcss.com)
7 ポイント 投稿者 GN⁺ 2024-03-08 | 2件のコメント | WhatsAppで共有
  • 新しい高性能エンジン Oxide が Tailwind CSS v4.0 として開発中。
  • 開発者体験をシンプルにし、Web プラットフォームの最新の進化を活用するために設計されている。
  • 当初は v3.x リリースとして出す予定だったが、新世代のフレームワークとして v4.0 で公開することに決定した。
  • まだ初期段階で作業は多く残っているが、最初の公開アルファ版にタグ付けして実験を始められる。

新エンジン、速度のために構築

  • 新エンジンはゼロから書き直され、より少ないコードでより高速な性能を提供する。
  • 最大 10 倍高速なビルド速度を実現し、Tailwind CSS のウェブサイトは 105ms、Catalyst UI キットは 55ms でビルド可能。
  • 新エンジンはインストールサイズが 35% 以上小さくなっており、Rust や Lightning CSS のような重量級ネイティブパッケージを含む。
  • Rust を使ってフレームワークの最もコストの高い部分を処理し、TypeScript でコアを維持して拡張性を確保する。
  • 新エンジンは Lightning CSS のみに依存する。
  • 独自の CSS パーサーを作成し、PostCSS より 2 倍高速にパースできるデータ構造を設計した。

統合ツールチェーン

  • Tailwind CSS v4 はもはやプラグインではなく、CSS を処理するオールインワンツール。
  • @import 処理、ベンダープレフィックス付与、ネスト対応などが内蔵されており、追加設定は不要。
  • oklch() 色やメディアクエリ範囲のようなモダンな CSS 機能を、より広いブラウザ対応のための構文へ変換する。
  • PostCSS プラグインは引き続き提供するが、バンドラープラグインも検討中で、最初のアルファリリースでは公式 Vite プラグインを提供する。

モダン Web のための設計

  • Tailwind CSS v4 は、今後数年にわたって最先端だと感じられるフレームワークを目指している。
  • 実際の @layer ルールを使い、これまで問題になっていた詳細度の問題を解決する。
  • @property を使って内部カスタムプロパティを明確に定義し、背景グラデーションのような効果を可能にする。
  • color-mix を使って、色変数の不透明度変更や currentColor の不透明度調整をより簡単にする。
  • コアでコンテナクエリを直接サポートし、新しい @min-* および @max-* バリアントによってコンテナクエリ範囲をサポートする。

合成可能なバリアント

  • 新アーキテクチャにより、別のセレクターに作用するバリアント同士を組み合わせられる。
  • 以前のバージョンでは group-has-* のようなバリアントをフレームワーク内で明示的に定義していたが、今では group-* を既存の has-* バリアントと組み合わせられる。
広告

ゼロ設定のコンテンツ検出

  • 初期アルファリリースでは content パスを設定できず、多くのプロジェクトではそもそも再設定する必要がない。
  • PostCSS プラグインや CLI を使う場合、Tailwind はプロジェクト全体をクロールしてテンプレートファイルを探す。
  • Vite プラグインを使う場合は、モジュールグラフに依存して実際に使っているファイルを正確に把握できる。

CSS 優先の設定

  • Tailwind CSS v4.0 の主要目標は、フレームワークを CSS ネイティブのように感じさせ、JavaScript ライブラリのように感じさせないこと。
  • インストール後は、通常の CSS @import 文を使ってプロジェクトに追加する。
  • JavaScript 設定ファイルですべてのカスタマイズを行う代わりに、CSS 変数を使う。

変更点

  • 重要な変更を軽く扱っているわけではないが、v4 ではいくつかの挙動が変わる。
  • もはや文書化されていないユーティリティは削除される。
  • PostCSS プラグインと CLI は別パッケージとして提供される。
  • デフォルトのボーダー色が削除される。
  • デフォルトでは ring ユーティリティは currentColor を使う 1px のリングになる。

v4.0 へのロードマップ

  • 新エンジンはゼロから書き直され、新しい設定アプローチを用いた開発者体験に全面的に注力している。
  • 後方互換性を非常に重視しており、安定版 v4.0 リリースに向けた主要課題となっている。
  • JavaScript 設定ファイル対応、明示的なコンテンツパス設定、別のダークモード対応、プラグインおよびカスタムユーティリティ対応、クラス接頭辞設定、Safelists および blocklists 対応、important 設定対応、theme() 関数対応、スタンドアロン CLI 対応などが含まれる。
広告

アルファ版を試す

  • すでにいくつかのアルファリリースにタグが付けられており、今日からプロジェクトで実験を始められる。
  • Tailwind CSS IntelliSense 拡張機能を使っている場合は、VS Code 拡張ページでプレリリース版へ切り替える必要がある。
  • 問題を見つけたら GitHub で知らせてほしいとしている。

Vite を使う場合

  • Tailwind CSS v4 アルファと新しい Vite プラグインをインストールする。
  • vite.config.ts ファイルにプラグインを追加する。
  • メイン CSS ファイルで Tailwind をインポートする。

PostCSS を使う場合

  • Tailwind CSS v4 アルファと別の PostCSS プラグインパッケージをインストールする。
  • postcss.config.js ファイルにプラグインを追加する。
  • メイン CSS ファイルで Tailwind をインポートする。

CLI を使う場合

  • Tailwind CSS v4 アルファと別の CLI パッケージをインストールする。
  • メイン CSS ファイルで Tailwind をインポートする。
  • CLI ツールを使って CSS をコンパイルする。

GN⁺ の見解

  • Tailwind CSS v4.0 のオープンソース公開は、開発者コミュニティに新機能や改善点を先行体験する機会を提供する。これは、開発者がフレームワークへのフィードバックを提供し、より安定した最終リリースに貢献できる機会を意味する。
  • 新エンジンの性能向上はビルド時間を大幅に短縮するようで、特に大規模プロジェクトや高速な開発サイクルが重要な環境で有用だと見込まれる。
  • Rust と TypeScript の組み合わせは、性能と拡張性を同時に追求する現代的なアプローチを反映している。Rust で書かれた部分は性能を最大化し、一方で TypeScript は開発者が容易に拡張・保守できるようにする。
  • CSS 変数を使った新しい設定方式は、従来の JavaScript ベース設定よりも CSS フレンドリーで、デザインシステムとの統合を容易にできる。
  • こうした変更は既存ユーザーに一定の移行作業を求める可能性があるが、長期的にはより簡潔で保守しやすいコードベースにつながると期待される。

関連記事

2件のコメント

 
2024-03-09
[このコメントは非表示になっています。]
 
GN⁺ 2024-03-08
Hacker Newsの意見

  • Tailwind CSSはフロントエンドにおいて2番目に素晴らしいものであり、それを上回るのはVue 3だけ。

    • CSSクラス名を付ける手間がなく、重複したCSSコードやクラスの衝突問題もない。
    • すべてのコードが1つのファイル内にあるため、コードを見るだけでコンポーネントを視覚化できる。
    • SCSSに戻るつもりはなく、Vue 3、TailwindCSS、Viteの組み合わせが最高だと思う。

  • Tailwindの強力な批判者として、CSS-first設定のもとでの今回の発表はすべて非常に歓迎すべきもの。

    • Tailwindのデザイントークンやリセットなどを活用でき、実際のCSSを通じてカスタマイズ可能。
    • CSSのモダンなアーキテクチャ、カスケード、さらにはWeb ComponentsのShadow DOMまで捨てることなく、Tailwindを「軽く」使える新しい方法を示している。

  • CTRL+uは文法の良い例を示している。

    • たとえば、角丸のボックスと上下のセクションを作るには、直感的な1行のコードが必要だ。

  • スタンドアロンCLIについてはまだ作業していないが、v4.0リリース前には必ず完成させる予定。

    • リリース発表の残りの内容を考えると、これはRustで構築されると推測している。
    • Nodeを内蔵しないことを望む。特に、Vercelの今では廃止されたpkgツールに依存する場合はなおさらだ。

  • 有望な改善点がたくさんある。

    • JSを通じて拡張する代わりに、CSSを通じてテーマを制御できる機能に最も興奮している。

  • Tailwindがunocssのようにattributifyをサポートしてくれればと思う。

    • 複雑なレイアウトでは、そのほうがはるかに読みやすい。

  • フロントエンド開発者ではないが、いくつかのWebサイトを保守しており、どれもTailwindを使っている。

    • Tailwindのメンテナーたちは優先順位付けにおいて非常に優れた直感を持っており、素晴らしいデザインセンスも備えている。
    • Tailwindは使ってみるまでは理解しづらいが、各バージョンごとにさらに洗練された製品を提供している。
    • このバージョンでは互換性の面で大きく変わったことはないが、バージョン4が正式化されれば、さらに多くの変更があるかもしれない。
    • 新しいエンジンの見通しは非常に魅力的で、ビルド速度の向上はいつでも歓迎だ。

  • Tailwindに関する良いチュートリアル/ガイドがあるのか気になる。

  • htmxや他のhateoasアプローチと一緒にtailwindcssを使っている人がいるのか気になる。

    • hypertextはスタイリングと関係がないべきだが、tailwindのようなものはこれと衝突する可能性がある。
    • CSSとhateoasはマークアップとスタイリングが分離されているため完璧に噛み合うが、tailwindcssのような場合にはどうしているのか気になる。

  • デモプロジェクトで使いたかったが、import from "node:@tailwindcss/postcss@latest"がpackage.jsonのexportsフィールドに関するエラーを発生させる。

    • それにもかかわらず、ブログ記事ではpostcss-importを使う必要はないと述べている一方で、依然としてそれを依存関係に含めている。