1 Like
Odata ce intelegi toate avantajele pe care ti le ofera Tailwind, you never go back! N-am mai folosit Bootstrap cam de cand s-a lansat Tailwind. Nu imi pare rau deloc. Ma misc mult mai rapid decat daca as scrie eu css de mana. Nu e pentru toata lumea, dar nici sa zici ca e o “abominație” daca tie nu iti place conceptul 
2 Likes
Un lucru ce mi se pare foarte atractiv la tailwind, mai ales pentru cineva ca mine care nu prea gusta css-ul: copy-pastingul.
Odata ce ma chinui sa fac ceva cum vreau eu, in tailwind nu mai e legat de restul lucrurilor din pagina. Pot sa iau acea componenta si foarte usor sa ii dau copy-paste in alt loc si sa mearga.
Pot sa iau orice componenta de oriunde si de la oricine si sa mearga si la mine. E absolut fantastic. Mult timp am fost sceptic cu privire la tailwind, dar cum l-am incercat mi-a schimbat perspectiva.
Acum, ca orice lucru vine si cu dezavantaje. Anume, codul e foarte greu de facut mentenabil. Daca construiesti ceva si stii ce vrei de la bun inceput, viteza pe care o ai cu tailwind este excelenta. Pana vrei sa schimbi ceva, atunci tot codul acela duplicat te cam incetineste. Nu mult, dar destul.
Si o sa sune antitetic, dar desi ai aceasta abilitate sa dai copy-paste la orice componenta, nu prea exista asa de multe componente gata facute la care sa poti face asta. Sunt cateva frameworkuri js care au imbratisat tailwindul si pentru care ai tot felul de lucruri gata facute, dar daca nu frameworkul tau nu e pe lista aia trebuie sa te pregatesti sa trebuiasca sa faci tu de la zero multe lucruri.
1 Like
L-am incercat si eu la un proiect personal la initiativa altcuiva care sufera de efect de turma.
Este avantajos pentru site-uri care arata stock chestii lejere, tipice. Modul de a scrie cod este consistent si este o comoditate si o claritate prin faptul ca nu tot adaugi id-uri sau clase cand vrei sa alterezi o chestie foarte putin.
Lasand loading time-ul laoparte, este o chestie aditionala de care te poti folosi, nu te limiteaza sa scrii css pana iti vine rau 
Deci facem ce face bootstrap, doar că în loc să scriem css să generăm componente, folosim clase tailwind? 
Teoretic s-ar putea
odata ce iti intra in mana tailwindu nu mai stai sa debitezi nsphe mii de variatii de clase “container”. Una doua stilizezi ce iti trebuie. Pare stupid la inceput dar dupa cativa ani cu el pot zice ca e mult mai comod ca stilu clasic. Mai ales ca in ziua de azi gasesti componente facute de altii si doar le copiezi, ca merg plug and play. Nu stai sa descalcesti scssu altora
1 Like
Adevarat, pentru cineva care nu prea “gusta” frontend e mana cereasca sa poti sa day copy paste si sa-ti si mearga si arate la fel.
2 Likes
E o varianta buna daca vrei un quick interface pentru un MVP, sau o conexiune la un API pentru testing preview. O mica mizerie in rest, in trend-ul asta, a mai aparut si lucruri ca WaterCSS care lafel e cool pentru frontend quick, daca vrei ceva cat mai slim.
noi o folosim pe o aplicatie foarte mare cu code base de 4 ani. Nu avem nicio problema cu el, inafara de onboardingu mai lung pentru oamenii care n-au mai lucrat cu el. E mult mai usor de debuguit deoarece vezi direct in fisieru html ce stiluri are fiecare element. Nu trebuie sa sapi dupa el cu inspectoru sau in alt fisier sa vezi de ce clasa dropdown-element-container__item e afectata de stilurile clasei dropdown-element
Si in acelas timp, trebuie sa te bagi in HTML sa faci un fix / schimbare de interfata, inloc sa fie doar CSS, dintr-o data se modifica HTML-ul / JS-ul sa faci o schimbare de design minora.
Nu e rau, dar e inconvenabil pe termen lung.
e mult mai inconvenabil sa ai un fisier css decuplat de html. Asa vezi exact ce element modifici
1 Like
Reteta pentru dezastru e sa bagi css in html. Sau html in php. “Spaghetti code” se numeste.
2 Likes
Interesant cum cei care probabil considera o idee buna de a adauga css in html sunt in acelasi timp cei mai mari fani OOP.
Dar de ce va mai chinuiti cu clase de tailwind? Puteti oricand sa reveniti la inline styles.
nu stiu, eu dupa mai multe proiecte cu tot felu de abordari, BEM, styluri de alea json in fisieru jsx si alte balarii consider tailwind mult mai comfortabil
Tailwind e mult mai ok dacă il folosești bine.
Un principu de bază în programare, single responsibility se aplică și aici.
Tema e ceva ce vrei să modifici global, care înseamnă niște variabile într-un json.
Dar componentele nu sunt reutilizabile în n locuri tot adăugând props și n edge case-uri, o dată făcute le lași așa și faci alta ori moștenind stilul dintr-o altă componentă, ori faci ceva de la 0.
In cazul meu am ajuns la concluzia că material ui oferă mult mai multe decât tailwind cu componente headless, dar nu e rău nici TW. E mai ușor de extins. Cu tailwind trebuie scrise de la 0 multe componente de bază fiindcă nu există un UI system destul de matur pe TW.
Pe când cu CSS fără module (care îți face probleme mai mici dar tot ai probleme cu variabilele) ai n stiluri reutilizate în n componente fără să vezi clar unde s-a născut acel stil și de ce strici tot când repari ceva intr-un loc.
2 Likes
Folosesc Tailwind de ceva vreme atat pentru site-uri cat si aplicatii web si n-am de gand sa ma intorc la a scrie CSS “de mână”. Am scris CSS multi ani de zile si credeti-ma, m-am saturat sa tot scriu font-size si margin si sa creez tot felul de selectoare…
Tailwind e o idee foarte buna, insa nu e ceva de folosit pentru orice proiect sau pentru oricine. Eu il folosesc pentru site-uri / aplicatii facute cu React, deci am componente pe care le scriu o data si apoi le refolosesc. Astfel ca <button className="bg-red-500 hover:bg-gray-500 text-white px-4" /> o sa apara o intr-un singur loc in proiect
Clasele alea multe le inveti repede, mai ales ca multe sunt intuitive. mb = margin-bottom. Ce crezi ca e mt?
Bootstrap si Tailwind sunt doua lucruri diferite. Bootstrap iti da componente (HTML+CSS) iar Tailwind iti da clase utilitare (CSS only) cu care sa creezi componente → ai control asupra HTML-ului.
Cu Tailwind pot sa stilizez componente / pagini mult mai repede decat cu CSS simplu, deci timp castigat. Plus ca este foarte flexibil si customizabil. Developer experience is lovely 
Trebuie sa cunosti CSS ca sa poti intelege Tailwind.
Deci nu, nu e o mizerie, e ceva foarte util pentru un front-end developer. (& it works in real life)
10 Likes
Trebuie sa mai adaug si ca desi Tailwind iti da doar clase utilitare, multi habar n-au sa intre in tailwind.config.js si sa-si seteze de acolo parametrii conform unui design system.
Nu mai spun ca poti adauga un plugin de forms sau typography si ai deja elementele ready pentru implementare, tu doar modifici parametrii conform documentatiei, iar schimbarile se propaga peste tot.
Devii noi care vin se pot trimite lejer la documentatie si vor citi mult mai usor ce se intampla pe acolo.
Foarte multi nu inteleg CSS, si se vede dupa argumente cand acestea sunt “tot ca inline e”.
Am avut probleme cu CSS cand scriam clase cu BEM si alte mizerii. Concluzia mea dupa ani de zile e ca specificitatea in CSS te omoara, cu atat mai mult cand complexitatea creste.
Un CSS scris bine, iti va lua foarte mult la inceput pentru setup si va deveni din ce in ce mai usor pe viitor. Un buton nu e “bg-dark si altul bg-orange”. Butoanele sunt primary, secondary etc. Culorile vin din spate conform unei palete de culori alese bine.
Dupa cum spuneam, ma frustreaza maxim cand vad front end developeri care gandesc in stilul “hai sa fac headerul, margin top 20 px, background white”. Il stilizeaza pe tot, apoi trec la carusel, slider sau ce o mai fi.
0 studiu al design-ului
0 identificare de elemente repetitive
0 identificare de stiluri, proportii
Normal ca te intrebi de ce sa nu scrii CSS direct inline.
9 Likes
Din variabilele alea ajunge button-gray sa fie alb / negru, text-gray sa fie albastru sau alte mizerii de genul, long term in CSS ai aceleasi probleme ca in programare, naming convention + sa aibe sens denumirile si consistenta.