Sebb
is this too evil? 
<.flex gap-4 justify-start>
...
</.flex>
<.grid grid-cols-3 gap-3>
...
</.grid>
defmodule Components.Tailwind do
use Phoenix.Component
import Phoenix.LiveView.HTMLEngine, only: [component: 3]
def flex(assigns), do: component(&div/1, classes(assigns, "flex"), [])
def grid(assigns), do: component(&div/1, classes(assigns, "grid"), [])
...
defp div(assigns) do
~H"""
<div class={@classes}>
<%= render_slot(@inner_block) %>
</div>
"""
end
defp classes(assigns, base) do
classes =
assigns
|> Enum.reject(fn {k, v} -> k == :__changed__ || v != true end)
|> Enum.map(fn {k, _} -> k end)
|> Enum.join(" ")
assign_new(assigns, :classes, fn -> base <> " " <> classes end)
end
end
Where Next?
Trending in Discussions
Hey there,
It’s been more than a year since we started using LiveView as our main UI library and building a whole library of UI componen...
New
I am happy to introduce the very α version of the new programming language compiled to BEAM.
Welcome Cure.
It has literally three kille...
New
Hi everyone!
The first release candidate for the Expert language server project is now available!
We’ve published a press release detai...
New
A little off-topic, but I feel like people here have a good head on their shoulders.
I used to be quite good at making software. Was luc...
New
Hi there! :wave:
@frigidcode and I (but mostly him) have been running an Elixir Book club, we’re almost done with Designing Elixir Syste...
New
I’ve been using Emacs as my main code editor for more than a two years. It’s a custom build version although I’ve tried doom emacs and sp...
New
I love Elixir. It’s one of 2 programming languages I’ve ever fallen in love with.
But I don’t use it anymore.
Serverless was the promis...
New
Other Trending Topics
Edit: 2026 May 15 - This post is archived.
Mob is alive!!
Main docs: mob v0.7.11 — Documentation
A bit of explanation for the slightly c...
New
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
Hobbes is a low-level distributed database for the Elixir programming language.
Hobbes provides a simple, safe, and scalable storage lay...
New
ExRatatui lets you cook up rich terminal UIs in Elixir, powered by Rust’s ratatui via Rustler NIFs. Build interactive terminal applicatio...
New
Just published claude-code-elixir, a plugin marketplace for Claude Code with Elixir support. These are the plugins I’ve been using for my...
New
Xamal is a deployment tool for Elixir apps that deploys native releases to bare metal servers over SSH. It’s a port of GitHub - basecamp/...
New
Latest on Elixir Forum
Sponsor Spotlight
Elixir, Erlang & messaging conferences from Code Sync. Next up: ElixirConf US (10–11 Sep) & Code BEAM Europe (21–22 Oct), Haarlem + online.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ai
- #ecto-query
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #elixirconf-eu
- #api
- #forms
- #metaprogramming
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Practical resources that improve the lives of professional developers.
Bringing learning, work and compliance together since 1987.
**Building the future of software with AI, trust, and human connection.**
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 9- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
sodapopcan
Can’t say I haven’t thought of it more than a few times
I was thinking along the lines of more of a “styled components” approach like
grid="cols-2 justify-end gap-2"and so on, but ultimately decided “nah”. But then again… maybe.EDIT
Oh wait, I missed
<.gridwhich yes, that’s far more of a styled components approach.BartOtten
Please also create SubSubSubSubHeader
Evil or not; it looks in the spirit of Tailwind
sodapopcan
The company I used to work for does have a design system in React that is very close, though a lot of the “values” took their own values (like for example). It’s based off of styled system.
I think accepting any bare attribute as a class is pretty iffy. I was thinking this could better suited to more of explicitly defining what attributes are style attributes. A few special ones could have their own components too, like in your example:
…and then of course you’d have to have
<.box>or something for<div>s. I guess really you would need a componentized version of most or maybe all dom elements (though slots could get rid of a bunch of them probably).Anyway, then the values could just map to tailwind classes, or possibly even another CSS framework’s classes.
Anyway, I’m just thinking out loud as I have thought quite a bit about it in the past but it’s been a while, so sorry if I’m not being clear or even making any sense.
LostKobrakai
I’d suggest taking a step back and ask yourself if changing the syntax for how to apply css is actually useful. In my opinion there’s not much use in that. I’d rather look into actual higher levels of abstraction, like e.g. presented on https://every-layout.dev/.
Also I’d worry there’s pitfalls for LVs change tracking with the approach you’re taking there.
Sebb
Do not quite get what the difference to
class="cols-2 justify-end gap-2"is here…?that looks funky!
Yeah though about that. But I’d need way more experience to find right attributes, in my brutal approach there is no need for this.
The main reason I did that in the first place was because I can. But then I noticed that I like it.
It brings a little order in the tailwind stew (loving tailwind! but still…) without losing any of its flexibility. (For more involved classes that are not valid attribute-names one could add an explicit class attr).
Will do.
I was bitten by that some time ago and thought I understood whats going on, can’t see what would be the problem here…!?
sodapopcan
I basically just mis-remembered and responded too quickly and tried to cover it up
I meant the
<.grid cols={2} ... />approach.LostKobrakai
Maybe not for change tracking, but afaik using this essentially means the LV has no means of splitting the static content of a template from the dynamic parts, which is used to optimize diffs by not sending the static parts again.
sodapopcan
I think the crux of why I didn’t dive into even really trying this is because we shouldn’t really be repeating ourselves with Tailwind. The “messiness” of Tailwind is usually relegated to single components (and can be organized by type over multiple lines). I try to have as few Tailwind classes as I can in LiveViews or dead view files, so getting rid of the
classattribute didn’t feel like a giant win.LostKobrakai
Thinking about this some more I might actually be wrong here. This static vs dynamic part is likely done at runtime, where using the a dynamic component wouldn’t really be different to a compile time known one.