Mengapa menambahkan Kelas Atom CSS Tailwind pada projek ❓

Masalah

• Apabila projek dengan banyak pembangun UI, mula mengekod komponen dengan cara mereka sendiri, masing-masing mengisytiharkan kelas css tersuai mereka sendiri, mengikut keperluan.

Cara tradisional

Apabila kami mempertimbangkan isu pengetahuan yang mudah untuk memusatkan "div" dalam halaman, beginilah cara kami biasanya membuat kelas, dengan semua penggayaan yang diperlukan.

<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 */
}

• Memandangkan semua kelas ini tersedia dalam skop global, mana-mana pembangun boleh menggunakannya secara bebas.

Kebaikan

• Mengurangkan saiz Himpunan CSS dengan ketara.
• Memastikan penggayaan komponen konsisten di seluruh pasukan.
• Pembangun boleh membuat prototaip idea mereka dengan pantas, dengan usaha yang kurang untuk membuat semula gaya yang sama.

Keburukan

• Keluk pembelajaran, setiap pembangun perlu membiasakan diri dengan kelas yang sudah sedia ada.
• Projek perlu menyimpan dokumentasi yang betul, apabila menambahkan kelas yang diisytiharkan Global ini untuk digunakan oleh orang lain.

Perangkap Vue JS

:deep() / ::v-deep

• the bain ? penyasaran css Vue JS.

Kelas Tradisional

• Menyasarkan dan Menerapkan penggayaan untuk kelas adalah sangat mudah

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

Kelas Taiwan

• Pembangun perlu menjadi sangat kreatif apabila menyasarkan "div"

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

Cara Memperkenalkan Kelas CSS Tailwind ke dalam Aplikasi anda

Cara tradisional

• kami boleh memasangnya dengan mudah dengan

Pemasangan Tailwind

npm install -D tailwindcss
npx tailwindcss init

• tetapi ini akan memasang (iaitu mendaftar) kebanyakan semua kelas, dalam skop global.

Tidak konvensional? cara

• apabila Aplikasi anda sudah mempunyai perpustakaan css sedia ada, adalah sesuai untuk memilih kelas yang kami perlukan dan menambahkannya dalam satu fail css dan mendaftarkannya secara global dalam Apl.

• Katakan Aplikasi anda hanya mahukan fleksibiliti dalam penggayaan flexbox
  -- Dapatkan senarai kelas yang anda perlukan daripada gaya flex

• ceri pilih kelas anda ? andaikan? keperluan aplikasi anda, dan tambahkannya mengikut keperluan.

• dengan cara ini kita boleh mengekalkan berkas CSS secara signifikan, tetapi pasukan pembangunan perlu mempunyai kawalan ketat ke atas css yang digunakan ?.
  

/* 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;
}

Kesimpulan

• Menggunakan kelas Atom dengan Tailwind sebagai rujukan boleh
• Kurangkan jejak CSS Projek.
• Kekalkan konsistensi Penggayaan di seluruh Aplikasi.
• Meningkatkan kelajuan Pembangun, dengan prototaip pantas. ?