自定义样式

使用任意值

虽然您通常可以使用一组受约束的设计标记来构建大量精心制作的设计，但偶尔您需要打破这些约束以获得完美的效果。
可以使用 Tailwind 的方括号表示法动态生成具有任意值的类：

<div class="bg-orange-500 overflow-hidden">
    <div class="mt-[117px]">
        demo...
    </div>
    <div class="bg-[#bada55] text-[22px] before:content-['Festivus']">
        ...
    </div>
</div>

解决歧义

Tailwind中的许多实用程序共享一个公共名称空间，但映射到不同的CSS属性。例如，text-lg和text-black都共享 text- 名称空间，但一个用于字体大小，另一个用于颜色。
使用任意值时，Tailwind 通常可以根据传入的值自动处理这种模糊性：

<div class="bg-orange-500 overflow-hidden">
    <!-- Will generate a font-size utility -->
    <div class="text-[22px]">...</div>
    <!-- Will generate a color utility -->
    <div class="text-[#bada55]">...</div>
</div>

使用 CSS 和 @layer

当您需要向Tailwind 项目添加自定义的 CSS 规则时，最简单的方法就是将自定义 CSS 添加到样式表中 ：

@tailwind base;
@tailwind components;
@tailwind utilities;

.width50{width:50%;}
.width100{width:100%;}

此种方式不支持断点，常用语不需要进行断点适配的样式定义。

使用 @layer utilities 自定义需要断点适配的样式

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities{
    .width50{width:50%;}
    .width100{width:100%;}
}

html 中使用自定义样式

<div class="bg-orange-500 width100 md:width50 overflow-hidden">
    ...
</div>