Cookwind V 3の新機能0?それについて話しましょう🎨.

おい、皆、私はVikasレイと私の新しいポストへの歓迎です.この記事では、私はあなたに風変わりなCSS V 3で来る刺激的な新機能のいくつかを示します.0 .
ので、風のCSS v 3を風にします.0は、ちょうど2020年12月10日にリリースされて、多くの新機能と他の多くの役に立つものをもたらしました.
ここでは、これらの機能のリストですし、いくつかの例と同様に詳細に各機能を議論する予定です.

ジャスト・イン・タイム
新しいジャストインタイムエンジンは現在、階段3は巨大なパフォーマンスの向上とスタック可能な変形、任意の値、および多くのような新機能を取得することを意味古典的なエンジンに置き換えられました.

ボックスからもっと新しい色
カラーパレットは、より良い共存する色に変更されている5つのグレイズを含む22色の合計では、デフォルトで有効になっているのは、Tailwind 2でファイルサイズの風化に主な貢献者の1つであったが、今では、新しいジャストインタイムエンジンにTailwind 3のおかげで、我々はもうそれについて心配する必要はありません.
22の新しい色は、カラーパレットに加えられました:

カラーパレットパレット
今すぐグレーの5つの異なる色合いを提供します😍:

ゲーリーカラーズパレット

色のボックス影
色のボックスの影はしばしばマキUIのデザインが使用されますが、以前の風変わりなCSSのバージョンはそれらを提供していません.
しかし、それはもうそうではない.0は、色のボックスの影のこれらの新機能をもたらします.
ボタンに適用されるカラーボックスシャドウスタイルの例を示します

色の影ボタン
ここでは、コードを再生する場合は、コードへのリンクです.
Tailwind Play link

印刷修飾子
新しい印刷バリアントを使用すると、デザインに変更をもたらすことができますし、それらを印刷の準備をします.
この機能を使用すると、印刷のためのあなたのWebページをカスタマイズすることができます、それはあなたがそれを印刷する場合は、Webページに含めるかどうかを制御することを意味します.

ネイティブアスペクト比
現在、ビデオ、イメージ、または他のもののような我々のウェブページの様々な要素のアスペクト比を維持するためにどんなプラグインの使用もありません.
現在、アスペクト・ビデオ、アスペクト・オート、アスペクト・スクエアのようなユーティリティクラスの様々なタイプを使用することができます.あるいは、アスペクトのようなカスタム値を使用します.

スクロールスナップサポート
これは、ユーザーがセンター、スタート、またはリストの最後にスナップするスクロール可能な要素のリストを持つことができる素晴らしい機能です.
この特徴はウェブサイトのUXを強化して、簡単にこの単純なクラスユーティリティスナップを使って実行されることができるか、スナップ・コンテナの中でスクロールされるとき、そのセンターに要素をスナップするためにスナップセンターユーティリティを使用することができます.
スナップユーティリティを使用してスナップユーティリティを使用してスナップインコンテナを常に常に要素を停止する前に、ユーザーが次の項目にスクロールを続行することができます.
以下のような小さなビデオデモです.
以下にコードを示します.

<div class="snap-x flex overflow-scroll mt-20">
  <img
    class="mx-5 snap-center w-[1000px] h-[200px] rounded-xl m-5"
    src="images/src"
  />
  <img
    class="mx-5 snap-center w-[1000px] h-[200px] rounded-xl m-5"
    src="iamges/src"
  />

  <img
    class="mx-5 snap-center w-[1000px] h-[200px] rounded-xl m-5"
    src="images/src"
  />
  <img
    class="mx-5 snap-center w-[1000px] h-[200px] rounded-xl m-5"
    src="images/src" 

  />
   <img class="mx-5 snap-center w-[1000px] h-[200px] rounded-xl m-5"src="images/src" />
   <img class="mx-5 snap-center w-[1000px] h-[200px] rounded-xl m-5" src="images/src" />
</div>

だけでなく、迅速なデモを再生するコードを取得するこのリンクを参照してください.tailwind play

スクロール動作
これで、スクロールスムーズなクラスを追加することにより、スムーズにスクロールすることができます.
このユーティリティは、要素のスクロール動作を制御するために使用されます.
スクロールのためのいくつかの場所にマージンを追加する場合は、スクロールのクラスには、スクロールのクラスのようにマージン値を優先して行うことができますし、スクロールオートクラスを使用して追加することができます.

マルチカラムレイアウト
Tarwind今すぐマルチ列/新聞のようなレイアウトを提供します!
このレイアウトは、あなたが必要とする列の数を提供することによって簡単に実装することができます.または、単にサイズに基づいて使用するどのように多くの列を決定するために、それをブラウザのためにautoに設定します.
ガッタギャップを制御するには、単に1.25レムの溝ギャップを提供するGAP - X - 5のようなクラスを提供することができます.あなたが必要な値を変更することができます.
以下のようになります.

以下はコードへのリンクです.Tailwind CSS playgound .

アクセント色とファイル入力
これで簡単にファイルのアップロードボタン、チェックボックス、ラジオボタンのようなネイティブフォームの要素をカスタマイズすることができます.0 .
これは、アクセントタグの1つのクラスを追加することで実装できます.
以下のようになります.
以前

風上CSS 1を用いたHTML形式
アクセントクラスの適用後

カスタマイズされた色を使用したHTMLフォーム
ここでファイルのアップロードボタンをどのようにカスタマイズするか、ファイル要素にスタイルを適用する方法を参照してください.
したがって、これらのクラスをすべて適用した後、

file:mr-6 file:py-2 file:px-4 file:bg-violet-200 file:font-semibold file:border-none file:rounded-full file:text-violet-700 hover:file:bg-violet-400

以下のようになります.

カスタマイズされた色を使用したHTMLフォーム
上記の例では、完成したコードへのリンクを示します.Tailwind CSS Play

スタイリングオープン/クローズド
この機能は、スタイルを開くことができますオープン/閉じた状態を開くだけでクラスを開いて、クラスを開いた後にしたいスタイルを接尾辞で開くと、このオープンと同じように:シャドウ- 2 XLまたはオープン:BG - Violet - 500.
ここでは、この例のように、ボックスを開くと、ボックスの影が適用され、背景色が変更されます.
クラスに適用する前に:

Cookwind CSSを用いたHTMLコンポーネントの設計
クラスへの適用後

Tailwind CSS 2を用いたHTMLコンポーネント設計

下線
この機能は、テキストにより多くのテキスト装飾を提供するのに役立ちます.CSS V 3を使ってください.0はいくつかの装飾的なテキストの装飾要素をもたらします.
また、このテキストの装飾の色を変更することができます.
装飾的な色- 400、装飾的な固体、装飾的なダッシュ、装飾波状とより多く.
次のようになります.
クラスを適用する前に

HTMLコンポーネントイメージ
クラスの適用後

HTMLコンポーネントイメージ2
あなたはそれがどのように見えるかを見るために簡単に見ることができますTailwind CSS play .

CDNをする
新しい遊びCDNはあなたにあなたの文書頭で単純なスクリプトタグを通してTailwind CSSのすべての力を与えますcdn.tailwindcss.com そして、あなたはTruwind CSSの完全な力へのアクセスを持っています.
ちょっとこのスクリプトタグをあなたのHTMLファイルに加えてください、そして、あなたはTruwindCSSの完全な力を持ちます.

<script src="https://cdn.tailwindcss.com"></script>

設定ファイルを変更してカスタマイズしたい場合は、次のように簡単にできます.

<script>
tailwind.config={
 theme:{
    extend:{
      colors:{
           "fancy-blue":"#1E90FF"
            },
         },
      },
    }
</script>

また、タグの中にカスタムCSSを書くこともできます.

<style type="text/tailwindcss">
.btn-custom{
@apply bg-violet-300 w-40 px-4 py-2 rounded-full text-violet-700 font-semibold hover:bg-violet-400;
}
</style>

結論
風車CSS V 30は、私がこのポストでカバーしなかったより多くの特徴を持ちます.私はいくつかの重要な機能をカバー.
これは、2021年の最高のリリースでも、次のです.JS V 12
リリースについてもっと知りたい場合は、TailwindCSS docs 閉じるこの動画はお気に入りから削除されています.
あなたがこの記事が好きであるならば、あなたの友人とあなたの社会的グループでそれを共有してください.私は別の驚くべきポストであなたに会います、そして、それまで、安全なままでいて、新しいものを学んで、練習し続けます.✌️
いくつかの有用なリンク
Tailwind CSS Docs
フォローオン

Facebook Link

その他の記事を読む

6 Best Vscode Themes that you might not know yet.

Top 5 CSS framework to checkout in 2022.