私はTailWindCSSを愛し、なぜあなたも!

どのような尾風ですか?
のは、正確にどのようなまばゆいから進んで始めましょうか?
Truwindは純粋にCSSです.これは、クラス名のシリーズを使用してスタイリングフロントエンドのWebアプリケーションのライブラリです.これらのクラス名はショートカットとして働き、CSSのブロック全体を単一のクラス名に書き込むことから時間を節約できます.
ここでは、サイズ、背景色、パディング、フレックス、および間隔のためのスタイルのdivのクイックサンプルです.<div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
どこが役に立つのですか.
Terwindは静的ウェブサイト、モバイルフレンドリーなウェブサイト、およびコンポーネントベースのライブラリやフレームワークに便利です.

コンポーネントスタイリング
私はスタイルのコンポーネントが反応するときに風が好きです.コンポーネントにスタイルを設定し、そのコンポーネントへの参照を呼び出すたびに、完全にスタイル付きコンポーネントを取得します.下記の例では、私がどこで何度か呼ばれているプロジェクトアイテムをスタイリングしているところを見ることができます.
それでは正確にhover:scale-150 flex flex-col items-center text-center 平均?

The hover:scale-150 セクションは、HOMEで150 %でサイズが増加するように項目を伝えるためにCSSのために加えられるクラスです.

The flex CSS Flexboxデザインを使用するには、このdivを設定します

The flex-col Flexiboxを既定の行パターンから列パターンに変更すると、

The items-center クラスは、Divで整列して、正当化されたセンターにすべてをセットします

The text-center テキストを中心揃えに設定する

このコンポーネントを呼び出すたびに、このコンポーネントの新しいインスタンスは、同じスタイルを適用します.そして、後でこのスタイルを変えることを選ぶならば、私は個々の構成要素でそれを変えなければならないだけです、そして、それはすぐに私のサイトのすべての例示された構成要素にあてはまります.


私はなぜ風を愛する

グループ化コンポーネントクラス
コンポーネントのクラスをグループ化することで、クラス内のクラス名を非常に長くすることを避けることができます.これは、あなたのベースのCSSファイルに@ applyを使ってPostccssを使って行います.
スタイルに2つの方法を示しましょう


デフォルトの風車ボタンスタイリング

<div>
   <button class="px-3 py-3 bg-blue-200 shadow-lg transition ease-in-out duration-300 rounded-lg whitespace-nowrap font-semibold;">I'm a button</button>
</div>

グループ化されたコンポーネントクラス

@tailwind base;
@tailwind components;
@tailwind utilities;
.bluebtn {
  @apply px-3 py-3 bg-blue-200 shadow-lg transition ease-in-out duration-300 rounded-lg whitespace-nowrap font-semibold;
}

次に、HTMLのクリーナーを読みやすく読みやすくするために、HTMLのボタンを標準クラスで呼び出すことができます.

<div>
     <button class="bluebtn">I'm a button</button>
</div>

これにより、複数のボタンを作成するだけでなく、クラスの“bluebtn”を割り当てる必要があります他のTailWindCSSクラスのすべてを追加します.

プレイグラウンド
あなたはここでTruwindと遊ぶことができます.ボタンを緑色に変更して丸めを削除してみてください.
CodeSandbox

結論
Tailwindは私のフロントエンドの生活をとても簡単にしました.私はコンポーネントベースのライブラリやフレームワークでたくさん働きます.TailWindCSSを使用すると、簡単なコンポーネントのスタイルを作成し、その1または1000回をレンダリングし、非常に使いやすいCSSライブラリで同じスタイルを得ることができます.私は絶対に伝統的なCSSを書く必要がない限り.私はまた、ToodWindowのためにjsでsassとcssを使用するのを止めました.
あなたがそれを試みていないならば、私はあなたがそれと一緒に遊んで、若干のスタイルを加えてみるために上記のリンクを使っている少なくとも5分を使うことを勧めます.