Tailwind CSS Appearance

Read

Discuss

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>  