Jak działa Tailwind.css i czy pokona Bootstrapa?




Jak działa Tailwind.css i czy pokona Bootstrapa? Pierwsze wrażenia po kilku tygodniach realnej pracy z Tailwindem, który od niedawna napędza stronę Przeprogramowani.pl. Poznajcie historię tego rozwiązania, zobaczcie konfigurację prz ... Oglądalność i zainteresowanie: 4021, czas trwania 20m 21s, otrzymana ocena 167, reakcje 48.
Komentarze:

- 🔔 Film się podobał? Subskrybuj aby nie przegapić nowych filmów, już niebawem kolejne nowości! 🔔
- Ciekawy ten Tailwind. Myślę, że w aplikacjach fajnie by współgrał z Atomic Design.
- tailwind to nie framework
- Wracam ponownie z komentarzem, bo chyba w materiale NIE Wspominałeś o dyrektywie "Extracting component classes with @apply" która IMHO jest pewną hybrydą między pisaniu całego css'a od podstaw umożliwiająca grupowanie przedefiniowanych styli tailwinda w dedykowane klasy. Dzięki czemu nie musimy strzelać tonami mikro-klas w dany element by go ostylować ;)
- Ja na początku też z dużą rezerwą podchodziłem do tailwinda, ale jak napisałem w nim kilka projektów, to się przynajmniej w nim zauroczyłem. Dokumentacja jest świetna, a config bardzo przemyślany i przewiduje wiele problemów dużych aplikacji. Chociażby jakiś delikatny rebranding, sprowadza się w dużej mierze, do dodania kilku linijek do configu, a nie przepisywania całych stylesheetów. Tailwind pozawala na przynajmniej 3x szybsze pisanie frontu, a customowego css pisze się bardzo mało. Jeśli kogoś przeraża duża liczba klas i kopiowania tego i w efekcie niska czytelność polecam dyrektywę @apply, dzięki której .px-5.py-3.font-bold.bg-red-500.text-white.hover:bg-red-600 może się zmienić .btn--red. Polecam!
- Ja bym tu zerknął kraty wema, warto było.
- Bezsens i głupota. Po pierwsze, mieszamy warstwę wyglądu z warstwą struktury. Ręce powinni za to ucinać. Dodatkowo dodajemy masę zbędnych klas, które przecież trzeba wczytać w końcowym pliku. Teraz pytanie, zmienia nam się siatka na jednej podstronie i nie możemy użyć flag: xl, md, s co wówczas robimy? Dodajemy nowe? xl-l czy co? Nie wiem jak wam, ale mi się ten kod wydaje całkowicie nieczytelny.
- W oldskulowym wydaniu stalowania element w HTML dostawał jakiś wybrany selektor, który maił stylowanie właśnie w kodzie CSS. Bootstrap wprowadził utilities i podeście się zmieniło. Jednak z tego co widziałem na nagraniu i co gorsza w kodzie strony przeprogramowani w postaci takich tasiemców:

class=" font-medium text-gray-200 transition duration-150 ease-in-out hover_text-main block py-2 pl-2 text-base font-medium transition duration-150 ease-in-out rounded-md hover_bg-gray-50 focus_outline-none focus_text-gray-600 focus_bg-gray-50"

w-full min-w-0 px-5 py-3 mb-2 sm_mb-0 text-base leading-6 text-gray-900 placeholder-gray-500 transition duration-150 ease-in-out bg-white sm_border-r border-dashed rounded-md sm_rounded-r-none appearance-none focus_outline-none focus_placeholder-gray-400

font-medium text-gray-200 transition duration-150 ease-in-out hover_text-main block py-2 pl-2 text-base font-medium transition duration-150 ease-in-out rounded-md hover_bg-gray-50 focus_outline-none focus_text-gray-600 focus_bg-gray-50

py-4 px-2 hover_bg-white transition ease-in-out duration-150 border-b-2 border-gray-200

To moim zdaniem całkowite zaprzeczenie wykorzystania styli CSS, więc z całym szacunkiem ale nie wiem czy można mówić o przyśpieszeniu pracy. Wiecej znaczników w kodzie html niż samej treści :(
- Co wy wszyscy z tym Bootstrapem? To chyba najgorszy framework, jaki istnieje! Trzeba do każdego elementu dodawać milion klas, żeby to wyglądało i działało...
- Od kiedy wiem o istnieniu tego projektu, a będzie to mniej więcej od wersji 0.4.5 czy coś takiego, to nigdy nie byłem fanem tego rozwiązania pod żadnym względem. Nie widzę w tym najmniejszego i racjonalnego sensu. Osobiście nienawidzę tailwind I tego rozwiązania, a zwłaszcza, że bardzo lubię bazgrać sass w edytorze. Jest to dla mnie przyjemne i cenie sobie schludność i przejrzystość, a tailwind ze swoim rozwiązaniem wprowadza same przeciwności, których nie trawie. Bootstrap+material design I tyle mogę napisać.
- Uwielbiam Tailwind. W projektach takich jak Laravel, AdonisJS jest to strzał w dziesiątke. Polecam
- Bardzo mi to przypomina pisanie liniowe stylów (oczywiście to lepsze rozwiązanie, ale podejście bardzo podobne). Bardzo mocny nacisk na zdefiniowanie widoku po stronie HTML wieloma malutkimi klasami, a nie ogólnych class napisanych z zachowaniem BEM, które ogarniają całe aspekty stylowania znacznika. Widzę, że trendy zataczają koło i teraz opis w HTML jak ma wyglądać w szczegółach znacznik jest modne. Tailwindui nie wydaje mi się jakimś super produktem i jest na równi z wieloma darmowymi, które jednak się tak nie integrują dobrze z tailwindem samym.

Ja i tak głównie piszę LOBy, gdzie nie trzeba wydziwiać szczególnie z wyglądem i uwielbiam stosować material-UI.

Wiele "frameworków" css też używa już utilities jak np. bootstrap, który ma z tego co pamiętam klasy rounded-sm, float-left, float-sm-right, float-md-right, w-25, m-5 pb-5, shadow-lg, bg-white itd.
- Jedyny problem jaki widzę zawsze z frameworkami css jest brak separation of concerns. Chociaż w takich przypadkach warto się zastanowić czy warto jest dla bycia purystą marnować kilka godzin pracy w projekcie. Gdy tylko dowiedziałem się o mixinach w tailwindzie to moje nastawienie do niego ze skrajnie negatywnego zamieniło się w bardzo pozytywne
- Dopisywanie setek klas i drugie tyle jeśli ktoś bootstrapa używa. Słabe to jest i komplikuje czytelność. Only SCSS.
- Dziękuję Przemku za to wideo. Oczekiwałem tego tematu u Ciebie :-). Tailwind zacząłem używać z twórczą radością razem z Vue.js, Nuxt i zgłębiam Laravel Jetstream Inertia Veu gdzie tez jest out of box. Jest bardziej elastyczny od bootstrapów z samej zasady utility first. Kod z nim tez można uprościć by tak strasznie nie wyglądał. Gratulacje. Pozdrawiam.
- Warto wspomnieć - zanim pojawił się taki Tailwind, to był sobie Semantic UI napisany w zapomnianym już LESS'ie. On też korzystał niejako ze zbierania właściwości za pomocą konkretnych klas, a dodatkowo miał bardzo fajną konstrukcję (dziedziczenie którego nie może się doczekać sass) która dawała możliwość tworzenia `themes` (a wspominam o nim w kontekście konkurowania z bootstrap). Tailwinda naprawdę można polubić bo w pewien sposób wymusza on myślenie o projekcie w kategoriach tworzenie `design system`. Można sobie pokonfigurować mnóstwo rzeczy i korzystać z radością. Jedyne co warto wspomnieć - trzeba zaakceptować styl pisania warstwy prezentacji w której element ma czasami dużo klas. To czasami źle wygląda, albo przynajmniej jest takie wrażenie.
- Po obejrzeniu jestem pozytywnie zaskoczony co do Tailwinda
- Raczej szybko nie upadnie ale do mnie jakoś nie przemawia. Trzeba by mocniej przetestować - może wtedy się człowiek przekona. Acz! Ciekawe rozwiązanie.
- Ciekawe rozwiązanie, myślę że szybko nie upadnie :)