Appearance In Tailwind CSS
The goal of this article is to provide an overview of Tailwind Appearance class and illustrate how it can be used in web design.
Tailwind Appearance
A browser’s default behavior can be reset using this class.
HTML elements, by default, have their own styling that can be challenging to modify. With the appearance-none class, developers can remove this default styling, creating a custom look and feel of their webpage.
Other Tailwind classes can then be used to style the element.
Syntax:
<element class="class="appearance-none"">...</element>
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold m-2">
MrExamples
</h1>
<p class="m-2 font-semibold">Appearance Class in Tailwind CSS</p>
<div class="bg-gray-300 mx-24 my-2 p-4 justify-between grid grid-flow-row shadow-md rounded-md">
<div class="my-2">
<label>Select field without class</label>
<select class="bg-gray-100 px-1 py-1 text-center appearance-auto cursor-pointer">
<option selected hidden>Without class</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="my-2">
<label>Select field with "appearance-none"</label>
<select class="bg-gray-100 px-2 py-1 text-center appearance-none cursor-pointer">
<option selected hidden>With class</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
</body>
</html>
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
