Ersetzt ein Framework die Verwendung von CSS-Dateien?

21.07.2023

Heute möchten wir euch eines unserer Werkzeuge vorstellen, dass wir mittlerweile in vielen Frontend-Projekten verwenden. Tailwind CSS rangiert laut Umfragen ( State of CSS ) auf Rang 1 der beliebtesten Frameworks. Das bekannte Framework Bootstrap ist zwar bei den meisten langjährigen Projekten in Verwendung, mit Blick auf das allgemeine Interesse und die Zufriedenheit in der Anwendung, liegt hier Tailwind vorne. Bootstrap ist in vielen großen Projekte verankert und ist zum Schmerz vieler nicht ganz so einfach aus einem Projekt zu entfernen oder zu updaten. Dies würde einen hohen Zeitaufwand benötigen, den viele nicht gewillt sind zu bezahlen. Tailwind CSS ist im Gegensatz vieler anderer Frameworks ein Utility-First Framework. Das heißt, es verwendet sogenannte Utility-Klassen, die immer nur eine Funktion haben. Diese Funktion wird durch ihren Namen ausgedrückt. Im Folgenden schauen wir uns Tailwind CSS genauer an und gehen auf einige Vorteile, die das Framework mit sich bringt, ein.

Wie funktioniert Tailwind CSS überhaupt?

Nutzt man Tailwind CSS in seinem Projekt, benötigt man im Normalfall nur eine einzige CSS-Datei. In dieser Datei werden Voreinstellungen von Tailwind CSS importiert und es können noch weitere allgemeine Anpassungen vorgenommen werden. Das komplette Styling der Anwendung wird dann über die Utility-Klassen im HTML-Code umgesetzt.
Schauen wir uns anhand eines Beispiels an, was genau das bedeutet. Ein Button ist eine Komponente, die in nahezu jedem Projekt benötigt wird. Die Code-Schnipsel zeigen, wie der rechts dargestellte Button inklusive Hover-Effekt einmal mithilfe von Tailwind CSS und einmal mit Standard CSS gestaltet wird. Man erkennt auf einen Blick, dass man mit der Verwendung von Tailwind CSS eine Menge an Zeilen und damit Zeit spart.
Standard CSS
1
2
3
4
 
<!-- HTML -->
<button class='button-primary'>
    Button
</button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
 
// CSS
.button-primary {
    background-color: var(--actidoo-blue-primary)
    padding: 0.5rem 1rem 0.5rem 1rem;
    color: white;
    transition: 0.5s all;
}

.buttom-primary:hover {
    background-color: var(--actidoo-blue-400)
}
Mit Tailwind CSS
1
2
3
4
 
<!-- HTML -->
<button class='px-4 py-2 text-white bg-actidoo-blue-primary hover:bg-actidoo-blue-400 transition-all'>
    Button
</button>

Die einzelnen Klassen im button-Tag definieren jeweils eine CSS Eigenschaft mit einem bestimmten Wert.

Kleinstmögliche CSS Datei ohne überflüssige Deklarationen

Nur das, was wirklich im Projekt verwendet wird

Tailwind CSS ist stark leistungsorientiert, man erhält in der Anwendung immer die kleinstmögliche CSS-Datei. Beim Kompilieren des Projekts generiert das Framework eine CSS-Datei, die nur das CSS beinhaltet, welches in Ihrem Projekt verwendet wird. Das Framework geht dabei über den geschriebenen Code und generiert eine Datei, die nur die verwendeten Utility-Klassen beinhaltet. Netflix setzt zum Beispiel für ihre Top 10 Webseite auf Tailwind CSS. Die gesamte Webseite liefert nur etwa 6,5 KB CSS über das Netzwerk. Dadurch ist die Performance der Seite bezüglich CSS stark optimiert. Facebook hat ebenso gezeigt, dass die Verwendung von Tailwind CSS große Performanceoptimierungen bringt. Bei einem Redesign der Plattform wurde komplett auf Tailwind CSS gesetzt. Beim Seitenaufruf werden dabei um die 80% an Daten gespart. Bei Verwendung normaler CSS Dateien wird der Code durch unnötigen CSS-Überbleibseln im Laufe der Zeit immer weniger lesbar. Denn schreibt man den Code anstelle mit normalen CSS-Dateien und entsprechenden Klassen, so wird es immer Definitionen geben, die irgendwann nicht mehr benötigt werden. Wird zum Beispiel eine Komponente optimiert und es entfallen im HTML-Bereich einige Zeilen Code und neue kommen dazu, dann wird schnell vergessen, die entsprechenden CSS-Selektoren ebenso zu entfernen. Mit Tailwind CSS hingegen wird beim Entfernen des Codes in einem Zug das CSS mit entfernt. Der Code bleibt aufgeräumt.

Einfach für alle Screens optimierbar

Utility-Klassen um Breakpoints erweitern

Es ist ein leichtes ein responsives, adaptives User Interface mithilfe von Tailwind CSS zu bauen. An jede (wirklich jede) Utility-Klasse können verschiedene Breakpoints angebracht werden. Ab dem jeweils verwendeten Breakpoint wird die Utility-Klasse dann an dem HTML-Element angewandt. Es gibt von Tailwind CSS fünf Breakpoints im Default, dieser kann über die Konfiguration allerdings beliebig angepasst werden. Standardmäßig verwendet Tailwind CSS den Mobile-First Ansatz. Das heißt, alle Klassen gelten für den kleinsten Screen. Anpassungen werden dann für die größeren Bildschirme eingebaut. Im folgenden Beispiel kann man gut erkennen, wie viel Code man sich spart und wie einfach es ist, responsive Anpassungen vorzunehmen:
Standard CSS
1
2
3
4
 
<!-- HTML -->
<div class='content'>
  Inhalt mit Padding
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
 
<!-- CSS -->

.content {
  padding: 0.5rem
}

@media (min-width: 768px) {
  .content {
    padding: 1rem
  }
}

@media (min-width: 1024px) {
  .content {
    padding: 2rem
  }
}
Mit Tailwind CSS
1
2
3
4
 
<!-- HTML mit Tailwind CSS -->
<div class='p-2 md:p-4 lg:p-8'>
  Inhalt mit Padding
</div>

Hier wird mithilfe der Utility-Klasse "p" (p für Padding) ein Abstand von 0,5rem bis 2rem (8px bis 32px) eingefügt. Durch die Breakpoints md und lg wird der Abstand für die jeweiligen Screengrößen erhöht.

Konfiguration eines eigenen Designsystems

Einheitliches Design in der ganzen Anwendung

Über eine Konfigurations-Datei können innerhalb des Projekts Ihre Designvorgaben festgelegt werden. Dadurch wird die Nutzung der Farbauswahl, Abstände, Typografie, Schatten und viele weitere Eigenschaften auf die Vorgaben ihres Designsystems eingeschränkt. Jeder Entwickler ist dazu gezwungen nach diesen Einschränkungen zu arbeiten und es entstehen keine willkürlichen Werte, die nicht mehr durchschaut werden können. Dank einiger Erweiterungsmöglichkeiten für die IDEs werden die festgelegten neuen Klassen auch in der Autovervollständigung vorgeschlagen.
Beispiel Farbsystem

Schwieriger Einstieg ohne CSS-Erfahrung

CSS Kenntnisse von Vorteil

Für Entwickler ohne Erfahrung im Bereich CSS ist das Framework nicht direkt geeignet. Startet man ohne Erfahrung mit Tailwind CSS erlernt man nur schwer, wie CSS funktioniert. Man sollte solide Kenntnisse vorweisen können, wie zum Beispiel Media Queries, Flexbox und das Gridsystem funktionieren, um Tailwind CSS besser anwenden zu können. Außerdem lernt man die Namen der Utility-Klassen, die manchmal weit weg sind von den echten CSS-Eigenschaften.

Zusammengefasst

Wenn man sich im Projekt für die Gestaltung mit Tailwind CSS entscheidet, dann ersetzt das Framework tatsächlich die Verwendung von CSS-Dateien. Wie wir gesehen haben, bringt dies auch einige Vorteile mit sich. Bei richtiger Anwendung haben Entwickler die Möglichkeit einen sehr hohen Individualisierungsgrad zu erreichen. Ohne umfassende Vorkenntnisse und Erfahrung in CSS wird die Anwendung von Tailwind CSS in dieser Klasse jedoch eher schwer. Eine starke und aktive Community im Hintergrund sorgt für stetig neue Plugins und Erweiterungen für Tailwind CSS, die Entwicklern die Arbeit nochmals erleichtern. Dadurch wird die Anwendung immer effektiver, wovon am Ende auch wieder unsere Kunden profitieren.

Vorteile

Nachteile

Ist Tailwind CSS auch für Ihre Anwendung geeignet?

Als Spezialist im Bereich der Digitalisierung unterstützen wir Sie gerne bei der Evaluierung der passenden Technologien für Ihre Anwendung.
Kontakt aufnehmen
Nadine Krietenbrink

Nadine Krietenbrink

Über die Autorin

Nadine ist Spezialistin für User Experience Design und Frontend-Entwicklung. Bei actidoo beschäftigt sie sich mit der Erstellung komplexer Prototypen und der Umsetzung von Webapplikationen. Mit ihrer Leidenschaft für qualitative UIs möchte sie dem Endnutzer nicht nur eine Freude bereiten, sondern ihm auch mit einer intuitiven Bedienung die Nutzung erleichtern.

Kostenlos, online & schnell
Zur Terminauswahl

Wir verwenden Cookies

Wir verwenden Cookies, um Ihnen die bestmögliche Erfahrung auf unserer Website zu bieten. Analysetools helfen uns, die beliebtesten Inhalte zu ermitteln und zu verbessern. Außerdem möchten wir herausfinden, wie gut unsere Werbeanzeigen funktionieren. Details finden Sie im Bereich Datenschutz. Bitte wählen Sie aus, welche Cookies Sie akzeptieren möchten:

Datenschutz

 |  

Impressum