Vyplatí se koupit Tailwind?

[Ondrej Nemecek]

Kouknul bych na nějaké aktuální porovnání:

https://github.com/troxler/awesome-css-frameworks
https://www.contentful.com/blog/css-frameworks/
https://strapi.io/blog/best-css-frameworks
...

[Reklama]

[Filip Jirsák]

Jako např. který? Přecejenom bych řekl, že dneska je Tailwind nej. Potom už znám jenom aterial design jako Vuex a další. A nebo jednoduché, jako je classless.de.

Máte v tom pěkný zmatek. To, co vidíte odkazované v projektech a v článcích, co se hodně používá, je Tailwind CSS. To je CSS framework založený na utilitních třídách. A používá se proto, protože zjednodušuje tvorbu CSS i pro lidi, kteří CSS neznají, a má skvělou dokumentaci. Tailwind CSS je ale jen jiný způsob, jak zapisovat CSS – není tam ani čárka nějaké šablony nebo komponent.

Pak existuje Tailwind Plus, cože je sbírka komponent a šablon vytvořených pomocí Tailwind CSS. Knihoven komponent a šablon založených na Tailwind CSS jsou mraky. Tailwind Plus je specifický jenom tím, že jsou přímo od autorů Tailwind CSS. Ty knihovny komponent a šablon založených na Tailwind CSS mohou mít různou podobu – mohou to být knihovny už hotových komponent třeba v Reactu nebo WebComponents, které jen nakopírujete do projektu. Pak je to podobné jako různé implementace Material designu, Bootstrap, PrimeVue/React/NG. Nebo to může být zdrojový kód třeba Reactových komponent, které si nakopírujete do svého projektu – třeba Shadcn/UI. A nebo – a tak je udělaný Tailwind Plus – je to dokumentace a příklady kódu v HTML a Tailwindu, případně složitější komponenty obohacené o napojení na React. Takže je to spíš taková stavebnice, ze které si vytvoříte vlastní knihovnu komponent. A šablony v Tailwind Plus jsou pak vzorové projekty vytvořené v konkrétních technologiích, často v Next.js, spolu třeba s Headless UI.

[Ondrej Nemecek]

Jako např. který? Přecejenom bych řekl, že dneska je Tailwind nej. Potom už znám jenom aterial design jako Vuex a další. A nebo jednoduché, jako je classless.de.

Máte v tom pěkný zmatek. To, co vidíte odkazované v projektech a v článcích, co se hodně používá, je Tailwind CSS. To je CSS framework založený na utilitních třídách. A používá se proto, protože zjednodušuje tvorbu CSS i pro lidi, kteří CSS neznají, a má skvělou dokumentaci. Tailwind CSS je ale jen jiný způsob, jak zapisovat CSS – není tam ani čárka nějaké šablony nebo komponent.

Pak existuje Tailwind Plus, cože je sbírka komponent a šablon vytvořených pomocí Tailwind CSS. Knihoven komponent a šablon založených na Tailwind CSS jsou mraky. Tailwind Plus je specifický jenom tím, že jsou přímo od autorů Tailwind CSS. Ty knihovny komponent a šablon založených na Tailwind CSS mohou mít různou podobu – mohou to být knihovny už hotových komponent třeba v Reactu nebo WebComponents, které jen nakopírujete do projektu. Pak je to podobné jako různé implementace Material designu, Bootstrap, PrimeVue/React/NG. Nebo to může být zdrojový kód třeba Reactových komponent, které si nakopírujete do svého projektu – třeba Shadcn/UI. A nebo – a tak je udělaný Tailwind Plus – je to dokumentace a příklady kódu v HTML a Tailwindu, případně složitější komponenty obohacené o napojení na React. Takže je to spíš taková stavebnice, ze které si vytvoříte vlastní knihovnu komponent. A šablony v Tailwind Plus jsou pak vzorové projekty vytvořené v konkrétních technologiích, často v Next.js, spolu třeba s Headless UI.

1+ hezky popsáno, snad to tazateli pomůže se zorientovat

[registrovany123]

Jako např. který? Přecejenom bych řekl, že dneska je Tailwind nej. Potom už znám jenom aterial design jako Vuex a další. A nebo jednoduché, jako je classless.de.

Máte v tom pěkný zmatek.

Vidím, že došlo ke smazání moji reakce. Takže to napíšu znovu: Vypadněte pryč z mojeho tematu - už jsem vám to říkal historicky nejméně 3x, abyste do mých témat nelez.

Minule jsem ti Jirsáku zase skočil na lep, když jsi mi s něčím radil - a to jsem neměl. Ty jsi, Jirsáku, poradil, jen aby jsi v zápětí na to, v jiném tématu, mohl zase blbě breptat na věci, které jsou offtopic.

Co jste tam napsal, jsem nečel, a číst to nebudu - nezajímá mě, co píšete. Táhněte do pryč, o vaše rady, které pokaždé v záhy na to měníte v kreténské vrtání, nestojím.

Já nemám nic proti tomu, že se tady na něco zeptám, a nenapíše k tomu nikdo nic - cokoliv je lepší, než aby tam radil Jirsák.

[Petr Krčmář]

Klid, tohle není jen váš prostor, ostatní mají právo se zapojit do debaty. Vy jste ten, kdo útočí, on vám slušně odpovídá. Pokud se vám jeho reakce nelíbí, ignorujte je. Pokud chcete někoho vyhazovat, pořiďte si vlastní web, nastavte si vlastní pravidla a buďte si tam klidně sám. Tady se ale do nikoho navážet nebudete, navíc anonymně. Tohle je poslední varování, diskutujte slušně.

[Reklama]

[registrovany123]

Jirsák mě označit hned v prvním příspěvku za zlodějě a to navzdory tomu, že se tady ptám, co v tom produktu za 350 USD vlastně je obsaženi. A toto Jirsák učinil s tím, že sám Tailwind má a mohl tedy poskytnout informace, co v tomto produktu je všechno nabízeno.

Jestli vám toto přijde slušné, tak mi teda ne, a je to rovněž i značný projev kretenismu.

[registrovany123]

A odpovím tady sám, co všechno člověk dostane, když si koupí Tailwind, protože jsem to udělal:

Co všechno dostanu s Tailwind:

• Můžu si jako zip stáhnout libovolný template. Template je profesionální projekt napsaný v Next.js, tak jak má být. Není však zdaleka přímo použitelný, protože v něm není udělaný dostatečný pořádek - museli byste být CSS/Tailwind freaks, abyste to použili tak jak to je. Některé grafické prvky to má zobecněné do vyrobených React Component, ale ne všechny. Prostě tam "solí" Tailwind classes, a v mém světě je tohle bad practice, protože to připomíná psaní CSS přímo do tagu "style", místo toho, abych to měl zobecněné do nějakého index.css. Takže za mě, Templates jsou jen pro inspiraci a taková výkladní skříň, co se dá dělat v Taiwind, ale sám jsem to doteď nepoužil, protože jejich komplexita je velká.
• Přístup do jejich UI komponent. Tohle mi přijde nejužitečnější a to zejména kvůli pěknému designu. Já se n složitý Template vyprdnul a použil jsem jen pár jejich komponent.

Je zde 30 denní zkušební perioda a budu zvažovat, jestli nepožádám o vrácení peněz, a to z důvodu toho, že kolem a kolem kromě designu v tom není nic, co bych nemohl udělat v CSS. Některé jejich věci navíc nefungují dobře na iPhone 7, jako např. použití headless komponent, kde v jejich komponentě "Modal" nejde při otevření nastavit focus na Input, který se nachází v modalu. Řešení možná existuje, ale oproti nativním html prvkům je složité a překračuje svou složitostí to, co jsem ochoten absolvovat. Tedy opět, i tyto předpřipravené komponenty slouží pro mě víceméně pro inspiraci a hlavně pro jejich design.

Přijde mi, že s dobrý designem bych mohl pomocí CSS a klasičtějšího vývoje dojít k podobně dobrému výsledku, jaký poskytne Taiwlind, a to standardnějším způsobem. Ano, CSS vyžaduje toho více napsat, ale to, co si napíšu, jde do index.css a je možné v tom mít pořádek. Budu to dalších 30 dní zkoumat, a uvidím - zatím za těch 7500,- Kč jsem dostal zejména design, a možná udělám líp, když z ty stejné peníze se dohodnu s grafikem.

Shrnutí

Tailwind mi slouží hlavně k tomu, že mám přepřipravný grafický design komponent. Pokud jde o samotný jazyk, či jak to nazvat, tak zde pořád zvažuju přínos, protože to stejné mi dá CSS.

Abych měl v projektu pořádek, musel bych každou Tailwind komponentu zobecnit do mého vlastního globals.css, protože psaní tailwind kódu přímo do html mi připomíná podobný nepořádek, jaký způsobí tag "style".

[registrovany123]

PS:

Ještě jsem chtěl říct, že tím, že Tailwind příkazy psané rovnou do html tagů stejně zobecňuju do globals.css, tak si všímám, že zde není akový rozdíl oproti tomu, když CSS konstrukční prvky zobecňuju do index.css.

Navíc Tailwind sice má pěkné colors, ale já potřebuju zobecnit barvy webu do několika základních, takto:

Kód: [Vybrat]

    --max-width-m-page-width: 60em;
    --color-m-table-th-color: rgb(209 213 220);
    --color-m-table-td-color: rgb(229 231 235);

Proč? Protože nemůžu napříč webem používat 50 různých barev a to ještě k tomu psaných přímo do HTML - jak to mám potom udržovat, takový nepořádek?

Jak můžete vidět, stejně nemůžu používat Tailwind předpřipravené barvy, a musím to psát do RGB Řešil jsem to s Chatgpt a i ten říká, že to Tailwind prostě neumí. Jediný způsob je použít konstrukci v Javascriptu a barvy registorvat, ale opět, to nejsem ochoten absolvovat, protože je to další narovnávákování na ohýbákování.

Narážím na spoustu takových dobrností, které mě od Tailwindu odrazují.

[Filip Jirsák (forum)]

Prostě tam "solí" Tailwind classes, a v mém světě je tohle bad practice, protože to připomíná psaní CSS přímo do tagu "style", místo toho, abych to měl zobecněné do nějakého index.css.

To je ovšem jen ve vašem světě. Ve světě lidí, kteří vědí, co je koncept CSS utility classes, je to správně. Tailwind CSS je na utilitních třídách založený, takže pokud se vám utilitní třídy nelíbí, nedává smysl používat Tailwind CSS.

kolem a kolem kromě designu v tom není nic, co bych nemohl udělat v CSS

Ano, to je princip všech CSS frameworků. Stejně jako je princip všech JavaScriptových knihoven to, že dělají jenom věci, které se dají v prohlížeči dělat v JavaScriptu.

Navíc Tailwind sice má pěkné colors, ale já potřebuju zobecnit barvy webu do několika základních, takto:

Kdybyste mermomocí netrval na vlastním špatném řešení, Tailwind CSS má na řešení vlastních barev a vlastního barevného tématu perfektní řešení: https://tailwindcss.com/docs/colors#customizing-your-colors

Následující reakci registrovany123  nečtěte, není určena vám, ale ostatním, kteří by třeba četli tuto diskusi:

Abych měl v projektu pořádek, musel bych každou Tailwind komponentu zobecnit do mého vlastního globals.css, protože psaní tailwind kódu přímo do html mi připomíná podobný nepořádek, jaký způsobí tag "style".

Aby měl registrovany123 pořádek, musel by se především naučit psát frontend. To, že někdo nemá rád utilitní třídy, je v pořádku, já jsem je před Tailwindem také neměl rád. Ale když nechci používat utilitní třídy, vybrat si framework, který je na nich založený, a pak se to pokoušet ohnout zase zpátky do klasického CSS, to není dobrý nápad. A pořádek v projektu se tím rozhodně neudělá, právě naopak.

[registrovany123]

Jirsák: Ignore, nereaguju a nečtu. A nevím, co tu ještě chcete. Založe si svoje téma, nebo si napište blog.

[martyd420]

Klid, tohle není jen váš prostor, ostatní mají právo se zapojit do debaty. Vy jste ten, kdo útočí, on vám slušně odpovídá. Pokud se vám jeho reakce nelíbí, ignorujte je. Pokud chcete někoho vyhazovat, pořiďte si vlastní web, nastavte si vlastní pravidla a buďte si tam klidně sám. Tady se ale do nikoho navážet nebudete, navíc anonymně. Tohle je poslední varování, diskutujte slušně.

I když to dělá bez použití vulgarit, je tím nekonečným tapetováním známý a toto obtěžování provádí to z mnoha fake registrací, aby obcházel fakt, že ho proto tolik lidí blokuje (btw ta funkce nějak zmizela? Nedaří se mi blokovat jeho nové profily..). Jen v tomto tématu používá dvě registrace:
dnes 17:49:03 - id uživatele 6583
včera 23:40:38 - id uživatele 1804

Že vadí vulgarity chápu, ale prosím, zaměřte se i na tyto tapetovací spamery, hodně by to pomohlo i diskuzím pod články.

[Filip Jirsák]

I když to dělá bez použití vulgarit, je tím nekonečným tapetováním známý a toto obtěžování provádí to z mnoha fake registrací, aby obcházel fakt, že ho proto tolik lidí blokuje (btw ta funkce nějak zmizela? Nedaří se mi blokovat jeho nové profily..). Jen v tomto tématu používá dvě registrace:
dnes 17:49:03 - id uživatele 6583
včera 23:40:38 - id uživatele 1804

Že vadí vulgarity chápu, ale prosím, zaměřte se i na tyto tapetovací spamery, hodně by to pomohlo i diskuzím pod články.

Až na to, že já tu žádné fake registrace nepoužívám vědomě. Je to asi nějaká chyba autentizačního systému, který zřejmě špatně používá OpenID. Všiml jsem si toho až teď, když jste odkázal ty příspěvky. Ta chyba také vysvětluje, proč mi z nastavení mizí blokovaní uživatelé.

[peete]

Dyt ma Jirsak pravdu. Talwind jsou proste ty zkratkovite inlajnovane tridy (utility classes). Pro me stareho dedka je to neco, co se vzdycky zakazovalo, ale ted je to zas v mode. Videl jsem lidi, co v tom delaji silenou rychlosti prototypy a uplne se vyzivaji v tech zkratkach. Psali to tak rychle ze nez sem se zamyslel, tak meli celou stranku hotovou. Potom potrebovali neco zopakovat tak prasacky kopirovali hromadu tech stylu. Proste nejdriv sme zobecnovali, tohle zase zkonkretnuje (svym zpusobem). Kdo to tak chce delat, tak to tak dela, proc ne, nebudu ho bit.

[martyd420]

Potom potrebovali neco zopakovat tak prasacky kopirovali hromadu tech stylu.

tailwind na ty opakující se věci má možnost udělat si

Kód: [Vybrat]

.custom-class {
    @apply font-bold text-xl mb-2 ...
}nechápu, proč se toho někteří štítí, nebo až bojí

[Filip Jirsák]

Potom potrebovali neco zopakovat tak prasacky kopirovali hromadu tech stylu.

tailwind na ty opakující se věci má možnost udělat si

Kód: [Vybrat]

.custom-class {
    @apply font-bold text-xl mb-2 ...
}nechápu, proč se toho někteří štítí, nebo až bojí

Protože je to proti smyslu těch frameworků.

Kaskády v CSS vznikly v době, kdy se počítalo s tím, že se napíše ručně jednoduchá HTML stránka a k tomu se ručně napíše CSS, které bude mít pár stylů. Kaskády v CSS měly usnadnit psaní, omezit psaní opakovaného kódu.

Webové aplikace jsou ale co do složitosti HTML i CSS někde úplně jinde. Navíc hierarchie, jak je navržená v CSS, neodpovídá zcela tomu, jak je to potřeba ve webových aplikacích. A hlavně webové aplikace potřebujete skládat z nezávislých zapouzdřených komponent, které se navzájem neovlivňují – takže fakt nechcete globální CSS soubory, které ovlivní celou aplikaci.

Utilitní třídy a zejména Tailwind se používají ze třech důvodů. Seřadil jsem je od toho nejméně důležitého:

1. Jednodušší zápis – samotné CSS musí pokrývat všechny možnosti, takže se tam někdy i jednoduché věci musí zapsat složitěji, třeba nastavením více vlastností. Třeba horizontální vycentrování znamená nastavit margin-left: auto; margin-right: auto; – v CSS frameworku s utilitními třídami na to zpravidla máte jednu třídu.

2. Smysluplný systém hodnot – třeba grid, barevné palety. Když budete psát CSS ručně, uděláte jedno tlačítko široké 120px, pak na to zapomenete nebo někdo jiný udělá další tlačítko 160px široké, a třetí tlačítko bude 150px široké. Protože hodnot, které dávají nějaký smysl (třeba jsou to hezká čísla) je strašně moc, ale neladí spolu. CSS framework má  připravené rozměry, které jsou v nějakých násobcích, které vychází ze stovek let zkušeností s tím, co považujeme za hezké, příjemné. (Stovek let proto, že už se to dávno před IT a před tiskem objevuje třeba v architektuře nebo výtvarném umění.) Takže standardně nebudete volit šířku tlačítka se stupněm po pixelech, ale máte nějaké předem dané rozměry. Takže i někdo, kdo má grafické cítění pařezu, to snadno poskládá tak, aby to bylo zarovnané, věci nebyly podobně velké ale stejně velké, a ty, které jsou různě velké, budou mít alespoň nějaký jednotný rytmus.

Týká se to nejen velikostí prvků, ale také rozestupů, velikostí písma. A třeba také barevných palet – nemusíte vymýšlet světlejší odstín nějaké barvy, máte už hotovou paletu. (Dnes s funkcemi založenými na odstínu a jasu už je to jednodušší, dříve s rgb se to muselo někde bokem spočítat – a pak ještě obvykle ručně doladit).

3. Např. Tailwind má skvělou dokumentaci. Nemusíte dělat pokusy s CSS v prohlížeči. Chci dělat kulaté rohy, tak si v dokumentaci Tailwindu najdu kulaté rohy a rovnou tam vidím, jak tam ty jednotlivé varianty, co jsou připravené v Tailwindu, vypadají. Takže nemusím nic zkoušet, prostě si vyberu z nabídky to, co chci. Stačí tedy mít základní představu o CSS, není potřeba ho ovládat nějak detailně a znát všechny možné vlastnosti – jenom si prohlížím dokumentaci a vybírám, co se mi hodí.


Utilitní třídy jsou opravdu v něčem podobné tomu, jako bych psal styly přímo do HTML. Jenom je to o úroveň výš. A to psaní „stylů“ má svou nepopiratelnou výhodu – vidím stylování rovnou společně s HTML kódem. Nemusím z HTML odcházet do CSS a tam hledat, kde jsou ty styly vlastně nadefinované a hledat, jak se uplatní kaskáda stylů. Ne, vidím to rovnou v HTML, nemusím nikam odcházet. (Vue řeší, jak mít HTML, JavaScript i CSS komponenty v jednom souboru. React resp. JSX řeší, jak mít HTML a JavaScript v jendom souboru, Tailwind k tomu přidává i to CSS. Evidentně je poptávka po tom mít kód pohromadě.)

A znovupoužitelnost, abych nemusel opakovat stále dokola ten samý kód? Dneska už přece nikdo nepíše celé HTML soubory ručně. Vždycky na to máme nějaké šablony, ať už na klientovi (např. JSX), nebo na serveru (JSX, PHP, Thymeleaf, Astro…). Takže když se něco bude opakovat, stejně chci mít na jednom místě i HTML. Takže si vytvořím v šablonovacím systému HTML komponentu – no a té pak nastavím ty utilitní třídy. Takže se CSS nikde neopakuje.