Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Appearance

Quiz

Tailwind CSS Appearance provides predefined classes that control the styling of various elements, such as input fields, buttons, and more, allowing you to modify their appearance.

Tailwind CSS Appearance Classes

Below is a list of Tailwind CSS Appearance classes that provide options to change the styling of elements.

Class	CSS Properties
appearance-none	appearance: none;
appearance-auto	appearance: auto;

Functionality of Tailwind CSS Appearance Classes

appearance-none: This class removes default browser styling, allowing for custom designs.
appearance-auto: This class restores the element to the default browser styling.

Tailwind CSS Appearance Class Examples

Below are examples of Tailwind CSS Appearance classes, which show how to adjust and control the styling of elements.

Styling Checkbox Appearance

This example shows how to use Tailwind CSS Appearance classes to style checkboxes. The first example shows the default checkbox appearance, while the second example features a custom-styled checkbox with a tailored design using Tailwind CSS classes.

Example

  
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Appearance
    </h2>
    <h3 class="font-bold mb-4">
        Default Checkbox Appearance
    </h3>
    <label class="block mb-4">
        <input type="checkbox" class="form-checkbox">
        <span class="ml-2">Default Checkbox</span>
    </label>
    <h3 class="font-bold mb-4">
        Custom Checkbox Appearance
    </h3>
    <label class="block mb-4 flex">
        <input type="checkbox" class="appearance-none border-2 
            border-teal-600 checked:bg-blue-500 w-6 h-6">
        <span class="ml-2">Custom Checkbox</span>
    </label>
</body>

</html>

Improving File Input Appearance

This example shows how Tailwind CSS Appearance classes can be used to style file inputs by removing the default browser design and applying custom styles.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Appearance Class 
    </h2>
    <h3 class="font-bold mb-4">
        Default File Input Appearance
    </h3>
    <label class="block mb-4">
        <input type="file" class="form-file"> 
    </label>
    <h3 class="font-bold mb-4">
        Custom File Input Appearance
    </h3>
    <label class="block mb-4"> 
        <input type="file" class="appearance-none 
            border-2 border-teal-600 p-2"> 
    </label>
</body>

</html>

Applying Auto and Custom Appearances

This example shows how appearance-auto applies default browser styles to a range input, while appearance-none removes these styles from the range input for custom design.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Appearance 
    </h2>
    <h3 class="font-bold mb-4">
        Auto Appearance Range Input
    </h3>
    <label class="block mb-4">
        <input type="range" 
            class="appearance-auto w-full">
    </label>    
    <h3 class="font-bold mb-4">
        Custom Range Input Appearance
    </h3>
    <label class="block mb-4">
        <input type="range" class="appearance-none 
            bg-gray-300 accent-teal-500 w-full">
    </label>
</body>

</html>

Print Page