Tailwind a másik legjobb CSS keretrendszer

Juszkó Csaba augusztus 07, 2023

A nyílt forráskódú CSS-keretrendszerek (frontend) közül ez a Tailwind a másik legnépszerűbb, illetve legjobb. Sokan használják ezt a fejlesztők.

Arra inkább használják, hogy akik nem szeretnek az előre megtervezett összetevőket használni, hanem létrehozni saját egyéni összetevők létrehozását és későbbiekben újra felhasználhatóak legyenek a projekteken. Amikkel kiindulási pontként használhatók.

Annak ellenére, hogy a Tailwind nem tartalmaz előre megtervezett összetevőket, lehetővé teszi saját egyéni összetevők létrehozását, amelyeket újra felhasználhat a projektjei során. A hivatalos weboldalon néhány komponens példát is találhat, amelyeket kiindulási pontként használhat.

Megjegyzés: 2023-as évek alapján megírom azokat.

Tartalomjegyzék

  1. Alapfogalma
  2. Adatai
  3. Főbb jellemzők és tulajdonságai
  4. Előnyei
  5. Hátrányai
  6. Segédletek és információk
  7. Összefoglalás
  8. Hasznos linkek

Hivatalos honlapja

https://tailwindcss.com/

Alapfogalma

Egy modern, népszerű segédprogram első CSS-keretrendszer, amely előre definiált osztályokat biztosít, amelyekkel HTML-elemeket lehet stílusozni.

Adatai

Eredeti szerzők:
Adam Wathan, Jonathan Reinink, David Hemphill, and Steve Schoger
Fejlesztők:
Tailwind Labs
Első verzió kiadásának dátuma:
2017. November 1.
Legfrissebb verziója:
3.3.3. / 2023 Július 13.
Programozási nyelvek:
HTML, CSS, Less, Sass és JavaScript
Platform:
Web platform

Főbb jellemzők és tulajdonságai

  • Nincs design (nem tartalmaz előre készített elemeket / meghatározott tervezési nyelvet), azt jelenti, hogy nem szükséges felülírni a meglévő stílusokat és hatékonyabb tehet az egyéni tervek megvalósítása során
  • Újrafelhasználható összetevők: Annak ellenére, hogy nem találhatóak az előre megtervezett összetevőket, ezért lehetőséget biztosít a fejlesztők számára, hogy létrehozhat saját egyéni összetevőket, amelyeket újra felhasználhat a projektjei során A weboldalon pár komponens példát is találhat, amelyeket kiindulási pontként felhasználhat
  • Hatékony Post CSS/SASS integráció: Lehetővé teszi az összes funkciójának kihasználását a hatékonyabb CSS megírására

Előnyei

  • Növeli a fejlesztői termelékenységet
  • Könnyen használhatóak és nagymértékben testreszabhatók, így különféle szempontjainak konfigurálását és módosítását az Ön egyedi igényei szerint megfeleljen
  • Gyorsabb fejlesztés (időt és erőfeszítést takarít meg), nem szükséges sok egyéni CSS kódot létrehozni
  • Következetes tervezést biztosít
  • Továbbfejlesztett hozzáférhetőség, megkönnyíti az akadálymentes weboldalak létrehozását intézni a szemantikus HTML és a kisegítő lehetőségekre fókuszáló osztályok felhasználásának köszönhetően
  • Skálázhatóak, mert úgy tervezték, hogy jól méretezhető legyen, és használhatóak legyenek a kis és a nagy projektekzhez
  • Konzisztens tervezési rendszert biztosít, amely segítségével a teljes projektben alkalmazható, és biztosítja, hogy az összes felhasználói felület elem konzisztens megjelenést és hatást biztosítson

Hátrányai

  • Erősen támaszkodik a közüzemi osztályokra, a bonyolultsága miatt nehezebben karbantarthatóvá teheti a HTML kódot
  • Meredek tanulási görbével rendelkezik, mert a fejlesztőknek meg kell tanulniuk a keretrendszer osztályait és azok hatékony használatát
  • Bonyolultabban és nehezebben karbantartók
  • Az osztályok túlzott használata (negatívan befolyásolhatja a weboldal teljesítménye a felduzzadt CSS és a HTML fájlok miatt)
  • Tervezési korlátok, mivel ez egy segédprogram miatt korlátozza a tervezési rugalmasságait és a kreativitásait

Segédletek és információk

The Software House - Tailwind CSS oktatóanyagok és példák. Kezdje el 14 percen belül

Webcíme: https://tsh.io/blog/tailwind-css-tutorial/
Leírása:
A Tailwind eltér a webalkalmazások stílusának kialakítására szolgáló többi CSS-keretrendszertől. Tanuld meg ezzel a Tailwind CSS oktatóanyaggal, amely fejlesztőnk mintakódját tartalmazza.
A CSS-keretrendszerek világában folytatódik a harc a webes alkalmazások stílusának legjobb megközelítéséért. Vannak, akik választják a CSS-modulokat SCSS-sel vagy sem, mások inkább a CSS-t részesítik előnyben JS-ben, mások pedig egyszerűen telepítik a Material Design-t. Számos lehetőség kínálkozik, és az igényektől függően biztosan mindenki talál magának valót. Ebben a cikkben azonban egy olyan megoldásra szeretnék koncentrálni, amely teljesen eltér a korábban említettektől. Egy nemrégiben nyilvánosságot kapott keretrendszerről beszélek – a Tailwind CSS-ről.

Codeinwp - Tailwind CSS oktatóanyag kezdők számára: Lépésről - lépésre útmutatók a 2023-ban

Webcíme: https://www.codeinwp.com/blog/tailwind-css-tutorial/#gref
Leírása:
Az egyik legforróbb és bevallottan vitatott CSS-keretrendszer, amely az elmúlt években a front-end színtéren landolt, a Tailwind CSS, és ez a kezdőknek szóló Tailwind CSS-oktatóanyag megpróbálja felgyorsítani, hogy miről is van szó. Kitérek az alapokra, valamint arra, hogy miért érdemes olyan eszközt használni, mint a Tailwind CSS a weboldalak elkészítéséhez, és hogy a Tailwind hogyan változtatja meg a HTML és CSS teljes nézetét. Azt is megmutatom, hogyan optimalizálhatja automatikusan a Tailwind buildeket, hogy biztosan ne használjon olyan CSS-t, amire nincs szüksége.

GeeksforGeeks - Egyszerű oktatóanyag

Webcíme: https://www.geeksforgeeks.org/tailwind-css/
Leírása:
A Tailwind CSS alapvetően egy Utility első CSS-keretrendszere a gyors egyéni felhasználói felület létrehozásához. Ez egy nagymértékben testreszabható, alacsony szintű CSS-keretrendszer, amely megadja az összes szükséges építőelemet. Emellett nagyszerű módja annak, hogy szöveges stílust írjon, és fantasztikus felületet érjen el anélkül, hogy egyetlen sort is megírna saját CSS-ből.

Codete Blog - Kezdők számára oktatóanyagok

Webcíme: https://codete.com/blog/tailwind-css-tutorial-and-examples-for-beginners
Leírása:
Tudjon meg többet a Tailwind órákról, és kezdjen el lenyűgöző webhelyterveket készíteni. Egy teljes Tailwind CSS oktatóanyag kezdőknek.
A Tailwind CSS-oktatóanyag, valamint a Tailwind CSS-példák nagyon hasznosak lehetnek a kezdők számára, akik szeretnék elsajátítani ennek a segédprogram-első CSS-keretrendszernek az alapjait. De nem csak nekik. Lenyűgöző webhelytervek készítése vele kezdetben nehéz dió lehet, ezért ha gyorsan szeretné megtanulni a Tailwind CSS-t, érdemes elolvasnia részletes útmutatónkat. A Tailwind oktatóprogram részeként néhány érdekes Tailwind példát is bemutatunk. Tehát ha érdekli a Tailwind tanulása, hamarosan kezdjen velünk.

Tailwind Elements - Tailwind CSS oktatóanyag – az alapoktól a haladó funkciókig

Webcíme: https://tailwind-elements.com/learn/te-foundations/tailwind-css/about/
Leírása:
Tanulja meg a Tailwind CSS-t INGYEN a legátfogóbb tanfolyamon. Egyszerűen és hatékonyan készítsen lenyűgöző dizájnt.

Összefoglalás

Azért írom a másik legjobbnak, mert a statisztikai adatok táblázata szerint többen használják a GitHubon.

Hasznos linkek

Címkék

Megjegyzés küldése

0 Megjegyzések