kEND
So, we are converting sections of our markup to use function components in core_components.ex. We use tailwindcss.
We’d like to be able to style a button, for instance, as a function component (by simply modifying what is in CoreComponents.button/1). However we’ve run into the question of how to apply default styles to the button that can be easily overridden. Setting the default on the attr: :class attribute works, but only if you set no other values. Changing some of the provided classes, like bg-zinc-900, works as long as we do not set other bg- values on class when calling the <.button class="bg-red-500".... Doing so may appear to work, but the classes are used if they are the latest in the css file, not in the list of values in class="...".
Is there already a good way to do an override? A colleague found Twix library.
Can this our should this be included in Phoenix.Component? Or is it tied too closely to tailwindcss?
We’d be happy to contribute to a PR.
Thoughts?
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
We build reliable cloud platforms for business-critical systems.
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
Supporting innovation across the BEAM ecosystem.
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.
Bringing learning, work and compliance together since 1987.
Producing high quality Elixir screencasts since 2017.
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 1- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
cmo
One option is to use CVA, either with a library or manually..