First impressions of Astro

This week I attended another of Simon Vrachliotis’ Pro Tailwind workshops.

The workshop again was great, teaching us about multi-style Tailwind components, such as a button that has props for variants like size, shape and impact, and how to create them in a flexible and maintainable way as well as making use of Headless UI.

For this workshop though, the examples and challenges used a tool that I wasn’t familiar with - the Astro web framework.

I’ve seen a lot of blog posts and streams mentioning it but I hadn’t tried it out for myself until the workshop.

What I find interesting is that it comes with a number of available integrations - from Tailwind CSS, to Vue, React, and Alpine.js, and you can use the all within the same project, or even on the same page. Installing an integration is as simple as yarn astro add tailwindcss.

The templates feel familiar and make use of front matter within Astro components, and regular YAML front matter works within Markdown files - which are supported out of the box.

I’ve been thinking of redoing my personal website and evaluating options, but I think that Astro might be a new one to add to the list.