為什麼要將 Tailwind CSS 原子類別加入到專案中❓-css教學-PHP中文網

首頁

web前端

css教學

為什麼要將 Tailwind CSS 原子類別加入到專案中❓

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 Bundle 大小。
確保元件樣式在整個團隊中保持一致。
開發人員可以快速原型化他們的想法，而無需花費太多精力重做相同的風格。

缺點

學習曲線，每個開發人員都需要熟悉已經存在的類別。
在新增這些全域聲明的類別供其他人使用時，專案需要保留適當的文件。

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 程式庫時，最好選擇我們需要的類別並將它們新增至 css 檔案中，然後在應用程式中全域註冊。
假設您的應用程式只需要 Flexbox 樣式的彈性
-- 從 Flex 樣式中取得您需要的類別清單
櫻桃選課嗎？認為？您的應用程式需求，並根據需要添加它們。
透過這種方式，我們可以保持 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;
}

結論