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
As the title says, please share what you’ve been up to with Elixir. Whether that’s been learning it, looking into it, making stuff with i...
New
I want to open this thread for you all to discuss and help those who really like Ash but are still hesitant to use it in a real project. ...
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
I’m posting this in response to Jose’s recent tweet (Cr. link) :
People are sleeping on Elixir for a coding harness:
Hot-code swappi...
New
Hello,
I wrote Stop My Hand, a Scattergories-like web application using Phoenix/LiveView as my learning project for Elixir (after readin...
New
It would be helpful to have a list of companies worldwide that hire engineers without prior experience in Elixir. Often, it can be quite ...
New
Anyone running long-lived stateful processes on BEAM? We’re building an AI agent runtime and would love to compare notes.
We’re a small ...
New
Other Trending Topics
Hobbes is a low-level distributed database for the Elixir programming language.
Hobbes provides a simple, safe, and scalable storage lay...
New
Hi there! We created Gust: A task orchestrator inspired by Airflow.
For those who have never heard about Aiflow, it’s a Python-based wor...
New
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge & Solve.
They are GUI (Emerge) and State management (S...
New
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
New
There are three potential reasons for members of this forum to have a look at https://vutuv.de
You are tired or annoyed of LinkedIn.
Yo...
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
- #deployment
- #library
- #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
- #ecto-query
- #blog-post
- #elixirconf-us
- #elixir-ls
- #ai
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Build Elixir applications with speed and confidence.
We build reliable cloud platforms for business-critical systems.
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.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
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.