Tailwind CSS: How to style the Select element

Last updated on June 27, 2022 Pennywise Loading... Post a comment

In Tailwind CSS, you can style a <select> element in a nice way by making use of the official plugin called @tailwindcss/forms. To install the plugin, run the following command in the root directory of your project:

npm i @tailwindcss/forms -D

Next, open your tailwind.config.js file, and then require the plugin in the plugins section:

plugins: [
    // add this line
    require('@tailwindcss/forms'),
],

Now we’re ready to go.

Example

Screenshot:

The code:

<body class="p-20">
    <form class="space-y-10">
        <div class="flex flex-col space-y-2">
            <label for="country">Which country has the largest population in the world?</label>
            <select name="country"
                class="border-0 cursor-pointer rounded-full drop-shadow-md bg-sky-200 w-72 duration-300 hover:bg-sky-400 focus:bg-amber-300">
                <option>United States</option>
                <option>India</option>
                <option>Brazil</option>
                <option>Indonesia</option>
                <option>Japan</option>
                <option>China</option>
            </select>
        </div>

        <div class="flex flex-col space-y-2">
            <label for="something">Select Group Example</label>
            <select name="something"
                class="w-96 rounded-md drop-shadow-md bg-green-500 duration-300 hover:bg-green-600 focus:bg-green-600 focus:ring-0 text-white">
                <optgroup label="Group A">
                    <option>Option A1</option>
                    <option>Option A2</option>
                    <option>Option A3</option>
                    <option>Option A4</option>
                </optgroup>
                <optgroup label="Group B">
                    <option>Option B1</option>
                    <option>Option B2</option>
                    <option>Option B3</option>
                    <option>Option B4</option>
                </optgroup>
                <optgroup label="Group C">
                    <option>Option C1</option>
                    <option>Option C2</option>
                    <option>Option C3</option>
                    <option>Option C4</option>
                </optgroup>
            </select>
        </div>
    </form>
</body>

That’s it. Further reading:

You can also check out our CSS category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You May Also Like