tailwind CSS v4.0: 最新Web開発の完全なゲームチェンジャー［翻訳記事］
(siosio3103.medium.com)- v4.0の最も大きな特徴は性能向上: フルビルドは最大5倍、インクリメンタルビルドは100倍以上高速化
- CSSファースト構成へのパラダイムシフト:
tailwind.config.jsの代わりにCSSで直接設定 @layerを使ったスタイル優先順位の制御@propertyルールでカスタムプロパティを定義可能Color-Mix()関数で、CSS変数や currentColor を含むあらゆる色値の透明度を調整margin-leftやmargin-rightの代わりにmargin-inlineのような論理プロパティで一括処理できるようになり、RTL対応がはるかに簡単に- インストール手順を簡素化:
npm i tailwindcss @tailwindcss/postcssexport default { plugins: ["@tailwindcss/postcss"],};@import "tailwindcss";で完了 - 自動コンテンツ検出:
.gitignoreや画像・動画などのバイナリを自動で無視し、関連ファイルを自動スキャン。例外のために@sourceをサポート - Vite Plugin を優先サポート
- 動的ユーティリティ生成により、既存設定にない値もその場で利用可能
- 進化したカラーシステム: デフォルトの全カラーパレットが RGB からOKLCHへアップグレード
- Container Queries をフレームワークに内蔵
- 3D Transforms のサポートと強化されたグラデーションを追加
- 新しいVariants と Utilitiesを追加:
not-*、starting、inert、nth-*、descendantVariant とfield-sizing、color-scheme、inset-shadow-*Utilities - 予想以上に簡単なマイグレーション: 変更の大半を自動でアップグレード
- tailwind が描く大きなビジョン: 単なるフレームワーク更新を超え、CSSの未来への大胆な挑戦
- アップグレードすべきか?: 新規プロジェクトなら v4.0 を選択。既存プロジェクトでも、最新ブラウザ向けサービスなら容易にアップグレード可能
- 結論: tailwind CSS v4.0 は単なる進化ではなく革命
12件のコメント
Tailwind を導入して 1 年間使ってみた結果
次のプロジェクトで使うか？ YES
Web 開発のゲームチェンジャーか？ NO
「ゲームチェンジャー」という言い方は大げさなので、コメントしたくなりました。
今後目指すべき進歩的なスタイルだと断言するのは難しい気がします。
Tailwind はテンプレートのコピペや AI による簡単生成、ちょっとしたスタイル調整には長所がありますが、
読みやすいタグであっても可読性の低下を招きますし、デザイナーが作ったデザインを精密に再現するのも難しいです。CSS 変数さえ適切に設定すれば、インラインスタイルと難易度的にそれほど大きな違いはないとも思います。
RN対応お願いします..
あまり遠くへ行かないで… すべてを飲み込んでしまうかもしれない…
とりあえず 3.x を使っておいて、本当に大勢になったらマイグレーションすると思う
https://tailwindcss.com/docs/upgrade-guide
shadow-sm->shadow-xsshadow->shadow-sm次のバージョンではまたどんな互換性が壊されるのか、予測できませんね
次から次へと出てくるWeb技術。
すでにある技術だけでも十分です。
C、Assembly、HTML、JavaScriptだけでも、すべて実現できます。
まだ Excel の「関数」を使っていないんですか？
電卓でも全部できますよね。
では、なぜスペースの代わりにポイントを使うんですか？
いわゆる老人っぽい文体の一部です
年配の人たちがスペースの代わりにピリオドをよく打つことのパロディのようです..
キム代理。私があえて助言したいことがあります。ほかでもなく、Excelの関数？をあまり使わないでください……。便利さがあるなら、危険性は増大します。牛をさばくにはそれなりの刃があり、鶏をさばくのに大きな刃物が必要でしょうか？ 簡単なものが正解であることもあります。
wwwwwwwwww とても面白いです
😅
シンプル化とアップグレードと言いながら、結局はまた何か別のものを学べということ。まさにこれ。