Adventures in Tailwind and Astro

The website you are viewing here today, has been built with Astro.js and TailwindCSS. I’ve been using Tailwind in other projects, but this website is my first experience with Astro. It has been an exploration in developer experience, website performance, and adding a new tool to my toolbox.

First off, there are some huge time saving aspects with Astro in developing a website. Route creation is simple, building components is intuitive, and the ability to use other JavaScript frameworks in an island is kind of mind blowing. I could even see a new developer using Astro’s documentation and building a blog or large website in a fraction of the time it would take with other frameworks.

Combining Astro with Tailwind is also incredibly easy with Astro’s built in support. Honestly, Astro does pretty much all the work getting it installed properly for you. I was able to quickly get in to customizing my Tailwind configuration to add custom themes and colors. I know not everyone is a fan of Tailwind because of how it can make the HTML look messy, but with Astro components and layouts it so much easier than creating and keeping track of my own classes.

I understand that this website is mainly going to be for me, and maybe a handful of friends or colleagues that want to check it out. But I still wanted to make sure it was performant and accessible. I appreciate how Astro and Tailwind do an excellent job of making their tools fun to use, but ultimately deliver incredible performance to the end user. It makes me very excited to have these skills available for me to use professionally moving forward.

I started my web development journey with the basics, then worked in React, Vue, and Next. Those are all great tools, and definitely have some strengths that Astro isn’t focused on. But as far as spinning up a beautiful website quickly and efficiently, I think Astro and Tailwind are going to be tools I lean on frequently.