Tailwind CSS
Tailwind är ett utility-first CSS-ramverk. Webbplats: tailwindcss.com
Fördelar
- Snabb responsiv layout med utilities.
- Konsekvent skala för spacing och typografi.
- Jag slipper hitta på egna klassnamn och kan istället styla elementet direkt.
- Tailwind gör det enkelt att jobba mobile-first, och jag kan sedan lägga till anpassningar för större skärmar med prefix som md: eller lg:. Jag upplevde detta som ett tydligt och logiskt sätt att bygga responsiv design.
Nackdelar
- Själva HTML-koden blir mindre tydlig pga långa klasser.
- Byggsteg behövs för att få liten CSS-fil.
- Eftersom styling ligger direkt på elementen blir HTML-koden lätt lång och lite rörig.
Upplevelse
Enkelt att komma igång med. Klasserna känns ganska natuliga efter ett tag. Jag gillar detta klart mer än att bygga klassisk CSS. Jag upplevde Tailwind som väldigt flexibelt och lätt att förstå när jag väl kom igång. Det kändes smart att styla direkt på elementen istället för att behöva hitta på klassnamn. Överlag tyckte jag att Tailwind gav mig mer flexibilitet än Bootstrap eller åtminstone en bättre känsla av kontroll. I alla fall som nybörjare. En nackedel skulle kunna vara att det blir väldigt mycket kod och i viss mån upprepning av samma kod för samma styling, men även om jag inte hunnit titta på det så utgår jag från att man kan hitta lösningar på detta också.
| Fält 1 | Fält 2 | Fält 3 | Fält 4 | Fält 5 | Fält 6 |
|---|---|---|---|---|---|
| A101 | Alpha | A | 123 | Ja | Not 1 |
| A102 | Beta | B | 456 | Nej | Not 2 |
| A103 | Gamma | A | 789 | Ja | Not 3 |
| A104 | Delta | C | 321 | Nej | Not 4 |
| A105 | Epsilon | D | 654 | Ja | Not 5 |