Tailwind CSS: Utility-First CSS Framework és API a gyors, reszponzív tervezéshez

Tailwind CSS keretrendszer

Bár napi szinten mélyen foglalkozom a technikával, nem jut annyi időm, mint szeretném megosztani a vállalatom által az ügyfelek számára megvalósított komplex integrációkat és automatizálást. Ráadásul nincs sok felfedezési időm. A legtöbb technológia, amiről írok, olyan vállalatok, amelyek keresnek Martech Zone lefedve őket, de időnként - különösen a Twitteren keresztül - látom a zümmögést egy új technológia körül, amelyet meg kell osztanom.

Ha webes tervezéssel, mobilalkalmazás -fejlesztéssel foglalkozik, vagy éppen tartalomkezelő rendszert állít be, akkor valószínűleg több stíluslapon is küzdött a versengő stílusok frusztrációival. Még az egyes böngészőkbe épített elképesztő fejlesztői eszközök mellett is, a CSS nyomon követése és tisztítása túl sok időt és energiát igényelhet.

CSS keretek

Az elmúlt években a tervezők elképesztő munkát végeztek az elkészített és használatra kész stílusgyűjtemények kiadásában. Ezek a CSS -stíluslapok jobban ismertek CSS -keretrendszerek néven, és igyekeznek befogadni a különböző stílusokat és reszponzív képességeket, hogy a fejlesztők csak hivatkozzanak egy keretrendszerre, ahelyett, hogy a semmiből építenének egy CSS -fájlt. Néhány népszerű keretrendszer:

  • Bootstrap - egy keretrendszer, amelyet egy évtized alatt fejlesztettek ki, először a Twitter vezette be. Számtalan funkciót kínál. Vannak árnyoldalai is, amelyek SASS -ot igényelnek, nehezen felülírhatóak, a JQquery függvényében, és elég bonyolult betölteni.
  • talál -tiszta keretrendszer, amely fejlesztőbarát, és nem függ a JavaScript-től.
  • Alapítvány - egy általánosabb és használhatóbb CSS keretrendszer, amely rengeteg könnyen testreszabható összetevőt tartalmaz. Ezen kívül van Alapítvány az e -mailhez és Motion UI animációkhoz.
  • UI készlet -HTML, JavaScript és CSS kombinációja a kezelőfelület gyors és egyszerű fejlesztéséhez.

Tailwind CSS keretrendszer

Míg más keretek nagyszerű munkát végeznek a népszerű felhasználói felület elemeinek befogadásában, a Tailwind az úgynevezett módszertant használja Atomi CSS. Röviden, a Tailwind zseniálisan megszervezte az osztályneveket a természetes nyelv használatával, hogy azt tegye, amit mondanak. Tehát, bár a Tailwind nem rendelkezik komponenskönyvtárral, elegáns, gyors és összehasonlíthatatlan az a képesség, hogy a CSS osztálynevekre hivatkozva egyszerűen hozzon létre egy erőteljes, reagáló felületet.

Íme néhány igazán nagyszerű példa:

CSS rácsok

css oszlop kezdőrács oszlopok

CSS színátmenetek

css színátmenetek

CSS a sötét mód támogatásához

css sötét mód

A Tailwind is fantasztikus bővítmény elérhető a VS Code számára, így könnyen azonosíthatja és beszúrhatja az osztályokat a Microsoft kódszerkesztőjéből.

Még ötletesebb, hogy a Tailwind automatikusan eltávolítja az összes fel nem használt CSS -t, amikor gyártás közben épít, ami azt jelenti, hogy a végső CSS -csomag a lehető legkisebb. Valójában a legtöbb Tailwind projekt kevesebb, mint 10 KB CSS -t szállít az ügyfélnek.

Mit gondolsz?

Ez az oldal Akismet-et használ a levélszemét csökkentése érdekében. Ismerje meg, hogyan dolgozik a megjegyzésed.