appearance utilities table
Tailwind v4 provides two `appearance` utilities: `appearance-none` maps to `appearance: none;` and `appearance-auto` maps to `appearance: auto;`.
Tailwind CSS v4 · all subjects
utilities/appearance
5 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
appearance-none usage
Use `appearance-none` to reset any browser-specific styling on a form element (e.g. a `<select>`), which is often used when creating custom form components. Typically combined with an absolutely/grid-positioned custom icon (e.g. an SVG arrow) to replicate the native control's appearance.
appearance-auto usage
Use `appearance-auto` to restore the default browser-specific styling on an element. This is useful for reverting to standard browser controls in certain accessibility modes, such as combining `appearance-none` with the `forced-colors:appearance-auto` variant so that in forced-colors mode (e.g. Windows High Contrast), the native control style is restored instead of the custom one.
appearance responsive design
Utilities like `appearance-none` and `appearance-auto` can be applied conditionally at different breakpoints by prefixing the class with a breakpoint variant, e.g. `md:appearance-none`, following Tailwind's standard responsive design pattern. The default class before any breakpoint override is `appearance-auto` and the featured example class is `appearance-none`.
Native form control styling in v3.0
Tailwind CSS v3.0 added support for the accent-color property to style checkboxes and radio buttons, and file pseudo-element modifiers with syntax like file:mr-4, file:rounded-full, file:border-0, file:bg-violet-50, file:px-4, file:py-2, file:text-sm, file:font-semibold, file:text-violet-700, and hover:file:bg-violet-100 for styling file input buttons.