Tailwind CSS: pierwsze narzędzie CSS Framework i API do szybkiego, responsywnego projektowania

Struktura CSS Tailwind

Chociaż na co dzień zagłębiam się w technologię, nie mam tyle czasu, ile chciałbym dzielić się złożonymi integracjami i automatyzacją, które moja firma wdraża dla klientów. Poza tym nie mam dużo czasu na odkrywanie. Większość technologii, o których piszę, to firmy, które poszukują Martech Zone opisując je, ale od czasu do czasu – zwłaszcza za pośrednictwem Twittera – widzę trochę szumu wokół nowej technologii, którą muszę się podzielić.

Jeśli pracujesz w projektowaniu stron internetowych, tworzeniu aplikacji mobilnych, a nawet po prostu konfigurujesz system zarządzania treścią, prawdopodobnie zmagałeś się z frustracją konkurencyjnych stylów w wielu arkuszach stylów. Nawet z niesamowitymi narzędziami programistycznymi wbudowanymi w każdą przeglądarkę, śledzenie i czyszczenie CSS może wymagać zbyt wiele czasu i energii.

Szkielety CSS

W ostatnich latach projektanci wykonali niesamowitą robotę, wypuszczając kolekcje stylów, które są przygotowane i gotowe do użycia. Te arkusze stylów CSS są lepiej znane jako ramy CSS, starając się dostosować wszystkie różne style i możliwości responsywne, dzięki czemu programiści mogą po prostu odwoływać się do struktury, zamiast tworzyć plik CSS od podstaw. Niektóre popularne frameworki to:

  • Bootstrap – framework, który ewoluował przez dekadę, po raz pierwszy wprowadzony przez Twittera. Oferuje niezliczone funkcje. Ma wady, wymaga SASS, trudny do przesadzenia, zależny od JQquery i jest dość ciężki do załadowania.
  • Bulma – czysty framework, który jest przyjazny dla programistów i nie jest zależny od JavaScript.
  • Fundacja – bardziej ogólny i użyteczny framework CSS, który ma mnóstwo komponentów, które można łatwo dostosować. Dodatkowo jest Fundacja dla poczty e-mail i Interfejs Motion do animacji.
  • Zestaw interfejsu użytkownika – połączenie HTML, JavaScript i CSS, aby szybko i łatwo opracować swój front-end.

Struktura CSS Tailwind

Podczas gdy inne frameworki świetnie radzą sobie z przyjmowaniem popularnych elementów interfejsu użytkownika, Tailwind korzysta z metodologii znanej jako Atomowe CSS. Krótko mówiąc, Tailwind pomysłowo ułożył nazwy klas przy użyciu języka naturalnego, aby robić to, co mówią. Tak więc, chociaż Tailwind nie ma biblioteki komponentów, możliwość łatwego zbudowania wydajnego, responsywnego interfejsu tylko przez odwoływanie się do nazw klas CSS jest elegancka, szybka i nieporównywalna.

Oto kilka naprawdę świetnych przykładów:

Siatki CSS

CSS kolumny początku siatki kolumny

Gradienty CSS

gradienty css

CSS dla obsługi trybu ciemnego

tryb ciemny css

Tailwind też ma fantastyczną dostępne rozszerzenie dla VS Code, dzięki czemu można łatwo identyfikować i wstawiać klasy z edytora kodu firmy Microsoft.

Jeszcze bardziej pomysłowy, Tailwind automatycznie usuwa wszystkie nieużywane CSS podczas tworzenia do produkcji, co oznacza, że ​​Twój ostateczny pakiet CSS jest najmniejszy, jaki może być. W rzeczywistości większość projektów Tailwind dostarcza klientowi mniej niż 10 KB CSS.

Co o tym myślisz?

Ta strona używa Akismet do redukcji spamu. Dowiedz się, jak przetwarzane są dane komentarza.