Tailwind CSS ist ein Utility-First-CSS-Framework voller Klassen, die zusammengestellt werden können, um jedes Design direkt in Ihrem Markup zu erstellen.

Merkmale:

Dienstprogramm zuerst:

Tailwind CSS ist ein Utility-First-CSS-Framework, das Low-Level-Utility-Klassen zum Erstellen benutzerdefinierter Designs bereitstellt, ohne CSS schreiben zu müssen. Dieser Ansatz ermöglicht es uns, ein vollständig benutzerdefiniertes Komponentendesign zu implementieren, ohne eine einzige Zeile benutzerdefiniertes CSS zu schreiben. „Sie verschwenden keine Energie damit, Klassennamen zu erfinden“.

Inhaltsbereinigung:

Es handelt sich um den Prozess des Entfernens nicht verwendeter CSS-Klassen aus der endgültigen CSS-Datei, die in der Produktionsumgebung verwendet wird. Es handelt sich um einen Optimierungsprozess, bei dem die endgültige CSS-Größe kleiner, einfacher zu warten und eine verbesserte Leistung zeigt.

Befehle:

Unterstreichen:

underline 
underline-offset-
decoration-- //color for underline
decoration- // size of underline
decoration-

Textstil

text-- //color of text
text-opacity- //opacity of text
text- //size of text
text- //alignment of text

Hintergrundfarbe

bg--

Grenzradius

rounded-

Schriftstil

font-

Kursiv:

italic

Sichtweite

Elemente ausblenden:

hidden

Anzeigen (Gegenteil von Ausblenden):

block

Polsterung

p-   /* All sides */
px-  /* Horizontal (left and right) */
py-  /* Vertical (top and bottom) */
pl-  /* Left */
pr-  /* Right */
pt-  /* Top */
pb-  /* Bottom */

Marge

m-   /* All sides */
mx-  /* Horizontal (left and right) */
my-  /* Vertical (top and bottom) */
ml-  /* Left */
mr-  /* Right */
mt-  /* Top */
mb-  /* Bottom */

Flexbox

flex
flex- // row or column

Inhalt rechtfertigen

justify-

Elemente ausrichten

items- //start,end,center

Responsives Design

sm  /* Small devices */
md  /* Medium devices */
lg  /* Large devices */
xl  /* Extra large devices */

Größe

h-
w-

Grenzen

border
border-
border-

Hover-Zustände

hover: