Despre Tailwind CSS

Una din regulile de aur in programare e sa comentezi motivul (de ce?) nu implementarea (cum). Despre motiv era mesajul meu de mai sus si nu despre cum se face.

2 Likes

pai poti sa declari o culoare primary nu te opreste nimeni, apoi o folosesti ca bg-primary, text-primary etc

de ce? e mai convenabil decat sa declari o variabila intr-un fisier scss si sa o tot importi in alte fisiere scss. Ideal, cu tailwind scapi complet de fisiere css.

Daca nu mentionai tu eram gata sa scriu eu despre asta. Am lucrat de nshpe mii de ori la proiecte unde clientul+designerul s-au razgandit si mi-au schimbat culorile mid project. Eu niciodata nu fac clase cu numele culorii.

Orice denumire dar nu culoarea: main-colour, brand-colour, link-colour, card-bg-colour-on, card-bg-colour-off etc…

Asa o schimbare de culoare se face o singura data. Vrei ceva nou si nu exista => o faci special cu un nume refolosibil si in alte locuri daca e nevoie - adica nu fac h2-colour sa o pun pe un div s.a.m.d.

Cat despre Tailwind nu am ajuns sa il folosesc inca. Vad ca cei ce lucreaza cu Vue.js il folosesc la greu.

https://www.facebook.com/groups/vuejsdevelopers/

3 Likes

Băi, ce hateri sunteți, chiar nu înțeleg, ce nu vă place aici? Doar că jumătate din liniile de cod sunt clase css?

De aici.

3 Likes

daca spre asta se intdreapta developmentul ma apuc de lucrat pamantul. m-am apucat de asta sa-mi simplific viata, nu sa ajug sa invat romane pentru un amarat de buton.

4 Likes

Exact la asta mă refeream.

Dacă pui inline-css care e diferența?

O sa apara “bootstrap pentru tailwind” sa rezolve situatia.

1 Like

Nu inteleg care-i problema, si asa scriati kilometri de JSX inainte. :smiley:

1 Like

Nu știu la ce te referi boss, în Vue am single file component, html-ul stă total separat și nici n-ai zice că e jsx :slight_smile:

Conceptul ăsta îmi place mult la Vue și merge foarte bine.

Am acordat o sansa Tailwind-ului cand am dat de el din greseala. Era in pre-release, versiunea 0.xx. Initial am fost incantat dar m-am enervat cand am vazut cate clase ii lipsesc. A trebuit sa scriu mult pe langa ca sa termin un proiect.

A trecut ceva timp iar Tailwind-ul a ajuns la 1.xx . I-am mai acordat o sansa si am inceput sa il plac! A inceput fie prima optiune pentru majoritatea proiectelor noi sau care implica un update major, refactorizare etc.

Pentru incepatori in ale Tailwind-ului recomand acest Tailwind CSS Cheat Sheet cu acest cheatsheet in scurt timp Tailwind va deveni un tool folositor pentru voi. Dar daca nu sunteti fani ai sintaxei puteti sa generati tailwind.config.js full si sa va faceti de cap.

De ce imi place Tailwind:

  • prototipare rapida
  • pot scrie mult fara sa ma uit la browser si stiu exact care va fi rezultatul
  • clasele sunt “self explanatory”, dupa o scurta perioada de adaptare
  • comunitatea tailwind a crescut foarte rapid
  • purge

De ce voi folosi tailwind-ul in continuare:

  • este dezvoltat si imbunatatit in continuare
  • JIT - just in time pentru tailwind, este grozav, ai clasele fix de care ai nevoie la indemana oricand fara sa ai bloated css, JIT Tailwind a fost o evolutie naturala d.p.m.d.v., in development ca sa mearga totul rapid generam tot tailwind-ul si lucram cu el, dar 4-8mb de css pun un browser sa se gandeasca daca vrea sa crashuiasca sau sa continue draw-ul paginii.
  • Headless UI, proaspat aparut sunt componente in React / Vue care functioneaza in mod non-opinionated si care merg bine cu Tailwind Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS..

Tailwind’s Future
Problema sarcastic expusa de @iamntz mai sus, este una adevarata, dar care nu deranjeaza atat de multa lume. Cu toate acestea, estimez ca va fi adresata si rezolvata in “stilul” styled components. Ce vreau sa zic? Pai daca stam sa ne gandim orice combinatie de clase Tailwind in orice context le-ai pune vor crea o entitate care se va comporta si arata la fel. Acea lista de clase poate fi hash-uita si folosita ca o clasa de sine statatoare la build time, la care se @apply lista de clase initiala. Daca acelasi buton va fi stilizat la fel va primi acelasi hash. Astfel componenta finala randata va avea clasa: “xX69XxStarTrekForeverXx” care defapt inseamna flex flex-col bg-red-500 p-4 mb-4, whatever e un exemplu. In orice caz sunt rezolvari care sunt sigur ca vor veni.

P.S.: long time lurker, m-am decis sa scriu!

2 Likes

desi ai JIT pt fisiere mai mici ai js files mai mari pt toate clasele care sunt in mare reguli css, care se muta in js, nu am folosit niciodata tailwind btw.

Bine ai venit :slight_smile:

Tind să cred că n-ai avut de făcut restilizare niciodată la vreun site/aplicație măricele.

Pleci de la premise posibil greșite:

  • că lumea folosește styled components
  • că toți devs vor extrage clasele cu @apply

Realitatea (mea) este alta însă:

  • nu toți folosesc un framework JS, implicit, nu toți folosesc styled components
  • cum nu toți folosesc CSS Modules
  • și cu siguranță nu vor extrage toți cu @apply (și oricum, cum e mai bun @apply decât asta?)

Posibil sa nu ma fi facut inteles.

ca va fi adresata si rezolvata in “stilul” styled components

e o presupunere ca in acest stil va fi rezolvata problema, and besides tailwind pana la urma e un tool, va fi folosit de cei care se inpaca cu el, eu sunt optimist ca va evolua in bine si iti va satisface si tie o parte din cerinte cel putin

  • că toți devs vor extrage clasele cu @apply

nu devs vor face extragerea propriuzisa, probabil va fi un proces automat care se va rula la build time

Tind să cred că n-ai avut de făcut restilizare niciodată la vreun site/aplicație măricele.

crezi gresit, evident ca nu toata lumea foloseste absolut orice tool

1 Like

O grămadă de chestii subiective cu care nu sunt de acord. Destul de superficial articolul sincer. Nu e un hater profesionist. :joy:

1 Like

Eu îl văd doar un layer de abstracție ca oricare altul. Doar că mi se pare prea aproape de css ca să merite bătaia de cap.

E ca și orice altceva în programare. Laravel e un layer peste PHP. PHP e layer peste C. Iar C e layer peste assembler.

Bootstrap mi se pare că merită pentru că abstractizează in elemente ui. Un progress bar, un card, un selector, un buton, etc. Merită sacrificiul complicațiilor pentru câtă abstracție obții.

Și codul arată (opinie subiectivă) foarte lean, și clar. Mai ales în lumea componentelor, bootstrap se mulează perfect pe conceptul de componente.

1 Like

CSS pare simplu, dar nu este, in special intr-o echipa.
Eu m-am luptat 2 ani pana am reusit sa fac pe cineva din echipa sa inteleaga ca e mai bine sa folosesti flexbox decat sa folosesti calc ca sa pozitienezi ceva…

Mai bine trantesti tailwind, ai ce ai acolo si daca cineva foloseste CSS poti comenta ca de ce n-a folosit tailwind si e rezolvata problema. Nu mai vezi clase de CSS cu calc de te uiti de 10 ori ce a calculat ala.

3 Likes

Au reușit să creeze și să rezolve o problemă! :joy:

Your HTML doesn’t need to be messy. DaisyUI adds component classes to Tailwind CSS. Classes like btn, card, etc… No need to deal with hundreds of utility classes.

2 Likes

Doamne apără și păzește dar de câte ori o să reinventăm roata? :))

Deci avem instrucțiuni css, care sunt practic instrucțiuni relativ directe vizuale de poziționare, stilizare, etc.

Apoi avem clase care sunt colecții de instrucțiuni vizuale explicite.

Hai să facem clase care sunt instrucțiuni vizuale explicite.

Avem prea multe clase, hai să facem clase care sunt colecții de clase.

1 Like