Tailwind CSS

Tailwind CSS är ett utility-first CSS-ramverk som möjliggör snabb och effektiv design av webbplatser genom att använda fördefinierade klasser direkt i HTML-koden. Istället för att skriva anpassad CSS för varje element, kan utvecklare använda Tailwinds omfattande uppsättning av klasser för att styla sina komponenter snabbt. Man hittar dokumentation på tailwinds officiella hemsida: https://tailwindcss.com/

Vid första anblick kände jag endast att detta skulle röra till alltihop. Jag känner att det varit kämpigt att lära sig CSS ordentligt, och att då nu behöva lära om sig kändes onödigt och krångligt. Tack vare sidan https://nerdcave.com/tailwind-cheat-sheet så var det lätt att hitta de olika klasserna och vad dom gjorde. Efter tips från Malin att även installera Tailwinds Intellisense här i VSCode, så blev det ännu enklare att hitta rätt och utvecklingen gick plötsligt hur fort som helst!

En annan sak som gjorde mig skeptisk var att skriva stil direkt i HTML-filen, då jag fått lära mig att man ska strukturera sin kod och separera design från innehåll. Gärna dela upp i olika filer för att hålla det rent och lättöverskådligt. Nu skulle man istället göra motsatsen till det? Men efter att ha kollat denna videon https://www.youtube.com/watch?v=6biMWgD6_JY fick jag värdefulla tips om hur man kan dela upp det i layer components istället, och hålla koden mer DRY. I det här fallet med en så enkel hemsida hade det egentligen inte varit några problem med att ha lite upprepande klasser, men det var kul att testa hur det hade fungerat med mer uppdelat. Jag ser även redan nu hur bra detta kommer fungera med ramverk som React.

Sammanfattningsvis är Tailwind CSS ett kraftfullt verktyg för webbutvecklare som vill skapa moderna, responsiva och anpassningsbara webbplatser på ett effektivt sätt.