tailwind-css

tailwind postion element at bottom of screen with margins

I am trying to place a div at the bottom right corner of my screen with margin of 10px right, 10px bottom.

I tried the div code below. It does place the div at bottom right of screen but does not allow me to add margin to it.

I also want to to keep the div at the bottom right. i.e if its a long page and the user scrolls to the bottom of page, it will always remain fixed at the bottom right.

<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Position Class</b>
    <div class="static text-left p-2 m-2 bg-green-200 h-48">
        <p class="font-bold">Static parent</p>


        <div class="absolute bottom-0 right-0 p-2  mb-10
                    bg-green-500">

            <p>Absolute child</p>

        </div>
    </div>
</center>

UPDATE;

I tried following the advice of @justanotherpeter but it does not work. The div rides up to the top of the screen.

enter image description here

Below is the full code for the above image.

<!DOCTYPE html>
<head>
    <link href=
              "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>

<body class="text-center">
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Position Class</b>
    <div class="static text-left p-2 m-2 bg-green-200 h-[200vh]">
        <p class="font-bold">Static parent</p>
        <div class="absolute bottom-0 left-0 p-2 bg-green-500">
            <p>Absolute child</p>
        </div>
    </div>
    <div class="fixed bottom-[10px] right-[10px] p-2 bg-green-500">
        <p>Fixed positioned div</p>
    </div>
</center>

</body>

</html>
Solution

  • The problem happens because your code is using custom style and this code use generated styles from <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">. You can follow two ways.

    Use only the tailwind classes without custom styles as example code bellow. Or choose a way to install the Tailwind for your project follow the documentation.

    <!DOCTYPE html>
<head>
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>

<body class="text-center">
  <h1 class="text-green-600 text-5xl font-bold">
      GeeksforGeeks
  </h1>
  <b>Tailwind CSS Position Class</b>
  <div class="static text-left p-2 m-2 bg-green-200 h-screen">
      <p class="font-bold">Static parent</p>
      <div class="absolute bottom-0 left-0 p-2 bg-green-500">
          <p>Absolute child</p>
      </div>
  </div>
   <div class="fixed bottom-0 right-0 p-2 bg-green-500">
      <p>Fixed positioned div</p>
  </div>
</body>

</html>