Technologie
Tailwind CSS
Een CSS-framework om ontwerpen snel en consequent om te zetten naar code, zonder overbodige stijlen.
Wat is Tailwind CSS?
Tailwind CSS is een open-source CSS-framework. In plaats van kant-en-klare componenten zoals knoppen en kaarten, geeft het kleine bouwstenen: een kleur, een marge, een lettergrootte, een afronding.
Met die bouwstenen wordt elk ontwerp rechtstreeks in de HTML opgebouwd. Daardoor ziet een site er niet uit als "nog een Tailwind-site", maar precies zoals ze ontworpen is.
Bij het bouwen houdt Tailwind enkel de stijlen over die echt gebruikt worden. Het resultaat is een klein CSS-bestand en een site die snel laadt.
Waarom Tailwind CSS?
De sterktes die het verschil maken in een echt project.
Trouw aan het ontwerp
Geen standaardlook om tegen te vechten. Elk detail uit het ontwerp is één op één na te bouwen.
Consequent
Kleuren, afstanden en lettergroottes komen uit één vaste set. Zo blijft de hele site in balans.
Licht
Alleen de stijlen die je site gebruikt, komen in het eindresultaat. Minder kilobytes, sneller laden.
Responsive
Aanpassingen voor gsm, tablet en desktop staan naast elkaar, wat schermen van elk formaat eenvoudig maakt.
Onderhoudbaar
Stijlen staan bij de elementen zelf. Een aanpassing raakt geen ander deel van de site per ongeluk.
Werkt overal
Tailwind past bij elk platform: Craft CMS, Laravel, WordPress, Drupal of React.
Is Tailwind CSS iets voor jou?
Een goede keuze als
- Je wil een site met een eigen ontwerp, niet een thema dat er net als duizend andere uitziet.
- Snelheid en een klein CSS-bestand zijn belangrijk.
- Je site moet op lange termijn uitbreidbaar blijven zonder rommelige stijlen.
Misschien niet als
- Je site draait op een bestaand thema met eigen stijlen. Tailwind erbij zetten zorgt dan vooral voor dubbel werk.
Hoe ik met Tailwind CSS werk
Tailwind is mijn standaard voor de frontend. Ook deze website is ermee gebouwd.
- Ontwerp als vertrekpunt. Kleuren, lettertypes en afstanden uit het ontwerp worden eerst vastgelegd als vaste waarden, zodat de code en het design dezelfde taal spreken.
- Herbruikbare componenten. Knoppen, kaarten en blokken worden één keer gebouwd en overal hergebruikt.
- Elk scherm. Ik bouw en test op gsm, tablet en desktop, niet enkel op een groot scherm.
Projecten met Tailwind CSS
Een selectie van werk waarin we Tailwind CSS inzetten.
Stone Hall Live Stock
Een live stockplatform voor graf- en urneveldstenen. Stone Hall beheert voorraad, producten en reservaties zelf via één backend.
Koda Trimsalon
Een rustige, persoonlijke website voor hondentrimsalon Koda in Rotselaar. Op maat gebouwd in Laravel, met een eenvoudige beheeromgeving voor Dorien.
Veelgestelde vragen
Ziet een site met Tailwind er niet standaard uit?
Nee. Tailwind levert geen kant-en-klaar uiterlijk, enkel bouwstenen. Hoe de site eruitziet, komt volledig uit het ontwerp.
Moet ik er als klant iets van merken?
Niet rechtstreeks. Je merkt het aan een site die snel laadt, er op elk scherm verzorgd uitziet en later vlot aan te passen is.
Werkt Tailwind met mijn CMS?
Ja. Tailwind zit in de frontend en werkt samen met elk CMS of framework.
Een Tailwind CSS-project in gedachten?
Vertel me waar je mee bezig bent. Ik denk mee over de juiste aanpak, ook als dat uiteindelijk een andere technologie blijkt te zijn.