tailwindcss/docs/source/docs/forms.blade.md

extends	title	description	features
_layouts.documentation	Forms	Utilities for styling form controls.	responsive customizable hover focus true false false false

@include('_partials.work-in-progress')

@include('_partials.class-table', [ 'rows' => [ [ '.appearance-none', 'appearance: none;', "Remove any special styling applied to an element by the browser.", ], ] ])

Custom Select

Form controls are great candidates for component classes, but just for fun, here's how you can build a fully custom select menu with just utility classes:

@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])

Really long option that will likely overlap the chevron Option 2 Option 3

@endcomponent

Customizing

Responsive, Hover, and Focus Variants

By default, no hover, focus, or group-hover variants are generated for form control appearance utilities.

You can control which variants are generated for form control appearance utilities by modifying the appearance property in the modules section of your Tailwind config file.

For example, this config will also generate hover and focus variants:

{
    // ...
    modules: {
        // ...
        appearance: ['responsive', 'hover', 'focus'],
    }
}

Disabling

If you aren't using the form control appearance utilities in your project, you can disable them entirely by setting the appearance property to false in the modules section of your config file:

{
    // ...
    modules: {
        // ...
        appearance: false,
    }
}