Tailwind CSS Appearance
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
Please Login to comment...