Tailwind CSS

Insights

Tailwind CSS: Wie / Wat / Waarom?

🛠 Frontend development

Wanneer je iets creëert online wil je ervoor zorgen dat je website/applicatie of product aantrekkelijk oogt, gebruiksvriendelijk is maar bovenal ook te onderhouden valt voor de developer. Vandaar dit artikel over Tailwind, aangezien dit volgens mij alle bovenstaande punten voldoet. Indien je het met zorg gebruikt.

Tailwind CSS: Wie/Wat/Waarom?

Wanneer je iets creëert online wil je ervoor zorgen dat je website/applicatie of product aantrekkelijk oogt, gebruiksvriendelijk is maar bovenal ook te onderhouden valt voor de developer. Vandaar dit artikel over Tailwind, aangezien dit volgens mij alle bovenstaande punten voldoet. Indien je het met zorg gebruikt.

Tailwind is een utility-first css framework. Dit betekent dat je in plaats van normale css code te schrijven, je gebruik maakt van utility classes op je HTML elementen. Dit laat je toe om dezelfde classes te hergebruiken doorheen je applicatie. Hierdoor wordt zelf css schrijven (zo goed als) overbodig en zal je vooral bij grotere webapplicaties ook minder grote files creëren. Wat op zijn beurt dan weer zorgt voor snellere laadtijden.

In de praktijk

<button class="h-10 px-6 font-semibold rounded-md bg-black text-white" type=“submit">
  Buy now
</button>

Laten we even kort uitleggen wat dit nu concreet betekent. Je ziet in bovenstaand voorbeeld 6 utility-classes. Elke class heeft zijn eigen css variant(en).

  • h-10 = height: 2.5rem;
    h duidt aan dat het gaat om de height en de 10 om de grootte van die height.

  • px-6 = padding-left: 1.5rem; padding-right: 1.5rem;
    p staat voor padding, x staat voor op de x-asis (links, rechts) en 6 opnieuw voor de grootte.

  • font-semibold = font-weight: semibold;
    Deze legt zichzelf vrij duidelijk uit, font duidt aan het over tekst gaat en semibold dat het over een bepaalde weight van de tekst gaat.

  • rounded-md = border-radius: .375rem;
    rounded slaat hier op het feit dat de hoeken van het element afgerond zijn. De md slaat dan op de mate waarin ze afgerond zijn. Zo heb je sm, md, lg, xl, 2xl, …

  • bg-black = background-color: black;
    Ook vrij duidelijk bg staat voor achtergrond, black voor het kleur.

  • text-white = color:white;
    Nog een duidelijke class, text duid aan dat het om de tekst gaat en white om het kleur.

Als je naar bovenstaande uitleg kijkt zie je al snel dat de meeste classnames snel herkenbaar zijn en ook quasi altijd korter zijn dan hun css counterparts. Dit zorgt ervoor dat je dus ook veel sneller iets kan testen, aanpassen zonder hiervoor in een aparte css file of in de inline css te gaan zoeken. Zelfs met andere manieren van werken zoals BEM-notatie zal je nooit sneller aanpassingen kunnen doen dan gewoon rechtstreeks in de html.

Een ander voordeel is het stroomlijnen van ruimtes, font-sizes, etc. doorheen uw webapplicatie. Zo heb je ook een tailwind config file. Deze laat je toe om values te overschrijven en toe te voegen. Het is ook mogelijk om in uw classes custom varianten te maken die je bijvoorbeeld maar 1x nodig hebt waardoor het niet nodig is om er een nieuwe utility-class voor te maken. Bijvoorbeeld  h-[25px]  zorgt er dan voor dat je een height van 25px meegeeft aan je element.

Nu we concreet weten hoe Tailwind werkt, is het ook duidelijk dat de leercurve vooral bestaat uit het herkennen en vlot gebruiken van de utility-classes. Gelukkig zijn deze vrij intuïtief gekozen waardoor de transitie van normale css naar Tailwind vaak erg vlot kan verlopen. 

Waarom Tailwind

Tailwind is een low-level CSS framework. Wat dit concreet betekent is dat het in tegenstelling tot andere CSS frameworks zoals Bootstrap of Materialize geen volledige gestileerde componenten heeft. Je bouwt je elementen volledig zelf op met traditionele css enkel aan de hand van de classes die Tailwind voorziet.

Hierdoor zullen de zaken die je maakt met Tailwind unieker en flexibeler zijn dan met andere css frameworks. Je hebt namelijk zelf de macht over hoe alles eruit zal komen te zien.

De voordelen van Tailwind

  • Je schrijft minder custom CSS. Door enkel en alleen de utility classes van Tailwind te gebruiken kan je alles stylen zoals je zelf wilt zonder zelf echt CSS hoeven te schrijven.

  • Je CSS bestanden blijven klein. Zonder een CSS framework moet je alles custom schrijven waardoor CSS files vrij groot kunnen worden. Door de herbruikbaarheid van de Tailwind classes zal je amper nog css files moeten aanraken.

  • Je moet geen classes uitvinden. Tailwind heeft zijn eigen class structure waardoor je je tijd niet moet spenderen met het uitvinden van de perfecte classname die weergeeft wat het voorstelt. Als alles goed is dan kan je dit namelijk afleiden vanuit je semantisch correcte HTML elementen.

  • Je kan veiligere aanpassingen doorvoeren. Met de traditionele aanpak kan het zijn dat wanneer je je css aanpast dat je onverwacht op andere plaatsen ook veranderingen doorvoert. Met Tailwind zie je direct op welk element je je css aanpast zonder schrik te moeten hebben dat je dit op andere locaties mee veranderd.

  • Het kan geoptimaliseerd worden door PurgeCSS. Het laat je toe om ongebruikte classes te strippen uit je codebase waardoor er nog extra ruimte vrijgemaakt kan worden om de laadtijden van uw pagina’s te verminderen.

Conclusie

Tailwind laat je toe om snel en flexibel complete UI’s uit te werken die overigens volledig responsive en dynamisch kunnen zijn op basis van de acties van de gebruiker. Het zorgt ervoor dat je css files klein blijven van formaat en wanneer je je utility-classes ordelijk rangschikt kan het toch ook overzichtelijk blijven.

Bovendien zal je nooit geen onverwachte veranderingen op andere pagina’s of in andere componenten doorvoeren doordat je altijd specifiek het aan te passen element aanspreekt en niet een algemene class die ergens anders hergebruikt wordt.

Het zorgt er ook voor dat het bijna volledig overbodig wordt om custom css te schrijven doordat bijna elke css property een Tailwind tegenhanger heeft die vaak korter is en dus makkelijker te onthouden dan de traditionele variant.

🎙

Ik zou zeggen: wil je sneller vormgeven, wil je meer macht over je finale resultaat, wil je een fijnere development ervaring of wil je gewoon iets nieuws proberen? Geef Tailwind dan zeker een kans. Ik zal in elk geval niet snel meer terugkeren naar andere frameworks.

StefStef
Stef

Stef

Delen:

Op zoek naar inspiratie?

Wij zorgen voor gepast advies op het vlak van frontend development.

💌

Insights

Meer inzichten

nextjs-13

🛠 Frontend development

Next.js 13

Het is zover, Next.js 13 is sinds 25 oktober 2022 uitgebracht. Exact zes jaar later dan de eerste Next.js release. Waarom zou je Next.js willen gebruiken en wat zijn de nieuwe functionaliteiten in Next.js 13? In deze blogpost bespreken we wat de verschillen zijn tussen Server-Side en Client-Side Rendering. Vervolgens onderzoeken we hoe je een applicatie structureert, wat server componenten zijn, streamen van UI en enkele verbeteringen. Als laatste bekijken we wat Next.js 13 voor de toekomst te bieden heeft.

Spline

🛠 Frontend development

Hoe maak je een moderne UI met Spline

Het ontwerpen van een aantrekkelijke user interface is niet altijd evident. Daarom is het belangrijk om de nieuwste trends te volgen en inspiratie te halen uit werken die beschikbaar staan op het internet. Zo heb ik Spline leren kennen. Spline is een design tool om op een relatief gemakkelijke wijze 3d graphics te creëren voor de web. In deze post, zal ik uitleggen wat de basisfuncties zijn en hoe je deze software kan gebruiken voor jouw volgend project.

css

🛠 Frontend development

Dingen die je in CSS kan doen in plaats van Javascript

Wanneer je wat wilt maken in Javascript dat mogelijk is in CSS, gebruik dan CSS. Of zoek eens op of het mogelijk is tenminste. 🤓