tcoopman
Styling a form with tailwindcss and css loading classes
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.
First Post!
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.
Popular in Discussions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Practical resources that improve the lives of professional developers.
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
- #javascript
- #code-sync
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
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.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"