can I use top and calc within Tailwind CSS 3.0

So I am trying to use calc wit the top in tailwind. I know this works fine

<div className="w-60 h-[calc(100vh-5rem)]">Sidebar</div>

however I can't seem to get something that is absoluet to drop with it like such

<div className="w-60 absolute top-[calc(100%-5rem)]">Sidebar</div>

I can't seem to find any evidence whether or not it works or does not work besides trying it. Is there another tailwind class I need to include besides the basic ones??

Edited by me 8:32pm Eastern time this top-calc not working on data-shop-area

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/site.css" />
    <link rel="stylesheet" href="./css/notailwind.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="./js/site.js" defer></script>

    <title>Al's Tailwind Css Boiler Plate</title>
  </head>

  <body class="m-0">
    <header id="top" class="mt-0">
      <section class="fixed top-0 flex w-full items-center justify-between gap-2 bg-black px-5 py-2 duration-700" data-main id="main-nav">
        <div id="brand-logo">
          <a href="#top"> <img class="w-28 rounded-full" src="https://assets.bigcartel.com/theme_images/95510953/3332963E-85A8-4A3F-9A8A-7EAD04CA73C5.jpeg" alt="Wolf Logo" /></a>
        </div>

        <div class="mr-4 flex items-center gap-2">
          <div class="md:block" id="cart-div">
            <div class="relative hidden md:block">
              <a data-shop-btn class="block" id="sc" href="#">
                <i class="fa-solid fa-shopping-cart px-6"></i>
              </a>
              <div data-shop-tri class="absolute top-full" id="triangle"></div>
              <div data-shop-area class="top-[calc(100% - 20px)] absolute right-3 w-96 rounded-sm bg-white py-4 text-center text-black shadow-md">
                <div class="my-6 text-xl">Your bag is empty</div>
                <a class="my-6 rounded-md bg-black p-2 text-white" href="#">Start shopping</a>
              </div>
            </div>
          </div>

          <div class="block pr-3 text-5xl text-white md:hidden" data-ham-btn id="ham-btn">
            <i data-i class="fa-solid fa-bars"></i>
          </div>
          <nav data-main-nav class="hidden gap-3 md:flex">
            <a href="./index.html#eat">Eat Those </a>
            <a href="./index.html#products">Products</a>
            <a href="./index.html#contact">Contact</a>
          </nav>
        </div>
      </section>

      <section class="fixed top-32 hidden h-full w-full bg-black pt-10 md:hidden" data-mobile-nav id="mobile-nav">
        <nav class="mx-auto flex w-2/3 flex-col gap-2 px-3 text-center md:hidden">
          <a href="./index.html#eat">Eat Those </a>
          <a href="./index.html#products">Products</a>
          <a href="./index.html#contact">Contact</a>
        </nav>
      </section>
    </header>

    <main>
      <section data-item-num>
        <div class="mx-auto grid h-screen w-10/12 items-center justify-items-center gap-0 md:grid-cols-2" id="card">
          <div id="card-image">
            <img class="w-full overflow-hidden object-contain" src="./images/blacktbiglogo.png" alt="Black T-shirt Big Logo" />
          </div>
          <div class="grid gap-5 text-center" id="card-info">
            <a href="#">
              <p class="text-base md:text-3xl">Black Wolf T-Shirt Big Logo</p>
            </a>
            <p class="text-base text-red-600">$25.00 - $30.00</p>
            <form class="grid justify-items-center gap-1" action="post">
              <select class="w-1/2 rounded-sm border border-black p-3 text-center" name="size" id="size">
                <option value="" selected disabled>Choose Size</option>
                <option value="small">Small</option>
                <option value="medium">Medium</option>
                <option value="large">Large</option>
                <option value="x-large">X-Large</option>
                <option value="xx-large">XX-Large</option></select
              ><br />
              <button class="w-1/2 rounded-sm bg-black p-3 text-center text-base text-white duration-500 hover:bg-slate-700 md:text-lg" type="submit">Add To Bag - $30.00</button>
            </form>

            <p>Unisex Black T-shirt, 100% Cotton, with the big white wolf logo on the front center.</p>
          </div>
        </div>
      </section>
    </main>
    <div id="mobile-shopping-cart" class="shoppin-cart md:hidden">
      <a href="#shopping">
        <i class="fa-solid fa-shopping-cart fixed bottom-0 w-full bg-slate-800 p-2 text-center text-white hover:bg-slate-600"></i>
      </a>
    </div>
    <footer class="z-50 mx-0 flex min-h-full min-w-full flex-col justify-center bg-black p-4 text-center text-white md:mt-4 md:bg-gray-300 md:text-black">
      <p class="p-3 text-xl">
        Reach out on these platforms as well:

        <a href="#"><i class="fa-brands fa-facebook"></i></a>
        <a href="#"><i class="fa-brands fa-twitter"></i></a>
        <a href="#"><i class="fa-brands fa-instagram"></i></a>
        <a href="#"><i class="fa-brands fa-tiktok"></i></a>
      </p>
      <br />
      <p>Powered by Big Cartel</p>
    </footer>
  </body>
</html>

you can see th link here tailwind play

Solution

You should attach a larger part of the code, this will make the answer easier Until then...

You must ensure that you are using the correct version of Tailwind And make sure that the parent of the element using Position Absolute has a specified length

Here is the code that does what you want and attached a picture of the results ..

<div class="relative h-80 overflow-hidden bg-red-500">
 <div class="w-80 bg-blue-400 absolute top-[calc(100%-50px)]">Sidebar</div>
</div>