> Or should I just reinstall Bootstrap and be done with this.

That one.

Tailwind gives you tools when you want to control the design, but you’ve got to control the design.

When you just want something that looks good and don’t mind that bootstrap-y feel, bootstrap is the way to go.

(There are projects that essentially recreate bootstrap on top of tailwind, which, in theory, might give you something like bootstrap as a starting point with the power of tailwind, but I haven’t seen it work better in practice than just using bootstrap.)

Disagree.

Just get one of the tailwind UX kits and use their classes as your standard style guide. I personally use flowise as it’s free with paid more complex components if needed, but there are a bunch of others out there that fill the same space.

Can you suggest which of these kits are good?

DaisyUI

The same can be said about Bootstrap, though. Just get a theme to make it look less bootstrapy. I think both viable ways to go, and it just boils down to personal preference (especially for hobby projects).

On a new project, sure maybe going with tailwind + a theme/kit is a bit more up to date than using bootstrap. But on an existing page that already looked fine with bootstrap, why bother with the extra work?

That's fine (I've done it). It's just that bootstrap is better at it.

If your looking for components like bootstrap try https://flowbite.com/ for free. Tailwind also has paid components. You just copy and paste. The cool part is once you get more comfortable you can start to tweak the flowbite components.

I use DaisyUI to accomplish that goal, here is my demo site for an example: https://nwk-landing-kit.netlify.app

and here are the docs for DasiyUI: https://daisyui.com

The DaisyUI description of the Tailwind button made me laugh:

"bg-indigo-600 px-4 py-3 text-center text-sm font-semibold inline-block text-white cursor-pointer uppercase transition duration-200 ease-in-out rounded-md hover:bg-indigo-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 active:scale-95"

Yeah, that's not making my life easier is it. Also some of those class names are super cryptic.

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).

ia that really easier than learning css directly? since you have to understand 'paddding'and 'px' ?

see https://developer.mozilla.org/en-US/docs/Web/CSS/padding

vs https://tailwindcss.com/docs/padding

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

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.

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.

If the alternative is:

.foo { padding: 0; padding: 1rem; }

then I can see the precedence but I don’t see how it’s an advantage. You can write bad code in any methodology.

That seems like an issue with Phoenix and not Tailwind or the Tailwind approach.

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.

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.

Tailwind and Bootstrap and are kinda apple vs apple pie. Tailwind provides classes that still need to be stacked to build components.

It'd be easier if you were using some source for UI components, I've used TailwindUI in the past, but that's paid. I'm sure there are good free alternatives.

A friend of mine who is good at these things recommended https://mantine.dev/

reinstall bootstrap and be done with it. You can look at daisyui it is closest to bootstrap. There is also shadcn ui, ui looks good but it would take you effort to port styles to your phoenix project.

Put your HEEx into a LLM. They understand both Bootstrap and Tailwind very well. It will probably not be too hard.

I’d say it depends on who is paying you. If you have job security and want to tinker, then play with tailwind if you want (most trendy / loud people seem to like tailwind). If however you are working on your own project / are self funded / or have a deadline just stick with bootstrap that you know, and focus on getting your work done instead of bike shedding on the UI

You can check out Halfmoon too instead of Bootstrap: https://www.gethalfmoon.com/