cblavier
Hi there 
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. 
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 
If I use it and extend its style with bg-blue the resulting CSS will be border border-gray bg-blue 
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?
Where Next?
Trending in Questions
Other Trending Topics
Latest on Elixir Forum
Sponsor Spotlight
Build Elixir applications with speed and confidence.
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
- #ecto-query
- #elixirconf-us
- #ai
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #hex
- #security
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
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.
Master modern tools, write cleaner code, and tackle real-world challenges.
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 4- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
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.
cblavier
Sounds wise indeed!
Let’s see what other folks might think of this feature
Eiji
I will support something like:
plus some extras like:
cblavier
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-500would be used like this:The
!is used to remove classes.So the previous example would produce
flex border border-2 border-blue-300.