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=""></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.

        scrolledFromTop: false
  x-init="window.pageYOffset >= 50 ? scrolledFromTop = true : scrolledFromTop = false"
  @scroll.window="window.pageYOffset >= 50 ? scrolledFromTop = true : scrolledFromTop = false"

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.