Anyone not using Tailwind in a Phoenix project?

Even better - do it semantically instead of classes:

<div>
  <input aria-invalid={error} />
  <div class="error">You have an error</div>
</div>

And in CSS:

.error { display: hidden }

input:invalid {
  background: red;
  & + .error, &[aria-invalid] + .error { display: block }
}
10 Likes