Tailwind CSS Appearance

Last Updated : 23 Mar, 2022

This class is used for suppressing native form control styling, to reset any browser-specific styling on an element. This utility is often used when creating custom form components.

Appearance:

appearance-none: This class is used to reset the natural behavior of any browser.

Syntax:

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

Example:

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link href= 
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
    rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold"> 
       GeeksforGeeks 
    </h1> 
    <b>Tailwind CSS Appearance Class</b> 
    <div class="bg-green-300 
                mx-24
                p-4
                justify-between 
                grid grid-flow-col"> 
        <select>
            <option>HTML</option>
            <option>CSS</option>
            <option>JavaScript</option>
        </select>

        <select class="appearance-none">
            <option>Reactjs</option>
            <option>Tailwind</option>
            <option>Framer Motion</option>
        </select>
    </div> 
</body> 
</html>

Output:

Tailwind CSS Cursor

skyridetim

Improve

Article Tags :

Tailwind CSS Appearance

Similar Reads

Tailwind CSS Layout

Tailwind CSS Flexbox

Tailwind CSS Grid

Tailwind CSS Alignment

Tailwind CSS Spacing

Tailwind CSS Sizing

Tailwind CSS Typography

Tailwind CSS Backgrounds

Thank You!

What kind of Experience do you want to share?