Alpine.js Weekly logo

Alpine.js Weekly

Subscribe
Archives
July 3, 2020

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.

@galengidman

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.

Don't miss what's next. Subscribe to Alpine.js Weekly:
Powered by Buttondown, the easiest way to start and grow your newsletter.