Validation with Tailwind Classes

[vhscom]

Just trying out this form library for the first time with SvelteKit. So far so good. I wanted to share a pattern for adding an invalid field state using Tailwind classes for anyone looking:

Use @apply directive to create a custom utility such as validated:

@layer utilities {
  .validated.invalid {
    @apply bg-red-50 border border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500 dark:bg-red-100 dark:border-red-400;
  }
}

Add the validated class to your markup so Tailwind picks it up during stylesheet generation:

<div class="flex flex-col">
  <input
    class="rounded validated"
    type="text"
    name="secret"
    bind:value={$secret.value}
    autocomplete="false"
    spellcheck="false"
    use:style={{ field: secret }}
  />
  {#if !$secret.valid}
    <div class="text-sm mt-1">A secret is required.</div>
  {/if}
</div>

Above leverages use:style and the required validator for add visual and non-visual queues something is wrong when the field is in an invalid state.