tcoopman
I was looking for a simple way to style forms client side with tailwindcss and found the following solution.
Using css loading states and the css selector has you can do the following:
<.form ... class="group">
<div class="bg-green-100 group-has-[.phx-submit-loading]:bg-orange-100" />
</.form>
Just sharing it here in case anyone else is looking for a similar solution.
Where Next?
Trending in Discussions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Supporting innovation across the BEAM ecosystem.
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
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #blog-post
- #ai
- #phoenix_html
- #iex
- #elixirconf-us
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Build Elixir applications with speed and confidence.
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.
Bringing learning, work and compliance together since 1987.
Enabling companies to succeed by building software people love.
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 1- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
sodapopcan
I was harping on this in another thread but there is a lot of conditional rendering you can do in CSS these days (for several years at this point) that removes the need for JS or server-side logic (in the case of LiveView) and even state!
If you’re a Tailwind user, you’d do well to read this whole section. It has a very useful appendix.
If you prefer blogs, there is a short intro-type post to this idea here. It’s a Rails blog but the examples are pretty easy to understand if you don’t know Rails. It also uses Tailwind.