Alpine.js + TailwindCSS Demo Edition
.@tailwindcss was a big game changer for me the last year or two, but @Alpine_JS is quickly becoming another game changer. It makes simple, pesky stuff so quick and easy.
This email is supported by Codecourse. Practical screencasts for developers (including Alpine.js!).
Made with Alpine.js
- petfriendlydirect.com by @alexpgates is built with Alpine.js
- katyrosefloral.com by @WyattCastaned44 is built with Alpine.js
Demos, big thanks to @kevinbatdorf for contributing the demos this week (and in previous issues):
- A little demo showing how you can monitor sibling and child components by @kevinbatdorf
- Quick and easy flyout side panel with Alpine.js and TailwindCSS by @kevinbatdorf
- Quotes Slideshow, WCAG accessible, includes an animated autoplay timer, built with Alpine.js and TailwindCSS by @kevinbatdorf
- A little (fake) News Ticker with Alpine.js and TailwindCSS by @kevinbatdorf
Articles & Tutorials
Integrating Phoenix LiveView with JavaScript and AlpineJS by @pthompson
Instantsearch with TNTSearch and Alpine.js by @teamcodecourse
Alpine.js `x-for` a number of iterations (n times) by @hugo__df
I Wrote the Same App in Pascal and AlpineJS by Michael Krasnov (resurfaced by @gauravssnl)
If you enjoy the newsletter and posts like these you can join my GitHub Sponsors, github.com/sponsors/HugoDF/, you support the newsletter & get early access to Alpine.js content.
Code & Tools
github.com/MZanggl/promistate - Promise management for UI libraries by @dev_michaelz has Alpine.js examples
An Alpine.js plugin that lets you react to updates on sibling and parent components github.com/KevinBatdorf/alpine-observe-other-components by @kevinbatdorf
github.com/eastslopestudio/eleventy-starter by @ryanscherler/@eastslopestudio (discovered by @rthaut)
github.com/jbroadway/wires now support Alpine.js (discovered by @call_user_func)
“How to access a property or a method of alpine.js parent component from a child component?” Seems to be a recurring @Alpine_JS question stackoverflow.com/a/62613547/549… by @hugo__df
github.com/lukeraymonddowning/alpinimations is a Laravel package to clean up your TailwindCSS UI animations by wrapping them in Blade directives by @LukeDowning19
There are some interesting issues on GitHub so do check them out if you’re having problems with the latest releases.
Til’ next week.