Adding functionality with Alpine.js

Alpine.js Configuration

A few TailGrids UI Components require JS for interactivity. As Tailwind CSS prefers and loves AlpineJS, we used AlpineJS for interactivity like Carousel, Popup, dropdown, etc.

If a component requires AlpineJS you have to just link up the AlpineJS script at the head tag. We also added a notice on the individual components page as notice.

Here is the CDN link, add this to the head tag:

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

If you want you can host and load AlpineJS locally.

If you want to make the navbar sticky you have to add a few JS code and conditional CSS classes. Since we already created those classes you can just copy-paste them depending on your need.

Add this code snippet to your body tag to make the navbar sticky.

<body
  x-data="
      {
        scrolledFromTop: false
      }
    "
  x-init="window.pageYOffset >= 50 ? scrolledFromTop = true : scrolledFromTop = false"
  @scroll.window="window.pageYOffset >= 50 ? scrolledFromTop = true : scrolledFromTop = false"
>
  ....
</body>

By default, the header tag is set to position absolute. You have to remove the absolute class and add the code below.

:class="scrolledfromtop ? 'fixed z-50 bg-white bg-opacity-80 shadow-sm
backdrop-blur-sm' : 'absolute' " ;

Note: You can change the bg-color or any other classes if needed.

Alpine.js Configuration

Sticky Navbar