why tailwindcss? (1)

intro
今年上半期、私的なプロジェクトをしていた時、tailwindcssを使うかどうか考えていましたが、内部の都合でインストールしただけで使えませんでした.今回は自分でブログを書く予定で、もう一度勉強しようと決心しました.あなたが慣れたら、私はあなたと一緒にwindi cssを勉強したいです.
why
なぜ尾风をストレートに使うのか.正式な書類を参照すると、以下の利点があります.
1. Utility-First Fundamentals
2. Responsive Design
3. Hover, Focus, and Other States
4. Dark Mode
5. Reusing Styles
6. Adding Custom Styles
7. Functions & Directives
これらの利点をすべて説明することはできませんが、コア部分なので、まずリストします.
Utility-First Fundamentals
vue開発者は、通常、vueファイルでtagsのスタイルにクラスを命名し、スタイルラベルで定義します.抽象名の作成も難題であり、templateとstyleの領域は別々であるため、上下輪でスクロールする必要がある.これが気に入らなければcssファイルを完全に分離してインポートするしかないのも面倒です.
tailwindは予め指定された機能のクラスを提供するので、スタイルラベルでクラスを個別に定義する必要はありません.重要なのは、あらかじめ指定したクラスをhtmlタグのクラスに入れるだけで、スタイルタグを使用する必要はありません.スタイル領域を全く使わないわけではないが,少なくともcssが肥大化することを防止できる.
css作成ボタンのみを使用する場合、通常は次のようになります.まず、着るスタイルのラベルに似た名前の等級を書きます.機能上の名前は似ているだけなので、仕事中に混同されます.また、各クラスにはcssを記入してスタイルを形成する必要がありますが、スタイル領域とテンプレート領域の間にスクリプト領域があり、一度に表示するのは不便です.scssのようなフロントプロセッサを使用すると、コード量が減少しますが、不便さは解消されません.

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

tailwindは、事前にスタイルを指定したクラスを提供し、ユーザーがスタイル領域を最小限に抑えるのを支援します.また、エレメントがどのようなスタイルを使用するかをすぐに知ることもできます.

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

しかし、この方法の仕事は不完全に見えます.たとえば、
インラインと何が違いますか?
2.教室は散らかっているのではないでしょうか.
同じ問題を思い出す.
公式文書は、イントラとは異なり、テール風は事前定義された設計システムを使用することができ、メディアクエリーができないイントラとは異なり、反応型を使用することもできると説明している.また、サスペンションやフォーカスなどの状態は変数のように使用できます.
2つ目の問題を解決するために、公式文書は2つの方法を提案した.または、以下に示すように、再利用可能なコンポーネントとして分離します.

<!-- PrimaryButton.vue -->
<template>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    <slot/>
  </button>
</template>

@applyを使用して、以下のように省略すればよい.

<!-- Using utilities -->
<button class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-sky-500 hover:bg-sky-700">
  Save changes
</button>

<!-- Extracting classes using @apply -->
<button class="btn btn-sky">
  Button
</button>

<style>
  .btn {
    @apply py-2 px-4 font-semibold rounded-lg shadow-lg;
  }
  .btn-sky {
    @apply text-white bg-sky-500 hover:bg-sky-700;
  }
</style>

Responsive Design
Webを反応型に実現するために,cssでメディアクエリを指定してスタイル設定を行うが,scssのようなフロントプロセッサを用いてもコードが長すぎるという問題がある.tailwindは、より便利に使用できるように、ブレークポイント用の接頭辞を提供します.|ブレーキポイント+sm、md|などのユーティリティクラスの順に貼り付け、このブレーキポイントを超えたときに設計を適用します.例えば、:は、画面サイズが中サイズを超える場合、背景色を赤(400)に適用することを示す.ブレークポイントの境界値は予め指定された値で、下図のようにmd:bg-red-400で直接カスタマイズできます.ちなみにtailwindはモバイルデバイスを優先的に適用します.