Warum dem Projekt Tailwind CSS Atomic Classes hinzufügen ❓

Problem

• Wenn Sie Projekte mit vielen UI-Entwicklern durchführen, beginnen Sie damit, Komponenten auf ihre eigene Art und Weise zu codieren, wobei jede je nach Bedarf ihre eigenen benutzerdefinierten CSS-Klassen deklariert.

Traditioneller Weg

Wenn wir ein einfaches, bekanntes Problem betrachten, um ein „div“ auf einer Seite zu zentrieren, erstellen wir normalerweise eine Klasse auf diese Weise mit allen erforderlichen Stilen.

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

• Da alle diese Klassen im globalen Bereich verfügbar sind, kann jeder Entwickler sie frei verwenden.

Vorteile

• Reduziert die Größe des CSS-Bundles erheblich.
• Stellt sicher, dass das Komponenten-Styling im gesamten Team konsistent ist.
• Entwickler können ihre Ideen schnell in Prototypen umwandeln, ohne den Aufwand für die Überarbeitung desselben Stils zu verringern.

Nachteile

• Lernkurve: Jeder Entwickler muss sich mit bereits vorhandenen Klassen vertraut machen.
• Das Projekt muss eine ordnungsgemäße Dokumentation führen, wenn diese global deklarierten Klassen hinzugefügt werden, damit andere sie nutzen können.

Vue JS-Fallstricke

:deep() / ::v-deep

• das Wasserbad ? des Vue JS CSS-Targetings.

Traditionelle Klassen

• Das Targeting und Anwenden von Styling für die Kurse ist sehr einfach

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

Taiwind-Kurse

• Entwickler müssen sehr kreativ sein, wenn sie auf „div“ abzielen.

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

So führen Sie Tailwind-CSS-Klassen in Ihre Anwendung ein

Traditioneller Weg

• Wir können sie ganz einfach mit
installieren

Rückenwind-Installation

npm install -D tailwindcss
npx tailwindcss init

• Aber dadurch wird eine Fülle aller Klassen im globalen Bereich installiert (d. h. registriert).

Unkonventionell? Weg

• Wenn Ihre Anwendung bereits über eine vorhandene CSS-Bibliothek verfügt, wäre es ideal, die von uns benötigten Klassen auszuwählen, sie in einer CSS-Datei hinzuzufügen und sie global in der App zu registrieren.

• Angenommen, Ihre Anwendung möchte nur Flexibilität beim Flexbox-Design
  -- Holen Sie sich eine Liste der Klassen, die Sie von Flex Styles benötigen

• Wählen Sie die Kurse aus, die Sie bevorzugen? annehmen ? Ermitteln Sie die Anforderungen Ihrer Anwendung und fügen Sie sie je nach Bedarf hinzu.

• Auf diese Weise können wir das CSS-Bundle deutlich klein halten, aber das Entwicklungsteam muss eine strenge Kontrolle über das CSS haben, das es anwendet ?.
  

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

Schlussfolgerung

• Die Verwendung von Atomic-Klassen mit Tailwind als Referenz kann
• Reduzieren Sie den CSS-Footprint eines Projekts.
• Sorgen Sie für ein einheitliches Styling in der gesamten Anwendung.
• Erhöht die Entwicklergeschwindigkeit durch schnelles Prototyping. ?