Styling inputs depending on state

Tailwind CSS offers variants for styling input fields based on their state, directly mapping to standard CSS pseudo-classes:

• invalid:
• valid:
• in-range:
• out-of-range:
• required:
• placeholder-shown:
• indeterminate:

Example

<select id="amount"
        name="amount"
        class="form-select invalid:ring-2 invalid:ring-red-500"
        form="my_form"
        required
>
    <option value="">
        <?= $escaper->escapeHtml(__('Choose an Amount...')) ?>
    </option>
</select>

To prevent invalid styles from applying to empty elements, JavaScript is required.