なぜあなたの次のプロジェクトのためにTarwindを使用する必要があります

問題

新しいWebサイトやWebアプリケーションを構築するときは、プロジェクト内の任意の古いCSSフレームワークを使用して、コンテンツに焦点を当てる誘惑することができます.はい、それは素晴らしいが、それはまた、同じフレームワークを使用して99百万の他のウェブサイトのように見えます.それで、それを「目立つ」ようにするために、あなたはいくつかのスタイル上り坂を加えます、そして、次に、より多くの、そして、より多く.現在、あなたのサイトはいくぶんユニークです、しかし、また、あなたはHTMLより多くのCSSを書きました.
すべてのCSSフレームワークは、その利点と強さを持っています.初心者ユーザのために、多分デザインされたコンポーネント指向のフレームワークを使用することによってスタイリングを得るのはより簡単です.しかし、この記事のカバーは次のステップです.
複雑なスタイルは、互いに競合する、グローバルなスタイルシートをオーバーライドするコンポーネント、ページ上の3つの異なるオレンジ-物事は、より多くのカスタムUISに進むときに非常に迅速に乱雑になることができます.
そして、それは、Tuwind CSSのようなユーティリティ駆動フレームワークが助けることができるところです.
本稿では3つの主要な質問に答えます.

ユーティリティ駆動平均は何か?

典型的フレームワークにおけるコンポーネントクラスはいかにきれいでクリーンか

CSSフレームワークのカスタマイズはどのように簡単ですか?

ユーティリティ駆動？怖い

まず第一に、それは怖いです.説明しましょう.
大部分のCSSフレームワークとテンプレートは、あなたに動作するコンポーネントのトンを与えます.各コンポーネントは、特定の方法で設計され、その方法でコンポーネントを使用する必要があります.あなたがものを変えることに決めるならば、構成要素を一緒に持つ100以上のスタイルは、離れて落ちます.
tailwindでは、コンポーネントはありません.任意のクラスと無意味な階層を持つコンポーネントを貼り付ける必要がある代わりに、Tarwindの低レベルユーティリティクラスを使用してページを明示的に設計しますdiv 要素.
以下に、非常に人気のあるCSSフレームワークのブートストラップを使用したカードの例を示します.

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, eos!</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

そして、私はTrewindを使ってスクラッチから再現したのと同じコンポーネントです.

<div class="border text-gray-900 rounded p-2">
  <div class="p-2">
    <div class="font-medium text-xl mb-2">Card title</div>
    <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, eos!</p>
    <a href="#" class="rounded p-2 text-white bg-blue-600">Go somewhere</a>
  </div>
</div>

二つを比較すると、ブートストラップに比べて、HTMLのTarwindのユーティリティクラスをもう少し書かなければならないということがわかります.フォントサイズ、間隔、および色のためにすべての明示的に多くのクラスを書くために時間の無駄に思えるかもしれません.「主要なフレームワークは、私をより少なくより多くに与えます!」あなたの言うことが聞こえます.
はい、あなたは間違っていません.ユーティリティ駆動の手段であることを明示的に適用するすべてのスタイルを書く必要があります.コンポーネント駆動のフレームワーク、その間、あなたにちょうど2、3の予め定められたクラスを書いて、あなたにリターンで全部の構成要素を与えさせます.
しかし、それも物語の半分です.まだ2つの質問に我々が対処する必要があります.

余分の荷物

典型的な枠組みではcard , card-body , and card-text バックグラウンドで行う?
上記のサンプルプロジェクトの両方を見てみましょう.私は、完全なCSSソースファイルを両方のbootstrapとtailwindhere and here ), そしてそれらを走らせたPurgeCSS 未使用のCSSを取り除く.これは、私たちが書いたHTMLのスタイルに使われるCSSだけを残します.
まずブートストラップを見てみましょう.

/*!
 * Bootstrap v4.5.2 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

 h5 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:not([href]):not([class]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

 h5, .h5 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h5, .h5 {
  font-size: 1.25rem;
}

.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn:hover {
  color: #212529;
  text-decoration: none;
}

.btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

 .btn:disabled {
  opacity: 0.65;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-primary:focus {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

 .btn-primary:disabled {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:not(:disabled):not(.disabled):active {
  color: #fff;
  background-color: #0062cc;
  border-color: #005cbf;
}

.btn-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1.25rem;
}

.card-title {
  margin-bottom: 0.75rem;
}

.card-text:last-child {
  margin-bottom: 0;
}

@media print {
  *,
  *::before,
  *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }
  a:not(.btn) {
    text-decoration: underline;
  }
  p {
    orphans: 3;
    widows: 3;
  }
  @page {
    size: a3;
  }
  body {
    min-width: 992px !important;
  }
}

私たちは一見簡単に見えるカードをフォーマットするために使用されるCSSを見ることができます.HTMLで書いたクラスにマッチしないクラスがいくつか存在します.簡単にコーディング中には、高価なブラウザでは.
次のTarwindを見てみましょう.

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

a {
  background-color: transparent
}

 p {
  margin: 0
}

html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5
}

*, ::after, ::before {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e2e8f0
}

a {
  color: inherit;
  text-decoration: inherit
}

.bg-blue-600 {
  --bg-opacity: 1;
  background-color: #3182ce;
  background-color: rgba(49, 130, 206, var(--bg-opacity))
}

.rounded {
  border-radius: .25rem
}

.border {
  border-width: 1px
}

.font-medium {
  font-weight: 500
}

.text-xl {
  font-size: 1.25rem
}

.mb-2 {
  margin-bottom: .5rem
}

.mb-4 {
  margin-bottom: 1rem
}

.p-2 {
  padding: .5rem
}

.text-white {
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity))
}

ちょうど81行.清潔でシンプルできちんとした.CSSに存在する唯一のクラスは、コードで説明したものです.これはTailwindのユーティリティ駆動フレームワークの魔法です.あなたが何を見るかは、あなたが得るものです.
これらのパージされたCSSファイルの両方のサイズを見てみると、違いは明らかです.
フレームワーク
CSSのライン
CSS
ブートストラップ
230
5 KB
風車
81
1 KB

カスタムデザイン

最良のフレームワークは、道から出て、あなたが望むものを構築させるものです.Tarwindにも利点があります.例を見てみましょう.我々は、国境、より丸い角、明るい赤い背景と暗い上に暗く影のカードを作成したい.
ブートストラップでは、ユーティリティを使用して境界線を削除し、ベースシャドウを追加することができますが、背景色、余分な丸みのあるコーナー、およびホバーの暗い影のためにいくつかのカスタムCSSを記述する必要があります.次のようにします.

<style>
  .card {
    background-color: #f5b3af;
    border-radius: 0.5rem;
    transition: 0.5s;
  }
  .card:hover {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25) !important;
  }
</style>
<div class="card border-0 shadow">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, eos!</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ご覧のように、CSSフレームワークを使用しているにもかかわらず、すでにカスタムCSSを追加し始めました.これは非常に雑然と混乱を取得することができますし、完全なWebページやアプリケーションの設計を終えている時間.
Trewindを見てみましょう.我々はカスタマイズのすべてを作るために提供されるユーティリティの多数を使用することができます.我々はより多くの色のオプションは、右の日陰を選ぶことは簡単です右側の風に組み込まれている.また、ホバーのような変形のサポートが含まれています.これは、我々が書くことができることを意味しますhover: 例えば、ホバー上でのみそのスタイルを有効にするために、任意のユーティリティクラスが続きます.

<div class="rounded-lg shadow-xl hover:shadow-2xl p-2 bg-red-200">
  <div class="p-2">
    <div class="font-medium text-xl mb-2">Card title</div>
    <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, eos!</p>
    <a href="#" class="rounded p-2 text-white bg-blue-600">Go somewhere</a>
  </div>
</div>

ルック-いいえCSS!
そして、あなたは間違いなくカスタムCSSの1行を書くことなく、全体のアプリケーションを作成することができます.

ユニークな、汎用性の高い、メンテナンス可能

Tailwindは様々な設定オプション、プリセット、およびあなたのCSSを整理したり、クラスのための最良の命名規則の思考を費やすことなく、仕事を得るために役立つ何百ものユーティリティを持っています.
Tailwindの詳細については、ホップの上に素晴らしいwebsite 無限のドキュメントと詳細なビデオチュートリアルで.そして、shoutoutを与えることを忘れないでください!
このようなより多くのdevのヒントについては、私に従ってくださいsubscribe to my newsletter 科学技術について