Using x-transition to Support CSS Transition
We often use x-show to control the element to show or hide. With x-transition we can apply the visual effect for x-show.
タグ : Alpine
Using x-bind for Class Binding
Alpine supports both String and Object for Class Binding. We can choose either one for our preference.
Creating Responsive Fixed Navbar
Responsive Navbar is the essential component in every modern Web design. This can be done by only Alpine and TailwindCSS without any package.
Detecting Scrolling Direction
We don’t have scrollUp or scrollDown to detect scrolling detection in Alpine, but we can implement it with only 2 lines of JavaScript.
Creating Responsive Auto-hidden Navbar
Responsive auto-hidden Navbar is the essential component in every modern Web design. This can be done by only Alpine and TailwindCSS without any package.
Integrating TEAstack with 11ty
11ty is great for JAMstack, but we have to use vanilla JavaScript and CSS to create templates. With Alpine and TailwindCSS, we can create templates by declarative style directly in HTML, and we can finally use HTMLMinifier to optimize our HTML under production mode.
Integrating Alpine with 11ty
Alpine is great for JAMstack, but we have to integrate Alpine with 11ty manually.