Tailwind v のエキサイティングなアップデート

数か月前 (この記事の執筆時点)、Tailwind CSS は Tailwind CSS v4.0 での作業をオープンソース化しました。 (GitHub のここから見つけることができます)。

最近、Tailwind は Tailwind CSS 4 のパブリック ベータ を発表しました。この記事では、新しいバージョンのハイライトについて説明します。それでは始めましょう!

一般的な構造の変更

Tailwind はエンジンを再加工し、パフォーマンスを大幅に向上させました。フル ビルドは最大 5 倍 高速になり、増分ビルドは最大 100 倍 (そのとおりです) 高速になります。

Tailwind v4 には統合ツールチェーンもあります。すべての Tailwind プロジェクトに autoprefixer と postcss をインストールする必要があったことを覚えていますか?もうその必要はありません!

Tailwind は構成に対して興味深いアプローチを採用し、JS 構成ファイルから CSS 構成に移行しています。これは、プラグイン、テーマ、その他の動作を CSS で直接設定することを意味します。

Tailwind は CSS の最新機能もサポートしています。

CSS に新しいロゴ (および新機能) が追加されました。 ?

ベストコード・11月23日

#css #webdev ＃プログラミング ＃話し合う

全体的な変更が完了したところで、Tailwind が具体的に何を追加するのかを見てみましょう!

---

新機能?

Tailwind v4 を試してみたい場合は、v4 (ベータ版) の入門ドキュメントを参照してください。

プロジェクトを簡単にアップグレードしたい場合は、npx @tailwindcss/upgrade@next を実行するだけで、Tailwind がそれを実行します。 注意してください! 互換性を破る変更がある可能性があります。

色

Tailwind v4 カラー パレットは、rgb ではなく oklch に基づいています。 RGB カラー システムは、画面全体の一貫性と鮮やかさの点で少し制限があります。 oklch カラー システムは現在広くサポートされているため、Tailwind v4 はそれを活用する予定です!

コンテナクエリ

Tailwind v4 はデフォルトでコンテナー クエリをサポートするようになりました。コンテナ クエリが何なのかわからない場合は、説明しましょう。

Tailwind には、さまざまな画面サイズに適用される CSS をカスタマイズできる md:、sm: などの機能があることをご存知ですか?
このような場合、クラスはウィンドウのサイズを参照します。コンテナクエリを使用すると、代わりにコンテナのサイズを参照できます。

<div>



<p>上記の例では、グリッドは 3 列になります。<em>ウィンドウ</em> が小さいサイズに達したときではなく、<em>コンテナ</em> が小さいサイズに達したときです。ご想像のとおり、これはレスポンシブ レイアウトでは非常に便利です。</p>

<h2>
  
  
  フィールドのサイジング
</h2>

<p>フィールドサイジングはまだ広くサポートされている CSS 機能ではありませんが、普及すれば素晴らしいものになるでしょう。 JS を使用して自動サイズ変更テキストエリアを作成する代わりに、CSS のみを使用できます。<br>
Tailwind v4 はそれをサポートしています!</p>

<p>Tailwind の Web サイトでデモを試してください。<br>
これで、field-sizing-content クラスをテキストエリアに追加するだけで使用できるようになりました。</p>
<h2>
  
  
  子孫の更新
</h2>

<p>Tailwind 安定版 (ご存知ないかもしれません) には、クラスを持つ要素の <em>直接</em> の子をターゲットにすることができる * バリアントがあります。例:<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>Tailwind v4 の新しい ** バリアントは、<em>すべての子孫</em> を対象とします:<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<h2>
  
  
  差し込みシャドウ (およびリング)
</h2>

<p>また、inset-shadow クラスと inset-ring クラスを使用して、要素上にインセット シャドウとリングを簡単に作成できるようになりました。<br>
</p>

<pre class="brush:php;toolbar:false">



<p><img src="https://img.php.cn/upload/article/000/000/000/173363689867865.jpg" alt="Exciting updates in Tailwind v�"></p>


<hr>

<h2>
  
  
  他にもたくさんあります!
</h2>

<p>新しく追加された機能をすべて確認したい場合は、https://tailwindcss.com/docs/v4-beta にアクセスしてチェックしてください!</p><p>この投稿は #ディスカッション投稿です!それが私がそれを短くした理由です。あなたの意見が知りたいです!<br>
Tailwind を嫌っている多くの人がおそらく私にフィードバックをくれるでしょう?<br>
確かに物議を醸す新機能がいくつかあるので、意見を聞きたいのですが?</p>

<p>概要: コメントを残してください!</p>


<hr>

<p>読んでいただきありがとうございます!<br>
ベストコード</p>