I had always avoided using any CSS frameworks because I wanted to master and also maintain complete control over my CSS, but after having used Tailwind for a few projects now, I don't think I would every want to go back to writing raw css ever again.
My best guess is, you get your DRY properties by re-using app-specific components that use utility classes, rather than by re-using app-specific CSS classes?
Trying to figure out why people think it's a good idea. It's certainly not the vision of web dev I was trained on.
If I can chime in here, yeah that’s the gist although I’ll say Tailwind isn’t a panacea. My team and I still write vanilla CSS, but it’s less common and much more navigable. It’s usually because the Tailwind version (if the utilities exist) would be unwieldy.
When I started writing CSS I would commonly encounter modestly sized websites of only a couple hundred pages with 17 thousand lines of CSS or more because of frameworks like Bootstrap. At least a few hundred of those lines would be overrides and just as many would probably be redundant.
My team launched a 6 thousand page website this past year with only a couple hundred lines of vanilla CSS and roughly 3 thousand lines of Tailwind generated CSS total.
At the end of the day, Tailwind is a zero-runtime, tree-shakable CSS framework generator. The burden of naming many common and universal design artifacts is alleviated. Class reusability goes through the roof. Custom stylesheets regain the ability to be edited with confidence again. It’s good. It makes the HTML a bit bloated and ugly which deters people at first, but dev tools pick up the slack and so far I’ve yet to see any performance impact there.
pcthrowaway is more or less right. Tailwind dramatically improves code coverage. A majority of tailwind's common utilities are used in every page's components or templates.
There are exceptions. We could use postCSS to code-split critical paths for CSS. It sounds like a fun side project for some framework's ecosystem. Unfortunately, the current state of CSS is very much good enough for me for now. I'm much more concerned about main thread work from JavaScript and optimizing images for the web, for example.
Two things you must keep in mind with Tailwind that are key to its success, they are:
1. It gives you bunch of sane defaults around colours and spacing. If you consistently use Tailwinds classes then you'll get a nice grid and (usually) complimentary colours.
2. You're using a a framework or view library that supports reusable components. For React, this is obvious. For Phoenix, you use LiveView components or the Phoenix "static" components.
Tailwind only really works when you apply its classes to components, then reuse the components (or more tersely: "Reusable styles via reusable components")
Here is an important article about functional css (tailwind's model) vs semantic css (what you have learned): https://adamwathan.me/css-utility-classes-and-separation-of-.... You might disagree with it but at least it provides the reasoning behind tailwind.
I think I read that a while back, which is the main reason I'm able to get past the "visceral reaction" as he so aptly put it. The part about separation of concerns being a false hope and bad framing rings true: "concerns" in software are hazily defined at the best of times. Thinking about dependency between CSS and HTML also makes sense. But I don't really like his examples, and I'm not convinced his evidence reaches quite as far as his final conclusion. For one thing ".author-bio" should have been "#author-bio".
Thinking out loud, now: the problem of CSS and HTML depending on each other makes me think of the dependency inversion principle. Basically, make both of them depend on some common interface or protocol, so they can change independently. Utility classes are in the same territory, but I don't think it's reasonable to demand that the shared language be app-independent, or put another way, to demand that a library author relieve you of the burden of naming your domain objects.
I suspect the ideal approach is app-specific "content-agnostic" classes, defined in terms of some library of helpful classes that are not themselves directly invoked in HTML, with #ids as needed for specialization. But I don't know, maybe I'll just try to the tailwind thing out on a new project.
For me Tailwind is an elegant and powerful design language, one which has sane defaults, and which gives me the opportunity to experiment quickly and instill life in the structure of my html right there where I type it, with just a few keystrokes and no change in context.
CSS isn't special; HTML and JS have similar needs for reuse and customization. It doesn't make a lot of sense to have a completely separate solution that solves this problem for CSS only.
>First, you can customize your core UI components to suit whatever needs, designs, and tastes that you have. If you want to use Bulma or Bootstrap instead of Tailwind – no problem! Simply replace the function definitions in core_components.ex with your framework/UI specific implementations and the generators continue to provide a great starting point for new features whether you’re a beginner, or seasoned expert building bespoke product features.
I mean I would think easily overriding it would be sending a -notailwind parameter when using a site generator or something. The above is not easily although not hard either. With a small amount of effort that might irritate you if you don't want to use tailwind is what is sounds like.
> If you want to use Bulma or Bootstrap instead of Tailwind – no problem! Simply replace the function definitions in core_components.ex with your framework/UI specific implementations
"Simply" here means rewriting a 661 lines file. Maybe a more modular approach with only Tailwind support at release would have been better.
I know I'm always the "Symfony does it better" guy but in this framework to use Bootstrap (or Foundation etc) for my forms[0] I "simply" have to put:
its done in such a way that people will be able to write modules that automate this for you. I can already imagine a boilerplate generator being created for this
You can do `-no-assets` or `-no-html` or even delete that file. All the generated code is here to get you started and generate the default "hello world" page. But none of it is necessary.
the "but there's always an escape hatch if you want/need it." is the critical difference. phoenix is super modular. In rails, you're really locked into a certain way of doing things. I've never felt like I've been corralled into a specific way of doing things that couldn't easily be changed with an hour of work at most.
I'm curious - what in Rails is like that? I've been doing RoR for a long time, and while "Rails is Omakase", I've never felt it was hard to swap out a component.
I don't think there is a definite answer for "what a property designed framework" is but I can try to explain where Phoenix sits in the possible trade-offs.
One possible approach frameworks use to provide escape hatches is configuration. You ship with a series of defaults and, once you want to change it, you need to find out the proper knob to turn. A downside of this approach is finding the proper knobs when you need to tweak it.
Another approach is code generation: you generate code (or configuration) and keep the knobs clear to user. There are still defaults (and conventions) but the knobs are laid out upfront in your application. The downside here is that having so many knobs upfront may seen daunting or noisy.
Since you mentioned Rails, I will provide references on how Rails and Phoenix use those.
Both frameworks leverage both techniques above, but Phoenix errs more on code generation and Rails more on configuration. Here is a practical example.
Rails has a middleware stack that is part of all applications. This stack is hidden from you. Here is how the generator file for said application looks like:
Phoenix has a similar stack (called plug) and the default stack is part of your application. Here is the generator file for it (it is not part of your app but used to generate it):
You can look at these approaches and try to compare the pros and cons.
---
My biased opinion: I have worked with both and I prefer the Phoenix approach. I understand someone may find having all steps in your endpoint noisy or daunting, but the plus side is that it takes a glance to see all steps a request goes through and you can tweak it in any way you want.
When comparing to Rails, if you want to insert a middleware in the middle of the default stack, you need to explicitly say before or after which middleware. If you want remove something, you need to state the negation and say "I don't want to have this". Overtime this makes it hard for you to visualize what your application does, because you need to assemble the pieces in your head and use tools to print the stack for you.
This also matters on releasing new framework versions. Because Rails has its own stack, if it changes the default middleware stack in any way, it can slightly change how your code. What if the middleware you were inserting before was moved up? Or removed altogether? Or maybe a middleware you deleted was replaced by another one, with similar functionality. Do you want to remove it too? This can lead to subtle differences of behaviour when upgrading.
The code generation approach requires you to opt-in to the new features, which is, IMO, one of the reasons why Phoenix could avoid breaking changes in the last 8 years or so.
This is in no way a knock on Rails. I am 100% confident the Rails team is aware of those trade-offs and could equally argue for their choices. It also isn't a binary choice either, both frameworks use both approaches, with some general preferences for one over the other.
It fits pretty neatly with components in LiveView, so for the sake of the default generators it makes sense to include. It's super simple to remove it and write components however you want though.
