Tailwind CSS für Oberflächen
Tailwind CSS gestaltet Oberflächen über kleine Klassen direkt am Element, statt über getrennte Stildateien. Abstände, Farben und Schriftgrößen kommen aus einem festen Vorrat, damit nicht jede Seite anders aussieht.
Wenn es passtWir setzen Tailwind ein, wenn euer Team damit weiterarbeitet, sonst schreiben wir CSS ohne Zusatz.
Was wir mit Tailwind CSS bauen
Design & Medien
Gestaltung, Bilder und Videos, damit die Seite nach euch aussieht und nicht nach Vorlage.
Webseiten
Die Seite, über die euch Kunden finden. Schnell geladen und so gebaut, dass Google sie versteht.
Webanwendungen
Werkzeuge, die im Browser laufen. Für Abläufe, die bisher in Excel-Tabellen und E-Mails hängen.
Onlineshops
Verkaufen im Netz, angebunden an das, was ihr schon nutzt. Warenwirtschaft, Zahlung, Versand.
Was ist Tailwind CSS
Tailwind CSS ist ein quelloffenes CSS-Framework, 2017 von Adam Wathan und Mitstreitern veröffentlicht. Statt fertiger Bauteile wie Knopf oder Karte liefert es viele kleine Klassen, die je eine Eigenschaft setzen, etwa einen Abstand oder eine Textfarbe. Die Gestaltung steht damit im HTML beim Element und nicht in einer eigenen Datei mit selbst erfundenen Namen.
Der Nutzen liegt in den Grenzen: Abstände, Farben und Größen kommen aus einer festgelegten Skala, die im Projekt einmal definiert wird. Damit gibt es keine dreiundzwanzig ähnlichen Blautöne und keine Abstände von siebzehn Pixeln, weil es gerade passte. Beim Bauen wird nur das ausgeliefert, was tatsächlich verwendet wird, sodass die Stildatei klein bleibt. Anders als Bootstrap gibt Tailwind kein Aussehen vor, die Gestaltung bleibt eure.
Eine Krankenkassen-Agentur betreut zwölf Landingpages und ein Kundenportal, gebaut von wechselnden Dienstleistern. Jede Seite hat eigenes CSS, und eine Änderung an der Hausfarbe bedeutet zwölfmal suchen. Mit Tailwind und einer gemeinsamen Konfiguration liegen Farben, Abstände und Schriftgrößen an einer Stelle, und die Seiten greifen darauf zu. Wer neu dazukommt, sieht am Element, was es tut, statt eine fremde Namenslogik zu entschlüsseln.
- Entwickelt von
- Tailwind Labs, quelloffen
- Erschienen
- 2017
- Art
- CSS-Framework aus einzelnen Hilfsklassen
- Lizenz
- MIT, kostenfrei nutzbar
- Unterschied zu Bootstrap
- Gibt kein fertiges Aussehen vor
Welches Framework passt zu euch
Fünf Fragen, keine Eingabe von Daten. Am Ende steht eine Empfehlung, auch wenn sie auf eine andere Seite führt als diese.
Frage 1 von 5
Was baut ihr?
- Was baut ihr?
- Was ist bei euch schon im Einsatz?
- Sollen Suchmaschinen die Inhalte lesen?
- Braucht ihr auch den Teil auf dem Server?
- Wer arbeitet später damit?
Womit wir arbeiten
Wir bauen mit aktueller Technik, nicht mit einem Baukasten. Das ist der Unterschied, den man erst merkt, wenn etwas geändert werden soll, das der Baukasten nicht vorgesehen hat.
Sprachen
Frameworks
Cloud und Betrieb
Fragen zu Tailwind CSS
Wann lohnt sich Tailwind CSS?
Wenn mehrere Leute an derselben Oberfläche arbeiten oder mehrere Seiten gleich aussehen sollen. Die feste Skala verhindert, dass sich Farben und Abstände auseinanderentwickeln. Auch bei Oberflächen mit vielen Zuständen ist es angenehm, weil Gestaltung und Markup zusammenstehen und man beim Ändern nicht zwischen Dateien springt. Für Teams ohne eigenes Design-System ist es ein guter Rahmen.
Wann lohnt es sich nicht?
Bei einer kleinen Seite mit einer Handvoll Vorlagen ist eigenes CSS kürzer und lesbarer. Auch wenn euer Team klassisches CSS pflegt und die Klassenketten im HTML als unübersichtlich empfindet, wird Tailwind zum Streitpunkt statt zur Hilfe, und die Pflege leidet. Diese Webseite selbst nutzt aus dem Grund SCSS-Module. Wir richten uns danach, wer den Code später anfasst.
Was ist der Unterschied zu Bootstrap?
Bootstrap liefert fertige Bauteile mit eigenem Aussehen, weshalb Bootstrap-Seiten oft erkennbar sind. Tailwind liefert nur Bausteine für die Gestaltung, das Aussehen entsteht bei euch. Bootstrap ist schneller für einen Verwaltungsbereich, Tailwind besser, wenn ein eigenes Erscheinungsbild umgesetzt werden soll.
Passt Tailwind zu unserem Corporate Design?
Ja, das ist der übliche Weg. Eure Farben, Schriften und Abstände werden in der Konfiguration hinterlegt und ersetzen die Voreinstellungen. Danach benutzt das Projekt nur noch eure Werte, und Abweichungen fallen im Code sofort auf. Vorgaben aus einem Styleguide lassen sich so verbindlich machen.
Wird das HTML davon nicht unübersichtlich?
Die Klassenketten sind gewöhnungsbedürftig, das stimmt. In der Praxis fällt es kaum ins Gewicht, weil sich wiederholende Teile ohnehin zu Komponenten werden und die Klassen dort einmal stehen. Wer es nicht mag, sollte Tailwind nicht einsetzen, denn dieser Punkt lässt sich nicht wegkonfigurieren.
Kontakt und kostenlose Beratung
