I was mostly wondering about the scaling claims. My work project (in plain ol’ CSS) is already getting large and there is definitely dead code, though it’s not a huge deal (right now, at least). Everything is well-scoped, at least, so no issues with cascade.
sodapopcan
CharlesO
You can try the utility that converts css to unocss… then quickly evaluate if UnoCss works for you
1
annrap1d
I’ve chosen not to use Tailwind and instead rely on CSS. For me, CSS offers greater flexibility and direct control over styling, which aligns better with how I like to structure and maintain my projects
2
knoebber
I used it for a project a few years ago when it was first introduced as a phoenix default. It was OK. My favorite thing about it is all the color and spacing utilities - it definitely sped up initial dev because I didn’t need to make many design decisions.
However, eventually I felt like it was slowing me down. I know vanilla CSS pretty well, so it was frustrating to have to keep looking at TW docs to figure out how to do things.
Then all the repetition of classes started to bother me. I tried making small components for everything, but sometimes it just doesn’t make sense to extract a small piece of markup into a component. It felt like my CSS framework was forcing me to make decisions about how my code was structured. So I started to use @apply more and more. At that point I realized I just wanted vanilla CSS again, but it’d be too much work to refactor everything (maybe now a LLM could do it lol).
Now the first thing I do in a new phoenix project is remove tailwind. I don’t really mind that it’s a phoenix default, but I do wish that the --no-tailwind flag would work correctly (see a topic I opened two years ago: Improve phx.new -no--tailwind? ) . I don’t think phoenix should ship with both tailwind and vanilla styles, but it’d be great if you could at least opt out of adding TW classes everywhere when you do phx.new.
3
andreh
This is a precise description of my own experience. I’ve removed Tailwind from my app one year ago. One of the best decisions for my app that I’ve made so far! It’s really nice to see that other Phoenix devs like vanilla CSS. I don’t feel alone anymore, thanks!
4
AstonJ
Thanks for sharing your thoughts everyone. I was curious (and I thought others might be too) because I’m currently working on a FoundationCSS site and the thought of converting it to Tailwind crossed my mind, so I had a chat with my favourite LLM about it.
I initially asked whether there were any tools to convert a Foundation site to Tailwind - it was more involved that I’d have liked so I decided against it for this particular site. However since we were on the topic I thought I’d dive a little deeper as I am yet to use Tailwind and was pretty excited about it when Chris first mentioned it:
My LLM tells me though, that Tailwind isn’t really a CSS framework as such, it’s more a ‘replacement for naming things and managing a separate stylesheet’.
The more we talked about it the more I felt it may not actually be what I want from a CSS framework - we originally hand-coded sites from scratch with our own CSS, and the reason we started using a CSS framework was primarily to remove the headache of browser compatibility: when you used something like Foundation (or Bootstrap) you could be reasonably confident it would work on most browsers (this was particualrly important after responsive design became a thing).
Since the front-end world is very fast-moving, and as some time had passed since Chris first announced adopting Tailwind I wondered whether there were any other modern approaches that would be worth considering. I was told there are:
- Modern CSS with Autoprefixer - the closest thing to pure HTML/CSS but with a modern/safe toolchain.
- UI component libraries (like Shoelace) - the modern, spiritual successors to Bootstrap/Foundation etc
So where do I personally stand right now? I haven’t completely discounted Tailwind - I still want to evaluate it in a little more detail, but I will also look more into the other options. It’s good to know that I won’t be alone if I decide not to use Tailwind!
2
Desty
Yes – I’ve been writing HTML for over 25 years (Frontpage 98!) and eventually realised that I’m a terrible designer, and really dislike working with Tailwind, despite that people get beautiful results from it.
Instead I mostly use classless (or at least class-light) frameworks and put my extra styling in a single separate CSS file like the old days.
I wouldn’t advocate that this approach is better, just… more enjoyable for me, at least for the kind of sites/apps I work on.
3
woylie
Shoelace has been acquired by Fonticons, inc. (the company behind Font Awesome) and morphed into Web Awesome; a paid pro version was announced.
If you decide to write modern CSS, I’d definitely recommend to add Stylelint to your project. My default configuration is fairly basic, but one thing I like to do is to enforce the usage usage of variables or functions for certain properties like colors or font sizes, so that the values reference once-defined design tokens instead of being hard-coded.
5
Doerge
I handwrite my css. I find it way nicer. The html/css is unreadable with Tailwind. I also HATE that you neeed to know css to guess the names of the classes anyway.. so it just feels like a dumber version of css. px-4, justify-between, etc. You need to already know the real css names to use it.
Buuuut… for new vibe coded projects I just use Tailwind. Sooooo much training data out there that it’s just incredibly good. And I guess it’s easier for the LLM with semantic markup and styles colocated too.
1
stwf
Does anyone else here like and/or use Bulma? I like that it provides some very useful elements and is themeable, in that I can change some CSS variables and get format differences all across my site instantly.
I like all of the widgets DaisyUI provides and that there seems to be an active repository of components for LiveView. As I’m. a big fan of components! But it still requires learning Tailwind at some point. I know its usually a bad idea to fight the tide in situations like this so while I have no desire to update older projects for DaisyUI I have been trying it out in newer apps.
3