Anyone not using Tailwind in a Phoenix project?

Phoenix Forum Chat / Discussions
,
41

I don’t have a massive project either. I agree that dead code accumulation is a potential issue with hand written CSS; however, I am not going to write that much CSS to cause real pain.

2 Likes
42

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.

1 Like
43

You can try the utility that converts css to unocss… then quickly evaluate if UnoCss works for you

1 Like
44

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 Likes
45

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 Likes
46

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 Likes
47

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 Likes
48

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 Likes
49

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 Likes
50

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 Like
51

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 Likes
52

After using many CSS frameworks over the years, I’ve become wary of them. They give you a boost at the beginning but then you get stuck with their decisions and limitations. I currently start with a CSS reset and then hand-roll everything, liberally stealing pieces from existing frameworks by looking at their demos and copying the computed styles in the browser dev tools. My last few apps have stolen mostly from Tabler.

5 Likes
53

I used Bulma several years ago for a project and it was mostly fine. Since then I’ve created my own design system based on css variables.

2 Likes
54

If I had to choose a Framework, it would be either Bulma or something more minimal like Pico CSS. However, I feel the same as @eahanson: These frameworks help you get started quickly, but at some point, I reach a point where I feel limited and want to throw out the framework in favor of CSS that I control for 100%. In the last project where I used Bulma, I gradually removed and replaced all framework styles until nothing was left. I don’t think the initial productivity boost was worth it then.

3 Likes
55

Bulma looks nice and Pico seems to have been mentioned a few times… might be worth putting a list together and creating a poll - anyone fancy doing it? (Maybe you @arcanemachine? :icon_biggrin:)

If anyone’s interested maybe first create a post here with the list in case someone thinks of any not on it.

To qualify, the framework should be one that can be used with Phoenix.

Ideally we’d need a way to differentiate between:

  • Using currently
  • Want to use
  • Want to explore

So each framework would have an entry with each of the above, eg:

  • Tailwind (using currently)
  • Tailwind (want to use)
  • Tailwind (want to explore)
  • etc

This could help show what is actually being used right now, what people are interested in, and what they are almost certainly going to use…

2 Likes
56

Let’s start the list here - this is wiki post - please feel free to add to it (please follow the same format):

3 Likes
57

I used to like Bulma a lot, but it seems that it is not being maintained. Just check the Github issues.
What i really liked about Bulma - The ui is so clean and minimal, that normal users would not notice any design. The ui would get out of the way and let the content/data shine.
Only if it were maintained and used modern css/html it would be really really nice.

/small rant about app development /
But then again these choices are really subjective. We are ultimately just drawing rectangles on screen. I also sometimes think that web ui needs to be standardized a bit more. We as web devs want to make our apps unique. This comes at a cost and decision fatigue. What if all my apps look the same? I run a web agency (and mostly do business apps), and I would certainly like all my apps to look uniform. I am not against theming, but using a different css framework for every other project. I don’t want to do that anymore.
At present Beer css seems a nice choice for me in terms of css size and the components it offers. But if bulma became modern and smaller, I would like to pick bulma, just because its so clean. And I would like to stick with it.
But alas, its the web, and the only constant is change.
/ small rant ends /

1 Like
58

I’m using TailWind BUT I am really thinking of just using @apply to define high-level classes the way I would in traditional CSS, but applying Tailwind classes. I like how Tailwind makes CSS easier to write, but I find that including full details within the HTML makes it hard to read and maintain.

3 Likes
59

This topic makes me very happy my nick is not apply at least!

(i know the guy with the github handle @impl, he doesnt code elixir but lets just say he followed the refactoring of how behaviours worked closely against his will)

5 Likes
60

<response class=”tailwind is awesome but ido not feel confortable when my html code looks like this so iwould rather take time to build my own classes”>Mais je me répète : Tailwind is awesome<\/response>.

4 Likes