Tailwind CSS Appearance

The appearance utility in Tailwind CSS is used to control the native appearance of form elements, such as select menus, checkboxes, and input fields. It allows you to remove browser-specific default styling and apply custom styles to form controls. Tailwind CSS provides the following appearance utilities:

appearance-none: Removes the browser's default appearance from an element.
appearance-auto: Restores the browser's default appearance of an element.

Syntax

<element class="appearance-none">...</element>

Example: The following example demonstrates the difference between the default appearance of a select element and one using the appearance-none utility.

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Appearance Class</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="bg-gray-100 p-8 text-center">
    <h1 class="mb-4 text-4xl font-bold text-green-700">
        GeeksforGeeks
    </h1>
    <h2 class="mb-6 text-xl font-semibold">
        Tailwind CSS Appearance Class
    </h2>
    <div class="mx-auto grid max-w-xl grid-cols-1 gap-6 rounded-lg bg-green-200 p-6 sm:grid-cols-2">
        <div>
            <p class="mb-3 font-medium">Default Appearance</p>
            <select class="w-full rounded-md border border-gray-400 bg-white p-3">
                <option>HTML</option>
                <option>CSS</option>
                <option>JavaScript</option>
            </select>
        </div>
        <div>
            <p class="mb-3 font-medium">Appearance None</p>
            <select class="w-full appearance-none rounded-md border-2 border-green-700 bg-white p-3">
                <option>React</option>
                <option>Tailwind CSS</option>
                <option>JavaScript</option>
            </select>
        </div>
    </div>
</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Output: The first select element uses the browser's default appearance. The second uses appearance-none, which removes its native styling while retaining the custom background, padding, and border applied through Tailwind CSS.

Syntax

Explore