Do tools like Alpine.js & Tailwind make writing HTML fun?
If you told me 5 years ago that my favourite part of coding today was writing HTML I'd call you crazy.
But, MY WORD, coding in Blade with Alpine and Tailwind backing it is SUCH a nice experience
— Liam Hammett (@LiamHammett) September 16, 2020
Support the newsletter by becoming a GitHub Sponsor.
Tips
first time using Alpine.js
so far, combine with TailwindCSS is the duo minimalist which is perfect for my needs
— Tony S. (@sanjayatony) September 17, 2020
LOL! I just opened twitter to say something similar. I don't consider myself a front-end expert, so it's always a little rough when working with that end of things. But, I just spent the morning with @laravelphp blade, @Alpine_JS, and @tailwindcss....and it's been fantastic..! 🤓
— Travis Elkins (@traviselkins) September 16, 2020
With respect to @LaravelLivewire, @tailwindcss and @Alpine_JS combinations, I've found that is easier and quicker to roll-your-own to meet specific requirements than to install, configure and customise some third-party package. This is a big deal.
— Chris (@ninthspace) September 12, 2020
Made with Alpine.js
If you've got something to share with the Alpine.js community, you can submit your link or reach out to me on twitter @hugo__df.
Here are this week's Alpine.js adopters:
- codeexposed.com by @vitormiguellima is built with Alpine, Tailwind and Laravel
- sponsorgap.com by @toomaime keeps leveraging Alpine.js for new features
Demos:
- an interactive search bar clear button by @asantibanez with Alpine and Livewire Such
- a modal component with Tailwind and Alpine.js by @pixelcave_john
- Multi Range Slider with Alpine.js by @TwComponents
- Modal animation for Tailkit using Alpine.js transitions by @pixelcave_john
Articles & Tutorials
[Video] How to: Use Alpine.js to show and hide a menu by @dennisvdalen
How I Redesigned My Laravel Blog (Again) by @christophrumpel
For more posts like these, you can join the Alpine.js Development Subscription, it's a great way to support the newsletter and get early access to Alpine.js content.
Code & Tools
github.com/jcergolj/laravellte by @jcergolj has been upgrade to Laravel 8.0, Livewire 2.0 and Alpine.js 2+
github.com/willard/wp-landing-page - A WordPress plugin starter kit for Landing Pages with Alpine.js & Tailwind by @MacayWillard
github.com/KevinBatdorf/alpine-inline-devtools - Inline DevTools package for developing with Alpine.js by @kevinbatdorf has v0.6 release which allows you to update strings in Alpine components.