Open In App

Tailwind CSS Appearance

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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 appearance class



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads