角V 12による風変わりなCSS－あなたが知っている必要があるもの

角V 12で、TailWindCSSのための非常に待望のサポートをしています、Tailwindは、より速いUI開発のためにマイクロCSSクラスの深いカタログを含んでいるユーティリティ最初のCSSフレームワークです.
マイクロCSSクラスはCSSスタイルのコレクションです.これは以下のように簡単にできます.

 .static {
  position: static
}

より複雑なものに

.inset-0 {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px
}

TuwindはUIキットを持っていないUIデザインの作業時に任意のパターンに依存しません.UIデザインを実装する方法について開発者に完全な制御を与えます.

なぜ風変わりなのか?

ジャストインタイムモード:これはまだプレビューされていますが、Tarwindはあなたのスタイルを要求に応じて生成するジャストインタイムコンパイラを持っています.これは、開発中に高速ビルド時間とより良いブラウザのパフォーマンスをもたらします.Learn More

ダークモード:現代的なオペレーティングシステムのすべての光と暗いモードでは、Tailwind簡単にするときに暗いモードが有効になっているスタイルをあなたのUIに簡単になります.Learn More

能力を最適化するための生産:TuWallow未使用のクラスを削除することによって、最終的なスタイルのバンドルサイズを最適化します.この結果、ビルドサイズが小さくなります.Learn More

簡単にカスタマイズ可能:Tailwindは、さらにフレームワークをカスタマイズする能力を向上させるディレクティブと機能のセットが付属しています.Learn More

削減学習曲線:尾風では、CSSの専門家である必要はありません.基本的なCSSの知識を使用すると、近代的なWebページを作成するために提供するすべての様々なユーティリティクラスを使用することができます.

他のUIフレームワークを使用する
はい、ブートストラップ、角度の材料のような他のフレームワークで使用されるときにTailwindはうまく動作します.しかし、以下のような問題があります.

クラス名が重なります:bootstrapのようなUIフレームワークは、それ自身のセットのユーティリティクラスとともに来ます.クラス名を考えますmb-10 , どちらがブートストラップとテールウインドに存在します.同じプロジェクトにブートストラップとテールウィンドを使用するとき、これがどのように問題になるかをはっきりと見ることができます.

クラス名の重複を避けるために、Tarwindはtailwind.config.js ファイル

// tailwind.config.js
module.exports = {
    prefix: 'tw',
}

さて、Tailwindクラスを使用する場合は、追加されたプレフィックスを含めてください.

 <span class="tw-text-gray-800 tw-font-medium">Welcome</span>

Truwind Base Layer CSS resetを削除します.デフォルトでは、Tarwindはブラウザのデフォルトスタイルを正常化して削除するページにCSS resetを実行します.これは、クロスブラウザの矛盾にスムーズにこれを行います.他のCSSフレームワークでTailwindを使用する場合は、既存のプロジェクトで使用される場合は特に問題が発生する可能性があります.これを避けるために、単にテールウインド予備飛行層をオフにします.これはCSSのリセットは行われません.

// tailwind.config.js
module.exports = {
    corePlugins: {
      preflight: false,
    },
}

TailWinCSSの設定
TailWindCSSは、フレームワークのすべての単一の側面を設定する機能を備えて設計されました.設定ファイルを使用して特定のニーズを満たすために、ToodWinCcssを追加、削除、または編集できます.Learn More

角を曲げる
角12のリリースで角で完全にサポートされているTarwindで、角でテールウィンドを設定するには、これらの簡単な手順が必要です.

NPMまたは糸を使用してTailWindCSSをインストールします.
このコマンドを実行して、TailWinCSSをインストールします

npm install -D tailwindcss
#or yarn
yarn add tailwindcss -D

設定ファイルを生成する
アングルプロジェクトのルートで、このコマンドを端末で実行し、Tailwind CLI

npx tailwindcss init

最適なパフォーマンスについては、次のあなたのtailwind.config.js ファイル.

有効な時刻モードを有効にする
Just in Time Mode , ビルド時間を最適化し、開発中により良いブラウザパフォーマンスを確保する.

module.exports = {
    mode: 'jit',
    purge: [
      // ...
    ]
    // ...
}

未使用のCSSスタイルを無効にします.Tarwindがすべての未使用のCSSクラスを削除し、パージを有効にし、TailWindCSSクラスを消費するすべてのファイルにパスを提供するようにするにはtailwind.config.js ファイル.これは、より小さいサイズのスタイルバンドルをもたらすでしょう.

module.exports = {
    mode: 'jit',
    purge: {
      enabled: true,
      content: ['./src/**/*.{html,ts}']
}
}

あなたのグローバルスタイルファイルに

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

TailWindCSSが正しく動作していることを確認するには、すべてのコンポーネントでHTMLファイルに追加します.

<button class="py-2 px-3 m-2 bg-blue-500 hover:bg-nav-hover-blue rounded-md text-white">Click Me!</button>

上の画像のように見えます.あなたのHTMLタグに追加されたクラスの束を持っていないか、または他のHTMLタグに同じスタイルを再利用することを計画したい場合は、TailWindCSSを使用することができます@apply つの呼び出しですべてのクラスをグループ化するディレクティブ.次のようになります.

.tw-blue-btn {
    // apply group style
    @apply py-2 px-3 m-2;
    @apply bg-blue-500 hover:bg-blue-700;
    @apply rounded-md;
    @apply text-white;
  }

<button class="tw-blue-btn">Click Me!</button>

最終語
Tailwindは、優れた、簡単にUIの開発のためのCSSフレームワークを使用して簡単です.これはシームレスに小さなプロジェクトやエンタープライズグレードプロジェクトで動作します.あなたのCSSの経験レベルに関係なく、簡単にスクラッチからユニークでモダンなUIを作成することができます.

プロジェクト
Git :https://github.com/ishedu/tailwind-angular
ライブアプリケーションhttps://tailwindcss-angular.web.app/

有用資源
Tailwind Official Documentation
Tailwind Useful Tools
Tailwind Cheatsheet