Tailwind CSS Atomic クラスをプロジェクトに追加する理由 ❓-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

Susan Sarandon

Dec 12, 2024 am 11:40 AM

問題

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

伝統的な方法

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

<template>
    <div>



<p>output :- </p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173397481225444.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Why add Tailwind CSS Atomic Classes to project ❓"></p>

<p>Pros :- </p>

<ul>
<li>Developers can add any styling for the classes as they please. </li>
</ul>

<p>Cons :- </p>

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

<h3>
  
  
  Tailwind philosophy
</h3>

<blockquote>
<p>Building complex components from a constrained set of primitive utilities.</p>
</blockquote>

<ul>
<li>We need to break a component classes from group up with Atomic classes.
</li>
</ul>

<pre class="brush:php;toolbar:false"><template>
    <div>



<p>Output</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173397481369954.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Why add Tailwind CSS Atomic Classes to project ❓"></p>

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

<ul>
<li>As you can see from the code above we have used quite a few classes in our "div"</li>
</ul>

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

<ul>
<li>Each class is registered in the global application scope, which goes like this
</li>
</ul>

<pre class="brush:php;toolbar:false">.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;
}

結論