将边距应用于tailwindcss中的模态答案

【问题标题】：apply margin to a modal in tailwindcss将边距应用于tailwindcss中的模态
【发布时间】：2022-01-04 14:32:38
【问题描述】：

我正在启动一个前端导师免费项目，并开始遇到一些麻烦，尝试使用 tailwindcss 为菜单模式留出余量。

我没有使用任何框架，只是纯 html、css、js vanilla 和 tailwind cli。

我设置了width: 100%，它是position: absolute，但是当我尝试应用左右边距时，只应用了左边距。

这是代码的 sn-p（为了更好地阅读，我删除了 svg 代码）

HTML

<body class="h-screen w-screen">
    <header class="w-screen fixed z-10 flex justify-between pt-4 px-5">
      <div class="logo">
        <svg >
        </svg>
      </div>
      <i class="menu-icon cursor-pointer">
        <svg>
        </svg>
      </i>
      <nav
        class="
          show
          flex flex-col
          items-center
          justify-center
          w-full
          py-7
          mx-5
          bg-white
          absolute
          top-0
          left-0
          gap-4
          rounded
        "
        id="menu"
      >

我认为最好不要附加 css 代码，因为它会产生顺风而且非常冗长。

但这里有一个screenshot 说明

这里是desired outcome

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

好吧，两个边距都被应用了，但是由于宽度设置为 100%，你的模块被推到右边并被左边距推到视口之外。为了达到你想要的结果，你应该把你的 nav 元素包裹在一个 div 中，给 div 一个绝对位置和一个宽度：100%，并使用 px-5 作为 div 并删除 nav mx-5；这是修改后的代码：

<body class="h-screen w-screen">
    <header class="w-screen fixed z-10 flex justify-between pt-4 px-5">
      <div class="logo">
        <svg >
        </svg>
      </div>
      <i class="menu-icon cursor-pointer">
        <svg>
        </svg>
      </i>
      <div class=""show absolute top-0 left-0 w-full px-5>
        <nav
          class="
            show
            flex flex-col
            items-center
            justify-center
            w-full
            py-7
            bg-white
            gap-4
            rounded
          "
          id="menu"
        >
          <!-- nav content -->
        </nav>
      </div>

【讨论】：