Styling a form with tailwindcss and css loading classes

Phoenix Forum Chat / Discussions
,
1

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.

3 Likes
2

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.