Tailwind to tylko Bootstrap dla generacji Z

Jeśli zobaczę jeszcze jeden post na Twitterze lub LinkedIn, wychwalający Tailwind, jakby to był najlepszy wynalazek od czasu koła, rzucę się. Kiedy słyszę o Tailwind, pierwszą rzeczą, która przychodzi mi na myśl, jest wiatr pochodzący z okolic ogona — czyli pierdnięcia. I nie odbiegam zbytnio! Tailwind śmierdzi internetem i tworzeniem stron internetowych w ogóle, od końca 2017 r., a teraz jest w trzeciej wersji, nadal nie sądzę, aby był jakikolwiek powód, aby marnować energię mózgu na naukę.

Nie, nie jestem stary…

Wiem, że pokolenie Z lubi myśleć o każdym w wieku powyżej 30 lat jako starym i nieistotnym, ale pokolenie Z uważa też, że normalne jest identyfikowanie się z kimkolwiek, czy to marchewką, czy rowerem ‍♂️, więc kiedy próbuję być wsparciem i zachętą dla młodszych pokoleń, to ostatnie, które wkracza w dorosłość, podejmuje bardzo dziwne decyzje dotyczące rozwoju oprogramowania, których nie mogę z czystym sumieniem zignorować.

Notatka o Adamie Wathanie. Nie można mówić o Tailwind bez pośredniego wymienienia jego imienia. To chyba miły chłopak, w końcu pochodzi z Kanady. Nigdy go nie spotkałem i nie mam o nim zdania. Moje wyrzucenie Tailwinda nie ma na celu wyrzucenia go jako programisty , w rzeczywistości jest prawdopodobnie przyzwoitym inżynierem oprogramowania, ponieważ tworzenie frameworka CSS, tego samego CSS, który wielu inżynierów zaplecza uważa za zbyt frustrujące, aby z nim pracować, jest nie mały wyczyn. Ponadto nadal jest aktywny w projekcie, co nie jest czymś, czym może pochwalić się wielu właścicieli bibliotek i frameworków open source. Nic z tego nie czyni jednak Tailwind dobrym ani koniecznym.

Cofnijmy trochę czas. Gdzieś około 2011 roku odkryłem Skeleton . Wierzcie lub nie, ale wtedy wciąż było mnóstwo projektantów oprogramowania i inżynierów, którzy przysięgali, że mobilne przeglądanie stron internetowych nigdy się nie rozwinie , że będzie to tylko efemeryczna moda. Ach-ha! Fad, moja dupa. W momencie, gdy nauczyłem się responsywnego projektowania i zapytań o media CSS, moje życie się zmieniło.

Kolejnym odkryciem był Foundation firmy ZURB , a wkrótce potem Bootstrap . Z pierwszego, przysięgałem, z drugiego korzystałem tylko wtedy, gdy dyktował to projekt, ale biegle posługiwałem się obydwoma. Na publicznych forach oczywiście miażdżyłem Bootstrapa i chwaliłem Foundation. Nie uwierzysz, jak ludzie walczyli o to mniej więcej dziesięć lat temu… chyba że przejrzysz wątek dotyczący Tailwind, z wyjątkiem tego, że teraz nie jest to Bootstrap vs. Foundation, ale Tailwind vs. CSS. I w tym momencie nonsens zaczyna się od nowa.

„Ale ja nie muszę wiedzieć, co jest pod maską…”

Och, ale tak, bardzo to robisz! Jeśli kiedykolwiek przyjdzie do mnie programista z pytaniem, dlaczego projekt nie wygląda tak, jak powinien po dodaniu 17 klas użyteczności, moją jedyną odpowiedzią będzie „idź, moje dziecko, naucz się CSS ” . Moją pierwszą irytacją związaną z Tailwind jest to, że generuje on tych samych ignorantów „programistów internetowych”, co Bootstrap, a nawet Foundation w tamtych czasach. Cholera, na samym początku, zanim zacząłem karierę, byłem jednym z nich. Każdy problem, jaki miałem, rozwiązywałem z kolejną klasą, przeprowadzałem nawet czasochłonne główne refaktoryzacje, ponieważ niektóre klasy nie działały dobrze z innymi zagnieżdżonymi w środku, podczas gdy w rzeczywistości mogłem napisać tylko dwie linie prostego CSS.

Nie ma CSS .vs Tailwind. Tailwind to framework CSS, musisz się nauczyć CSS. Nie da się tego obejść, a kiedy już to zrobisz, przestaniesz potrzebować Tailwind.

Jest to w dużej mierze ten sam problem, który istnieje w świecie JavaScript. Ludzie uczą się React, ale nie mają podstawowej wiedzy na temat JavaScript. Heck, nawet wielu z tych, którzy wykraczają poza React, uczą się TypeScript, ponieważ jakiś nierozważny głupiec sprzedał im go jako klucz do wiecznego zbawienia. Istnieją prawdziwi programiści stron internetowych, którzy nigdy nie napisali ani jednej linii JavaScript. Pracujesz z DOM API? Hahaha! To jakieś egzotyczne gówno, człowieku! Nie, zainstalujemy cały Next.js, napiszemy wiele linii kodu dla refa, a teraz możemy zmodyfikować tego frajera div! Ponieważ wszystko jest div. Semantyczny HTML, podobnie jak CSS, jest zbyt niekompatybilny z generacją Z.

Nie jest to jednak nowy problem…

Od zarania sieci ludzie zawsze próbowali dostarczać strony internetowe, nie ucząc się, jak je napisać. Wielu z was jest zbyt młodych, by pamiętać, ale Dreamweaver firmy Adobe generował naprawdę ciekawie wyglądające (nie w dobry sposób) klasy CSS i identyfikatory, jeśli zechcieliście spojrzeć.

To kusząca perspektywa — tworzyć bez znajomości narzędzi rzemieślniczych. Ostatecznie zawsze kończy się to albo katastrofą, albo przyznaniem, że kluczem jest stara dobra wiedza.

Gdy nauczysz się języka, który stanowi podstawę biblioteki lub frameworka, następuje fundamentalna zmiana w podejściu. Jeśli chodzi o CSS, zdajesz sobie sprawę, jak potężny może być i że nie ma prawie niczego, czego nie można z nim osiągnąć. Precyzyjna kontrola, której w końcu będziesz potrzebować, jest wbudowana w CSS, ale nie w Tailwind. Patrząc na ich przykład na Wikipedii:

<div class="m-4 p-4 bg-yellow-200 font-bold rounded-lg">
  <p>Please be careful when feeding the birds.</p>
</div>

Tailwind jest umiejętnością nieprzenoszalną. Modne słowo w CV, które ostatecznie nie da ci pracy.

Niepokojące w powyższym przykładzie jest to, że tak naprawdę nie jest wymagane do tego nic egzotycznego w prostym CSS, a nawet SASS. Nie wspominając o tym, że mamy teraz zmienne CSS i są one dość dobrze obsługiwane w różnych przeglądarkach, z wyjątkiem IE.

Następnie pojawia się problem debugowania, ponieważ tak, im więcej witryn i aplikacji internetowych zbudujesz, tym bardziej zdasz sobie sprawę, że niektóre z najbardziej dziwacznych błędów będą związane z CSS . Teraz spróbuj to zrobić, próbując dowiedzieć się, czy Tailwind ma błąd lub twój kod. Z 8 obecnie otwartymi numerami — jak na to, co jest warte, to bardzo mało — i 2800 zamkniętymi , to wciąż o 2808 więcej niż CSS. Chcesz wypróbować nowe, ręcznie kodowane CSS w swoich narzędziach deweloperskich? Życzę ci powodzenia. Najpierw musisz edytować swój kod HTML. Demonstracja jest dosłownie na stronie głównej Tailwind !

Mówiąc o tej stronie głównej, jest jeden aspekt, w którym bardzo mocno nie zgadzam się z Adamem Wathanem, twórcą Tailwind.

Napisałem kilka tysięcy słów o tym, dlaczego tradycyjne „nazwy klas semantycznych” są powodem trudności w utrzymaniu CSS, ale prawda jest taka, że ​​nigdy mi nie uwierzysz, dopóki tego nie wypróbujesz. Jeśli potrafisz stłumić chęć odruchu wymiotnego wystarczająco długo, aby dać mu szansę, naprawdę myślę, że będziesz się zastanawiać, jak kiedykolwiek pracowałeś z CSS w jakikolwiek inny sposób. — Adam Watan

Nie zamierzam kwestionować jego osobistych doświadczeń z CSS i ogólnie projektami internetowymi, ale nie zapominajmy, że świat ma co najmniej 50 odcieni szarości. Jego złe doświadczenia z CSS są tak samo nieistotne, jak moje złe doświadczenia z jagodami. To nie czyni jagód złymi, tylko ja mam na nie alergię. To samo dotyczy CSS. Doświadczył problemu, ale ten problem niekoniecznie jest wspólny, i podobnie jak płaskie 7Up nie jest lekarstwem na wszystko (ani na nic), tak też nie jest Tailwind.

Pracowałem nad małymi i ogromnymi aplikacjami, multi- i monorepos, monolitami i mikro-frontendami, i ani razu nie poczuliśmy jako grupa inżynierów, że naszym problemem jest CSS . Angular.js był problemem, monolity były problemem, jQuery był problemem, pisanie komponentów od zera co dwa lata było problemem. Ale CSS? Nigdy. Ani razu. Najłatwiejsza decyzja, jaką kiedykolwiek musieliśmy podjąć, dotyczyła CSS. Daj grupie godzinę, a oni coś ustalą. Czy to CSS, SASS, LESS, JSS, czy cokolwiek, żaden z zespołów i organizacji inżynierskich, w których kiedykolwiek byłem częścią, nie czuł potrzeby „rozwiązania problemu CSS” i jeśli teraz myślisz, że robię dokładnie to, co Adam tak zrobił i próbując narzucić MÓJ punkt widzenia, nie mylicie się i o to też chodzi.

Programiści zakładają, że wszyscy mają ten sam problem, więc tworzą narzędzia, które je naprawiają. Ewangelizują narzędzie do tego stopnia, że ​​ludzie po prostu zakładają, że istnieje problem i ślepo przyjmują to narzędzie.

Widzisz, kluczowa różnica między pisaniem Tailwind, Bootstrap, komponentów Foundation lub interfejsów użytkownika a samym używaniem CSS polega na tym, że ten drugi jest podstawową, zbywalną umiejętnością, która zapewnia mistrzostwo w interfejsach internetowych . To jest coś, w czym żaden framework CSS nigdy ci nie pomoże.

Śliskie, kosztowne zbocze…

Tailwind CSS to narkotyk bramkowy. Nie zapominajmy, że Adam jest prezesem firmy technologicznej. Porzucił pracę jako inżynier oprogramowania i zajął się tworzeniem kursów, Tailwind i pisaniem książek na temat tworzenia oprogramowania. Jako dyrektor generalny będzie chciał zarabiać pieniądze i jak najlepiej to zrobić, ale stworzyć rdzeń open source — Tailwind CSS — dla płatnego produktu, Tailwind UI . Co? Myślałeś, że ludzie po prostu rozdają darmowe rzeczy dla miliardów programistów do wykorzystania i nic z tego nie czerpią? ROFL!

Aby zilustrować, dlaczego Tailwind jest drogim narkotykiem stanowiącym bramę dla programistów i firm, spójrzmy na kod źródłowy prostego komponentu banera interfejsu użytkownika Tailwind :

<div class="relative isolate flex items-center gap-x-6 overflow-hidden bg-gray-50 px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
  <div class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl" aria-hidden="true">
    <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
  </div>
  <div class="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl" aria-hidden="true">
    <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
  </div>
  <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
    <p class="text-sm leading-6 text-gray-900">
      <strong class="font-semibold">GeneriCon 2023</strong><svg viewBox="0 0 2 2" class="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true"><circle cx="1" cy="1" r="1" /></svg>Join us in Denver from June 7 – 9 to see what's coming next.
    </p>
    <a href="#" class="flex-none rounded-full bg-gray-900 px-3.5 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900">Register now <span aria-hidden="true">&rarr;</span></a>
  </div>
  <div class="flex flex-1 justify-end">
    <button type="button" class="-m-3 p-3 focus-visible:outline-offset-[-4px]">
      <span class="sr-only">Dismiss</span>
      <svg class="h-5 w-5 text-gray-900" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
      </svg>
    </button>
  </div>
</div>

Więc naturalnie wolisz wykrztusić włosy lalki, aby uzyskać licencję interfejsu Tailwind , niż sam wymyślić kod. Ten model licencjonowania też jest sprytny. Można by pomyśleć, że 749 euro (plus podatek) za licencję zespołową to wszystko, czego potrzebujesz w kontekście firmy, ale mylisz się, ponieważ zespół może pomieścić tylko do 25 osób! Jeśli dobrze pamiętam, w jednej z moich poprzednich prac mieliśmy około 13 zespołów, więc 13 × 749 to prawie 10 000. Jasne, strona twierdzi, że to jednorazowa opłata, ale czekaj, aż ten model licencjonowania się zmieni – tak jak zmienił się w przypadku wielu innych – i przejdź na coś bardziej stabilnego finansowo, a będziesz płacić subskrypcję kodu spaghetti . Nie wierzysz mi? Materiałowy interfejs użytkownikajuż dokładnie to robi! I zwracam na to uwagę jako ktoś, kto kiedyś był wielkim fanem MUI. Przyzwyczajony do… bycia tutaj słowem operacyjnym.

Teraz nie tylko utknąłeś z niezbywalną umiejętnością, ale także musisz zapłacić, aby z niej skorzystać. Nie możesz mi poważnie powiedzieć, że nie ma w tym nic złego.

Podsumowując, jestem bardzo miły w nagłówku. Technicznie rzecz biorąc, Tailwind jest gorszą opcją niż kiedykolwiek był Bootstrap , chociaż ma bardzo podobny cel. Jednak Bootstrap, choć równie dyskusyjny pod względem wartości zestawu umiejętności jak Tailwind, przynajmniej jest naprawdę darmowy na licencji MIT . Jednak w przypadku Tailwind dotyczy to tylko rdzenia CSS , co czyni go zupełnie inną historią i znacznie bardziej niebezpieczną ścieżką.

Werdykt jest nieuchronnie na korzyść trzymania się CSS. To nic nie kosztuje, a jest to bezcenna, zbywalna umiejętność.

Attila Vago — inżynier oprogramowania ulepszający świat po jednej linijce kodu na raz. Fajny nerd od zawsze, autor kodów i blogów. Zwolennik dostępności sieci, fan LEGO, kolekcjoner płyt winylowych. Uwielbia piwo rzemieślnicze! Przeczytaj moją historię Witaj tutaj! Zasubskrybuj i/lub zostań członkiem , aby otrzymywać więcej artykułów o LEGO , technologii , kodowaniu i ułatwieniach dostępu ! Dla moich mniej stałych czytelników piszę też o przypadkowych bitach i pisaniu .