如何在Tailwind中使用margin: y x;简写语法及实现calc相关样式？

一、实现你需要的CSS样式 #

你要的这段CSS：

.element {
    width: 100vw;
    max-width: 100vw;
    margin: 0 calc(-50vw + 50%);
}

用Tailwind工具类可以直接这么写：

<div class="w-[100vw] max-w-[100vw] my-0 mx-[calc(-50vw+50%)]"></div>

• w-[100vw] 对应 width: 100vw
• max-w-[100vw] 对应 max-width: 100vw
• my-0 对应上下margin为0（y轴方向）
• mx-[calc(-50vw+50%)] 对应左右margin设为calc(-50vw + 50%)（x轴方向）

二、Tailwind中margin的y/x简写语法 #

Tailwind针对margin提供了一套简洁的方向简写：

• m-<值>：同时设置四个方向的margin
• my-<值>：只设置上下（y轴）的margin
• mx-<值>：只设置左右（x轴）的margin
• 单独方向：mt-<值>（上）、mb-<值>（下）、ml-<值>（左）、mr-<值>（右）

这里的<值>可以是Tailwind内置的间距值（比如my-4对应上下margin 1rem），也可以像你那样用自定义的calc表达式（比如mx-[calc(20px-1rem)]）。举个常见例子：my-2 mx-auto 就是上下margin 0.5rem，左右自动居中。

内容的提问来源于stack exchange，提问作者hendy0817