3 ms·

If you’re aiming for simplicity, how did tailwind make it to the list? Why not use plain CSS?

codemonkey-zeta 3y ago
Not OP, but for me but for me it eliminates one more decision - naming. I don't want to think about class names or follow a convention like BEM (and probably set up linter rules so I don't do it wrong). I like sscs / BEM in some projects, but it's just one more thing to think about. With utility classes you don't think about it, you style the page as you go inline in the class attribute. The biggest hurdle is learning the utility class names, but there are good cheatsheets for that and my editor already autocompletes all the tailwind classes for me, plus whatever other classes I may have defined. I think HTMX and tailwind fit well together because I also see HTMX as a kind of "utility framework". It augments the standard html elements with additional capabilities using attributes and HATEOAS.
Brajeshwar 3y ago
If you are not writing S/CSS or styling anything beyond what Tailwind/Boostrap (or other frameworks) already has, then it is as simple as it gets. The last time I was involved (actually writing) in a Tailwind project was in 2018. However, today, I can just look at the documentation and do a design all the way without writing any S/CSS at all.
- absoluteunit1 3y ago
  ^This. After using it for the first time in my last next js app; played around with the basics of tailwind when I built typefaster.app and it’s my favourite css library. Also, their discord is very active and very very helpful
a_subsystem 3y ago
Live reload means I can inline edit classes as styling to quickly create components and not have to context switch to a css file/section. It feels easier to create structure and style as I go.
absoluteunit1 3y ago
Having used it only for my small typefaster.app project and a couple other small unpublished projects I can’t speak to great detail on advantages or disadvantages; I am not a CSS expert. From my limited experience, I found it’s far more convenient and intuitive than any CSS library I’ve used. It’s concise; writing css directly in my html and not feeling like I’m cluttering the file makes readability great. Debugging styling in SPAs is significantly easier since I can just glance at the DOM in the browser dev tools and be able to quickly find the CSS causing the styling issue (just looking through the HTML tree, not having to look through styling tool saves time) DaisyUI is a library built on top of it; a lot of great snippets of styles elements there. The config file; all custom configs are concise in one file. It makes things like conditional styling or just if you have any state determining styling, it is very easy to do and readable But in summary, honestly for me it’s just the direct in-html styling and conciseness. I’m a simple man
- gema_naranyala 3y ago
  My personal suggestion based on Tailwind as well: - Ripple UI - Preline UI - Hyper UI - Flowbite, and - Daisy UI
  - volkandkaya 3y ago
    https://github.com/versoly/versoly-ui https://github.com/versoly/versoly-ui would also work especially well with this stack as it comes with classes like Daisy (btn btn-primary) and JS like Flowbite (tabs).
InvOfSmallC 3y ago
I think it's the classic simple vs easy. For a non expert, you cannot deny Tailwind is a good mix of ease of use. For me CSS is simple but not easy.
sam_goody 3y ago
Think of Tailwind as another language; A variant of CSS which is technically a superset. The way that Typescript is to Javascript. For many, Typescript / Tailwind simplifies the code, even though it has to be compiled.

Not OP, but for me but for me it eliminates one more decision - naming. I don't want to think about class names or follow a convention like BEM (and probably set up linter rules so I don't do it wrong). I like sscs / BEM in some projects, but it's just one more thing to think about. With utility classes you don't think about it, you style the page as you go inline in the class attribute. The biggest hurdle is learning the utility class names, but there are good cheatsheets for that and my editor already autocompletes all the tailwind classes for me, plus whatever other classes I may have defined. I think HTMX and tailwind fit well together because I also see HTMX as a kind of "utility framework". It augments the standard html elements with additional capabilities using attributes and HATEOAS.

Brajeshwar 3y ago

If you are not writing S/CSS or styling anything beyond what Tailwind/Boostrap (or other frameworks) already has, then it is as simple as it gets. The last time I was involved (actually writing) in a Tailwind project was in 2018. However, today, I can just look at the documentation and do a design all the way without writing any S/CSS at all.

absoluteunit1 3y ago
^This. After using it for the first time in my last next js app; played around with the basics of tailwind when I built typefaster.app and it’s my favourite css library. Also, their discord is very active and very very helpful

a_subsystem 3y ago

Live reload means I can inline edit classes as styling to quickly create components and not have to context switch to a css file/section. It feels easier to create structure and style as I go.

absoluteunit1 3y ago

Having used it only for my small typefaster.app project and a couple other small unpublished projects I can’t speak to great detail on advantages or disadvantages; I am not a CSS expert. From my limited experience, I found it’s far more convenient and intuitive than any CSS library I’ve used. It’s concise; writing css directly in my html and not feeling like I’m cluttering the file makes readability great. Debugging styling in SPAs is significantly easier since I can just glance at the DOM in the browser dev tools and be able to quickly find the CSS causing the styling issue (just looking through the HTML tree, not having to look through styling tool saves time) DaisyUI is a library built on top of it; a lot of great snippets of styles elements there. The config file; all custom configs are concise in one file. It makes things like conditional styling or just if you have any state determining styling, it is very easy to do and readable But in summary, honestly for me it’s just the direct in-html styling and conciseness. I’m a simple man

gema_naranyala 3y ago
My personal suggestion based on Tailwind as well: - Ripple UI - Preline UI - Hyper UI - Flowbite, and - Daisy UI
- volkandkaya 3y ago
  https://github.com/versoly/versoly-ui https://github.com/versoly/versoly-ui would also work especially well with this stack as it comes with classes like Daisy (btn btn-primary) and JS like Flowbite (tabs).

InvOfSmallC 3y ago

I think it's the classic simple vs easy. For a non expert, you cannot deny Tailwind is a good mix of ease of use. For me CSS is simple but not easy.

sam_goody 3y ago

Think of Tailwind as another language; A variant of CSS which is technically a superset. The way that Typescript is to Javascript. For many, Typescript / Tailwind simplifies the code, even though it has to be compiled.