Tailwind CSS - 外观

Tailwind CSS 外观 提供了预定义的类，用于控制各种元素(例如输入字段、按钮等)的样式，允许您修改它们的外观。

Tailwind CSS appearance 外观类

以下是 Tailwind CSSappearance 外观类的列表，这些类提供了更改元素样式的选项。

Tailwind CSS 外观类的功能

• appearance-none:此类移除默认浏览器样式，允许自定义设计。
• appearance-auto:此类将元素恢复为默认浏览器样式。

Tailwind CSS 外观类示例

以下是 Tailwind CSS 外观类的示例，展示了如何调整和控制元素的样式。

设置复选框外观样式

此示例展示了如何使用 Tailwind CSS 外观类来设置复选框的样式。第一个示例展示了默认复选框外观，而第二个示例则展示了一个自定义样式的复选框，并使用 Tailwind CSS 类进行了定制设计。

示例

<!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>

改进文件输入外观

此示例展示了如何使用 Tailwind CSS 外观类来设置文件输入的样式，方法是移除默认浏览器设计并应用自定义样式。

示例

<!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>

应用自动和自定义外观

此示例展示了 appearance-auto 如何将默认浏览器样式应用于范围输入，而 appearance-none 如何从范围输入中删除这些样式以实现自定义设计。

示例

<!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>