Introduction

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 achieve sticky navbar on your site you have to add a few JS code and conditional CSS classes. Since we already created these classes you no need to worry. Just copy-paste depending on your needs.

At the beginning body tag you have to add these codes for setting up the sticky navbar.

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

and for header tag by default, we used 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.

Adding functionality with Alpine.js

Alpine.js Configuration

Sticky Navbar