apply margin to a modal in tailwindcss

user_17797290 0
Viewed 213

I'm starting a frontend mentor free project and start having some troubles trying to give margin to a menu modal using tailwindcss.

I'm not using any framework, just pure html, css, js vanilla and tailwind cli.

I've setted width: 100% and it's position: absolute, but when i try to apply right and left margins, only left margin its applied.

here's a snippet of the code (i've remove the svg code for better reading)

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

I think is better not attach the css code because its tailwind generated and its quite verbose.

but here is a screenshot of how it is

and the here the desired outcome

tailwind-css css html
1 Answers

Well, both margins are applied, but since the width is set to 100%, your module is pushed to right and out of the viewport by the left margin. to reach your desired outcome, you should wrap your nav element in a div, give the div an absolute position and a width: 100%, and use px-5 for div and remove nav mx-5; Here is the modified code:

<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>
user_158780960
Related