Questions & Help>Questions

Need help with an issue on my phx_component_helpers library

#liveview#phx_component_helpers
cblavier

cblavier

Hi there :waving_hand:

I’m the author of phx_component_helpers and I have a recurring complaint of users regarding the CSS extension feature. I’m struggling to find a solution to this issue. :exploding_head:

The purpose of this feature is to build components with default CSS classes and extend its classes when using the component. For instance a component can have following default style: border border-gray-400 bg-red :red_circle: If I use it and extend its style with bg-blue the resulting CSS will be border border-gray bg-blue :blue_circle:

We actually replace all classes from default styling having the same prefix (everything before first hyphen). It’s kinda working for a lot of cases but if you want to extend border border-2 border-orange-500 with border-red-500 it will be a little too greedy and replace all border classes resulting in border-red-500 instead of border border-2 border-red-500.

The code is right there: phx_component_helpers/lib/phx_component_helpers/css.ex at main · cblavier/phx_component_helpers · GitHub

Another case completely defeating my prefix base approach is when you use multiple Tailwind classes that deal with the same CSS properties but do not share any common prefix. For instance you may want to extend a component using block (in CSS it’s display: block;) with flex (in CSS it’s display: flex;)

It looks like I might need some specific Tailwind related code dealing with Tailwind semantics. Do you know where I could find some JSON (or so) metadata regarding the whole Tailwind CSS class hierarchy?

Any other idea?

:folded_hands:

4 comments
#liveview#phx_component_helpers
801 4

Showing Posts 1 to 4

cmo

cmo

My instinct would be not to do that sort of thing at all. Sounds like a lot of work for something that will be confusing and/or brittle.

1
Post #1
cblavier

cblavier OP

Sounds wise indeed! :owl:
Let’s see what other folks might think of this feature :thinking:

0
Post #2
Eiji

Eiji

I will support something like:

<MyComponents.component cmp-color="red-500"/>
# and then
color = assigns["cmp-color"] || "orange-500"
~H"""
<span class={"border border-2 border-#{color}"}>
  …
</span>
"""

plus some extras like:

# override class
<MyComponents.component class="btn btn-primary"/>

# merge base classes with theme classes
# default_comp_classes = ["border"]
<MyComponents.component theme-classes={~w[border-2 border-red-500]}/>

# or merge base classes + theme classes with extra classes
# default_comp_classes = ["border border-2 orange-red-500"]
<MyComponents.component classes={["color-red-500"]}/>
1
Post #3
cblavier

cblavier OP

One of a my teammates just had an idea I found clever and not too brittle (ping @cmo): extend component CSS classes with explicit class removal or additions.

A button component with following default CSS: block border border-2 border-gray-500 would be used like this:

<.button class="!block flex !border-gray-* border-blue-300"/>

The ! is used to remove classes.
So the previous example would produce flex border border-2 border-blue-300.

1
Post #4
— All posts loaded —

Where Next? Top

View thread on forum (has 4 replies!)
liveview
phx_component_helpers
Home Questions & Help>Questions
4 677 4
Last post
REPLY VIEW THREAD WITH 4 POSTS

Trending in Questions Top

katta
Questions & Help>Questions

Phoenix Ecto realistic benchmarks
I having some trouble figuring out if I have set myself too strict of standards for my production server. Currently I can handle 75% of r...
/phoenix#ecto#troubleshooting
2 1863 12
New
achenet
Questions & Help>Questions

No Tailwind binary for FreeBSD
Hello, I’m trying to build a basic Phoenix web-app, and I’d like to use Tailwind. However, when I launch mix phx.server, I get an error...
/phoenix#freebsd#tailwindcss#tailwind
11 1073 14
New
kpanic
Questions & Help>Questions

"Mentoring" match maker? maybe MVP
Hi everyone, I am toying with the idea of building a “match maker” for giving personal help to people that wants to start coding. I sta...
#helpers#programming
8 940 4
New
Cxx-mlr
Questions & Help>Questions

Using try/catch with update_in/3
I’m working on a small exercise involving update_in/3, and I came up with this solution: data = %{ name: "Periodic Table", category:...
#learning-elixir
9 273 12
New
ChrisAmelia
Questions & Help>Questions

Need help understanding order of function calls from Phoenix auth
I’ve got trouble wrapping my head around the order in which functions are called in this snippet (from Phoenix’s authentication): toke...
/phoenix#learning-elixir
0 76 2
New
dillonoconnor
Questions & Help>Questions

Hologram compiler and iex -S mix
Is there any way to avoid the Hologram compiler running when using iex? It seems like the front-end code could potentially be disregarded...
/hologram#iex
2 386 3
New
thiagogsr
Questions & Help>Questions

Oban Worker max_attempts doesn't compile with a constant
** (ArgumentError) expected :max_attempts to be a positive integer, got: {:@, [line: 10, column: 19], [{:max_attempts, [line: 10, column:...
/oban
0 66 1
New

Other Trending Topics Top

GenericJam
News>Announcing

Mob - Native BEAM / Elixir on Native Mobile
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...
/mob#library#beam#mobile#liveview#react-native#mobile-app#mobile-development
259 8396 111
New
mudasobwa
Chat & Discussions>Discussions

Cure - a new language compiled to BEAM
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
#static-types#type-checking#types#fsm
171 6315 70
New
garrison
News>Announcing

Hobbes - a low-level distributed database for the Elixir programming language
Hobbes is a low-level distributed database for the Elixir programming language. Hobbes provides a simple, safe, and scalable storage lay...
#library#database#distributed#hobbes
306 6242 88
New
budgie
Chat & Discussions>Discussions

I genuinely hate programming now
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...
#ai#career#rant
460 3763 113
New
KristerV
Chat & Discussions>AI / LLMs

State of developing agents with Elixir (not coding agents)
Hey. Is there anyone here who creates agents in their apps? Not talking about using agents, but creating them. I’m finding it pretty diff...
#agent#ai#llm#dev-tools#ai-tools
31 3653 21
New
mcass19
News>Announcing

ExRatatui - Elixir bindings for the Rust ratatui terminal UI library
ExRatatui lets you cook up rich terminal UIs in Elixir, powered by Rust’s ratatui via Rustler NIFs. Build interactive terminal applicatio...
#library#rust#terminal#tui
60 3370 16
New
Back to top

Questions & Help>Questions

Questions Questions ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

Code Sync

Elixir, Erlang & messaging conferences from Code Sync. Next up: ElixirConf US (10–11 Sep) & Code BEAM Europe (21–22 Oct), Haarlem + online.

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Code Sync

Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

Manning

Master modern tools, write cleaner code, and tackle real-world challenges.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Software Mansion

The team behind Membrane, Popcorn, LiveDebugger. Available for hire.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Sub Categories:

Forums

Popular Tags

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Code Sync

Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

Manning

Master modern tools, write cleaner code, and tackle real-world challenges.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Software Mansion

The team behind Membrane, Popcorn, LiveDebugger. Available for hire.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews