1
1 Comment

Tailwind + Alpine a match made in heaven for landing pages

I recently did a miny launch of a product of mine and I used both Tailwind and Alpine.js to create a landing page. It was the best decision I made. My focus on the product was to validate an idea, so I wanted to just push something out quick and dirty. These tools allowed me to make this happen without wasting any time in coding up basic functions.

About tailwind

Tailwind's utility first approach makes just so much intuitive sense to me. I especially like it for small projects. I especially like it for layout, adding margins, frids and flex alignments, width and height makes development really easy. It also allows you to see HOW your page is laid out by only looking at the html. In terms of the visual styiling, I still have some reservations for larger projects. I am still not entirely sure if I need to know that the button is blue, rounded, and has a drop shadow. This was a small enough project that it was ok though.

About alpine

Alpine is like a version of JQuery for modern web development. It is just meant to add sprinkles of interactivity to any application. It is very quick to learn in its entirery, and things just make sense, especially if you have used a framework like vue. You can make a modal in one second with very little overhead. Likewise, add form validation in a line or two. If you need to manage components that are not directly related, just dispatch an event to the window object and listen to it with the super easy syntax:

<element @custom-event.window="customFunction()">

Clear, easy, and extremely powerful.

I wouldn't use it for a large project with lots of state, because it does not have a virtual dom to manage things like diffing. It is actually just updating html on the fly. However, for getting a landing page set up, quickly, that feels professional, it is my absolute favorite.

Conclusion

If you have not given these guys a go, I highly recommend them. It makes you very productive very fast. Have you used them before, what do you think.

on January 18, 2021
  1. 1

    Hey, if you're interested in starting with Alpine.js, check out this introductory guide. https://lightit.io/blog/when-to-use-alpine-js/