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

問題

當專案中有許多 UI 開發人員時，開始以自己的方式編碼元件，每個元件根據需要聲明自己的自訂 css 類別。

傳統方式

當我們考慮一個簡單的眾所周知的問題時，將「div」放在頁面的中心，這就是我們通常創建一個具有所有必要樣式的類別的方式。

<template>
    <div>



<p>output :- </p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173397481225444.jpg" 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="https://img.php.cn/upload/article/000/000/000/173397481369954.jpg" 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 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;
}

登入後複製

結論