Tailwind CSS Atomic クラスをプロジェクトに追加する理由 ❓

問題

• 多くの UI 開発者が参加するプロジェクトでは、必要に応じてそれぞれが独自のカスタム CSS クラスを宣言して、独自の方法でコンポーネントのコーディングを開始します。

伝統的な方法

ページ内で「div」を中央に配置するというよく知られた簡単な問題を考えるとき、これが通常、必要なスタイルをすべて備えたクラスを作成する方法です。

<template>
    <div>



<p>output :- </p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173397481225444.jpg" class="lazy" alt="Why add Tailwind CSS Atomic Classes to project ❓"></p>

<p>Pros :- </p>

• Developers can add any styling for the classes as they please.

Cons :-

• As project grows, there won't be any uniformed styling for the project.
• It becomes tedious to apply same styles for new modules, as develepoers need to apply them themselves.
• Developer intent is not clear, i.e class name is "center-div" but inner styling can be anything they desire.

Tailwind philosophy

Building complex components from a constrained set of primitive utilities.

• We need to break a component classes from group up with Atomic classes.

<template>
    <div
       >



<p>Output</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173397481369954.jpg" class="lazy" alt="Why add Tailwind CSS Atomic Classes to project ❓"></p>

<p>What Happened, where are the classes ⁉️</p>

• As you can see from the code above we have used quite a few classes in our "div"

class="box-border absolute flex justify-items-center top-1-2 left-1-2 fill-gray-alpha color-fill max-w-sm"

• Each class is registered in the global application scope, which goes like this

.box-border {
    box-sizing: border-box;
}

.absolute {
    position: absolute;
}

.flex {
    display: flex;
}

.justify-items-center {
    justify-items: center;
}

.top-1-2 {
    top: 50%
}

.left-40-p {
    left: 40%;
}

.max-w-sm {
    max-width: 24rem; /* 384px */
}

• これらのクラスはすべてグローバル スコープで利用できるため、開発者は誰でも自由に使用できます。

長所

• CSS バンドルのサイズを大幅に削減します。
• コンポーネントのスタイルがチーム全体で一貫していることを保証します。
• 開発者は、同じスタイルをやり直す手間が少なく、アイデアのプロトタイプを迅速に作成できます。

短所

• 学習曲線では、各開発者は既存のクラスに慣れる必要があります。
• プロジェクトは、他の人が使用できるようにこれらのグローバルに宣言されたクラスを追加するとき、適切なドキュメントを保管する必要があります。

Vue JS の落とし穴

:deep() / ::v-deep

• ベイン? Vue JS CSS ターゲティングの。

伝統的なクラス

• クラスのターゲット設定とスタイルの適用は非常に簡単です

div {
    ::v-deep .center-div {
        background-color: red;
    }
}

対風クラス

• 開発者は、「div」をターゲットにする場合、非常に創造性を発揮する必要があります。

div {
    ::v-deep :first-of-type {
        background-color: red;
    }
}

Tailwind CSS クラスをアプリケーションに導入する方法

伝統的な方法

• これらは
で簡単にインストールできます

Tailwind インストール

npm install -D tailwindcss
npx tailwindcss init

• しかし、これにより、グローバル スコープ内に大量のすべてのクラスがインストール (つまり、登録) されます。

型破り？方法

• アプリケーションに既存の CSS ライブラリがある場合は、必要なクラスを厳選して 1 つの CSS ファイルに追加し、アプリ内でグローバルに登録することが理想的です。

• アプリケーションがフレックスボックス スタイルの柔軟性のみを必要としているとします
  -- フレックス スタイルから必要なクラスのリストを取得します

• クラスを選んでみてはいかがですか?仮定する ？アプリケーションが必要とするものを選択し、必要に応じて追加します。

• この方法により、CSS バンドルを大幅に小さく保つことができますが、開発チームは適用する CSS を厳密に制御する必要があります。
  

/* FlexBox */
.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-col {
    flex-direction: column;
}

.flex-col-reverse   {
    flex-direction: column-reverse;

}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.grow {
    flex-grow: 1;
}

.grow-0 {
    flex-grow: 0;
}

.shrink {
    flex-shrink: 1;
}
.shrink-0 {
    flex-shrink: 0;
}
.justify-normal {
    justify-content: normal;
}
.justify-start {
    justify-content: flex-start;
}
.justify-end {
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.justify-around {
    justify-content: space-around;
}
.justify-evenly {
    justify-content: space-evenly;
}
.justify-stretch {
    justify-content: stretch;
}
.justify-items-start {
    justify-items: start;
}
.justify-items-end {
    justify-items: end;
}
.justify-items-center {
    justify-items: center;
}
.justify-items-stretch {
    justify-items: stretch;
}
.justify-self-auto {
    justify-self: auto;
}
.justify-self-start {
    justify-self: start;
}
.justify-self-end {
    justify-self: end;
}
.justify-self-center {
    justify-self: center;
}
.justify-self-stretch {
    justify-self: stretch
}
.content-noraml {
    align-content: normal;
}
.content-center {
    align-content: center;
}
.content-start {
    align-content: start;
}
.content-end {
    align-content: end;
}
.content-between {
    align-content: space-between;
}
.content-around {
    align-content: space-around;
}
.content-evenly {
    align-content: space-evenly;
}
.content-baseline {
    align-content: baseline;
}
.content-stretch {
    align-content: stretch;
}
.items-start {
    align-items: start;
}
.items-end {
    align-items: end;
}
.items-center {
    align-items: center;
}
.items-baseline {
    align-items: baseline;
}
.items-stretch {
    align-items: stretch;
}

// Align Self 
.self-auto {
    align-self: auto;
}

.self-start {
    align-self: flex-start;
}

.self-end {
    align-self: flex-end;
}

.self-center {
    align-self: center;
}

.self-stretch {
    align-self: stretch;
}

.self-baseline {
    align-self: baseline;
}

結論

• Tailwind で Atomic クラスを参照として使用すると、
• プロジェクトの CSS フットプリントを削減します。
• アプリケーション全体でスタイルの一貫性を維持します。
• 迅速なプロトタイピングにより、開発者の速度が向上します。 ?

以上がTailwind CSS Atomic クラスをプロジェクトに追加する理由 ❓の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。