Tailwind CSS: een eerste hulpprogramma voor CSS en API voor snel, responsief ontwerp

Tailwind CSS Framework

Hoewel ik dagelijks diep met technologie bezig ben, krijg ik niet zoveel tijd als ik zou willen delen over de complexe integraties en automatisering die mijn bedrijf voor klanten implementeert. Ik heb ook niet veel ontdekkingstijd. De meeste technologie waar ik over schrijf zijn bedrijven die op zoek zijn naar Martech Zone ze behandelen, maar af en toe – vooral via Twitter – zie ik wat geroezemoes rond een nieuwe technologie die ik moet delen.

Als je werkt in webdesign, de ontwikkeling van mobiele apps of zelfs maar een contentmanagementsysteem opzet, heb je waarschijnlijk geworsteld met de frustraties van concurrerende stijlen over meerdere stylesheets. Zelfs met de geweldige ontwikkelingstools die in elke browser zijn ingebouwd, kan het opsporen en opschonen van CSS veel te veel tijd en energie vergen.

CSS Frameworks

In de afgelopen jaren hebben ontwerpers behoorlijk verbazingwekkend werk verricht door collecties stijlen uit te brengen die zijn voorbereid en klaar voor gebruik. Deze CSS-stijlbladen zijn beter bekend als CSS-frameworks en proberen alle verschillende stijlen en responsieve mogelijkheden te accommoderen, zodat ontwikkelaars gewoon naar een framework kunnen verwijzen in plaats van helemaal opnieuw een CSS-bestand te bouwen. Enkele populaire frameworks zijn:

  • Bootstrap - een raamwerk dat in de loop van een decennium is geëvolueerd, voor het eerst geïntroduceerd door Twitter. Het biedt talloze functies. Het heeft nadelen, vereist SASS, moeilijk te overschrijven, afhankelijk van JQQuery, en het is behoorlijk fors om te laden.
  • Bulma – een schoon framework dat ontwikkelaarsvriendelijk is en niet afhankelijk is van JavaScript.
  • Foundation - een meer generiek en bruikbaar CSS-framework met tal van componenten die gemakkelijk kunnen worden aangepast. Daarnaast is er Basis voor e-mail als Motion UI voor animaties.
  • UI-kit – een combinatie van HTML, JavaScript en CSS om je front-end snel en eenvoudig te laten ontwikkelen.

Tailwind CSS Framework

Terwijl andere frameworks uitstekend werk leveren aan het accommoderen van populaire gebruikersinterface-elementen, gebruikt Tailwind een methodologie die bekend staat als Atomaire CSS. Kortom, Tailwind heeft op ingenieuze wijze de klassennamen georganiseerd in natuurlijke taal om te doen wat ze zeggen dat ze doen. Dus hoewel Tailwind geen bibliotheek met componenten heeft, is de mogelijkheid om eenvoudig een krachtige, responsieve interface te bouwen door te verwijzen naar CSS-klassenamen elegant, snel en onvergelijkbaar.

Hier zijn enkele echt geweldige voorbeelden:

CSS-rasters

css-kolom startrasters kolommen

CSS-verlopen

css verlopen

Ondersteuning voor CSS voor donkere modus

css donkere modus

Tailwind heeft ook een fantastische extensie beschikbaar voor VS Code, zodat u gemakkelijk klassen kunt identificeren en invoegen vanuit de code-editor van Microsoft.

Nog ingenieus, Tailwind verwijdert automatisch alle ongebruikte CSS bij het bouwen voor productie, wat betekent dat uw uiteindelijke CSS-bundel de kleinste is die mogelijk is. In feite verzenden de meeste Tailwind-projecten minder dan 10 kB CSS naar de klant.

Wat denk je?

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.