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.
Sticky Navbar
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.