使用实用类进行样式设置

使用任意值

当你需要在主题之外使用一次性值时，使用特殊的方括号语法来指定任意值

<button class="bg-[#316ff6] ...">Sign in with Facebook</button>

当你需要使用 CSS 功能时候，如 calc()

<div class="max-h-[calc(100dvh-(--spacing(6))]">
    <!-- ... -->
</div>

甚至还有一种语法可以完全生成任意的 css，包括任意属性名称，这对于设置 css 变量很有用。

<div class="[--gutter-width:1rem] lg:[--gutter-width:2rem]">
    <!-- ... -->
</div>

复杂选择器

例如在夜间模式、特定断点处、悬停时候以及当元素具有特定属性时候

<button class="dark:lg:data-current:hover:bg-indigo-600 ...">
    <!-- ... -->
</button>

还支持group-hover之类的功能，当鼠标悬停在特定父元素上时

<a href="#" class="group rounded-lg p-8">
    <!-- ... -->
    <span class="group-hover:underline">Read more…</span>
</a>

@media (hover: hover) {
    a:hover span {
        text-decoration-line: underline;
    }
}

此group-*语法也适于其他变体，如 group-focus，group-active 等

对于非常复杂的场景（尤其是在设计你无法控制的 HTML 样式时），Tailwind 支持任意变体，它允许你直接在类名中编写任何你想要的选择器：

<div class="[&>[data-active]+span]:text-blue-600 ...">
    <span data-active><!-- ... --></span>
    <span>This text will be blue</span>
</div>

div > [data-active] + span {
    color: var(--color-blue-600);
}

管理重复

<div>
    <div class="flex items-center space-x-2 text-base">
        <h4 class="font-semibold text-slate-900">Contributors</h4>
        <span class="bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700 ...">204</span>
    </div>
    <div class="mt-3 flex -space-x-2 overflow-hidden">
        <img
            class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
            src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
            alt=""
        />
        <img
            class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
            src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
            alt=""
        />
        <img
            class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
            src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
            alt=""
        />
        <img
            class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
            alt=""
        />
        <img
            class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
            src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
            alt=""
        />
    </div>
    <div class="mt-3 text-sm font-medium">
        <a href="#" class="text-blue-500">+ 198 others</a>
    </div>
</div>

<div>
    <div class="flex items-center space-x-2 text-base">
        <h4 class="font-semibold text-slate-900">Contributors</h4>
        <span class="bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700 ...">204</span>
    </div>
    <div class="mt-3 flex -space-x-2 overflow-hidden">
        {#each contributors as user}
        <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="{user.avatarUrl}" alt="{user.handle}" />
        {/each}
    </div>
    <div class="mt-3 text-sm font-medium">
        <a href="#" class="text-blue-500">+ 198 others</a>
    </div>
</div>

使用自定义 CSS

<button class="btn-primary">Save changes</button>

@import "tailwindcss";
@layer components {
    .btn-primary {
        border-radius: calc(infinity * 1px);
        background-color: var(--color-violet-500);
        padding-inline: --spacing(5);
        padding-block: --spacing(2);
        font-weight: var(--font-weight-semibold);
        color: var(--color-white);
        box-shadow: var(--shadow-md);
        &:hover {
            @media (hover: hover) {
                background-color: var(--color-violet-700);
            }
        }
    }
}

使用 important 修饰符

当你确实需要强制特定工具类生效并且没有其他方法来管理特异性时，你可以在类名末尾添加 ! 以使所有声明都成为 !important：

<div class="bg-teal-500 bg-red-500!">
    <!-- ... -->
</div>

.bg-red-500\! {
  background-color: var(--color-red-500) !important;
}
.bg-teal-500 {
  background-color: var(--color-teal-500);

使用前缀选项

如果你的项目有与 Tailwind CSS 工具冲突的类名，你可以使用 prefix 选项将所有 Tailwind 生成的类型和 CSS 变量添加前缀

@import "tailwindcss" prefix(tw);

// Compiled CSS
@layer theme {
    :root {
        --tw-color-red-500: oklch(0.637 0.237 25.331);
    }
}
@layer utilities {
    .tw\:text-red-500 {
        color: var(--tw-color-red-500);
    }
}