They are cryptic but the learning curve is not that steep. Once you get the idea, it becomes much easier (and quite pleasant for a CSS hater like me).
For example px-3 means "padding on the x axis 3 (spacing values)" and gives you padding on both left and right.
There is a (rather simple) language that you need to learn and at least for me it made things much, much better. You can probably get the feel for it in several hours of building a basic website with Tailwind (and DaisyUI I would recommend).
I am not going to argue whether that's the case, as I never managed to learn CSS enough to be productive in a convenient (for me) way. Despite of trying many times. Whereas tailwindcss "clicked" right away and gave me the awesome superpower to build whole products without having to depend on other people. Before that I hated myself for the horrible, unmaintainable mess that I created, and double hated myself later when I had to revisit the project. Since I am using tailwindcss, I never had bad experience. Of course I still have to spend time wondering how to center some element and why it doesn't work, but that's not what I am complaining about.
It might be just a personal defficiency, but it is how it is (for me).
One of the reasons Tailwind became so popular - even more so than preceding frameworks like Bootstrap - is that a lot of people who normally liked working with CSS directly fell in love with it. It removes the extra step of editing a separate CSS file without straying far from a 1:1 mapping and eliminates most of the cascading rules that have plagued frontend for decades (`group:` and friends notwithstanding). The latter is important when working on large teams because it eliminates the name bikeshedding and conflicts.
sorry, but this is just not true. The cascading issue is still there, and it gets even worse because if you have an element with class "p-1 p-0" you cannot know in advance which will take precedence.
Of course you shouldn't do that, but it happens to be the case that Phoenix does exactly that
This is not a cascading issue. This is a "You're holding it wrong" issue. And when Phoenix does write 'p-0 p-1', Phoenix and Tailwind are not a good match.
You suddenly reminded me about another good Tailwind thing: linter will highlight "p-1 p-0" as a mistake. I've never seen linters that warn on "your-custom-p1 your-custom-p0", but Tailwind makes it possible.
As someone who used and knew CSS very well, and reluctantly used tailwind, yes. I don't strongly prefer one or the other. But I will say now that I know Tailwind, when I see those large class name strings, my brain parses them shockingly fast, and they kind of melt into the background similar to comments. Also, common linter rules will order the classnames, and that they are always the same between disparate tailwind projects, all together its not nearly the annoying mess I thought it would be on first sight.
it's quicker to write, though. and many of these class names are the same in bootstrap, so I've been seeing stuff like 'p-0 m-1' in frontend projects for decades.
another huge benefit these days is with the styling living alongside the markup, it is very easy to use chatGPT or other AI tools to copy/paste and have changes made, etc. it is much less work with one file vs multiple. you can give the context super easily and take the results very quickly.
