Building My Portfolio Website with Astro.js, Tailwind CSS, and React: A Comprehensive Review

Hero image

I recently decided to rebuild my portfolio website, moving away from WordPress in favor of something more custom and where I can get more creative. After some research, I landed on Astro.js, an up-and-coming front-end framework, and combined it with Tailwind CSS and React to create a sleek, modern, and performant website. In this blog post, I'll share my development experience, discussing the strengths and weaknesses of using Astro.js with Tailwind CSS and React.


Overview of Astro.js

What is Astro.js?

Astro.js is a modern front-end framework that focuses on delivering fast, optimized websites by leveraging static rendering and partial hydration. It allows developers to build websites using their favorite JavaScript frameworks (like React, Vue, or Svelte) while producing minimal JavaScript bundles.

Core features

  • Static rendering by default
  • Supports multiple JavaScript frameworks
  • Markdown support
  • Scoped CSS

Comparison to other frameworks (Next.js, Gatsby, etc.)

Astro.js stands out from other popular frameworks like Next.js and Gatsby because of its strong focus on performance, lightweight JavaScript bundles, and its ability to use multiple frameworks in a single project.

Setting up the Project

Installing Astro.js is a breeze. I started by running the following command to create a new Astro project:

    npm create astro@latest

To use Tailwind CSS with Astro, I followed these steps:

  • Install dependencies using Astro’s Automatic CLI
    npx astro add tailwindcss
  • Import Tailwind CSS into my Astro project by creating a styles.css file in the src/ folder and adding the following:
@tailwind base;
@tailwind components;
@tailwind utilities;

And then, Astro.js made it simple to incorporate React components into my project using the Automatic CLI again:

npx astro add react

Then, I created a new React component file with the .tsx extension and imported the component:

And then I’m able to use the component in my Astro components and pages and control when it’s hydrated:

---
import MyReactComponent from './MyReactComponent.tsx';
---
<div>
    <MyReactComponent client:visible />
</div>

Development Experience

  • Creating reusable components

Astro.js makes it easy to create reusable components with React. I built each component either as a standalone React component or an Astro component (depending on how whether I needed stateg management or not), and then used Astro’s import syntax to include them in my pages.

  • Handling state and props

Managing state and passing props in Astro.js is similar to a typical React project. For local state, I used React hooks, while for prop passing, I simply passed them as attributes to my components.

Styling with Tailwind CSS

  1. Utility-first approach

Tailwind’s utility-first approach allowed me to quickly style my components and pages by applying utility classes directly to HTML elements. This helped keep my CSS organized and easily maintainable.

  • Customization and responsiveness

Customizing the design and making it responsive was a breeze, thanks to Tailwind’s configuration options and responsive utility classes.

Optimizing performance

  • Lazy-loading components

Astro.js optimizes performance by automatically lazy-loading/hydrating React components when they become visible on the screen. This helped to reduce the initial page load time.

  • Automatic image optimization

Astro.js has an integration called @astrojs/image which automatically optimizes images, which helped improve the site’s loading times and overall performance without much effort.

Strengths of Astro.js with Tailwind CSS and React

Improved performance

Astro.js’s focus on static rendering and minimal JavaScript results in faster websites with smaller bundles.

Flexibility in using multiple frameworks

One of the things I appreciated most about Astro.js was its ability to work seamlessly with multiple frameworks, including React, Vue, and Svelte. This flexibility allows developers to use their favorite tools without compromising on performance.

Enhanced developer experience

Astro.js offers a great developer experience, with features like:

  • Fast build times
  • Markdown support
  • Scoped CSS

These features made it easy and enjoyable to develop my new portfolio website (the one you’re reading now).

Weaknesses of Astro.js with Tailwind CSS and React

Learning curve for newcomers

For developers new to Astro.js or modern web development in general, there might be a learning curve. However, once you become familiar with the concepts, the development process becomes more intuitive.

Limited ecosystem and community (compared to more established frameworks)

Astro.js is a newer framework, which means its ecosystem and community are not as extensive as more established frameworks like Next.js or Gatsby. As a result, finding solutions to specific problems or third-party libraries might be more challenging.

Potential compatibility issues with certain React libraries

Since Astro.js focuses on minimal JavaScript and static rendering, you may encounter compatibility issues with some React libraries that rely heavily on JavaScript or client-side rendering.

Final Thoughts and Recommendations

Recap of the development experience

Overall, I had a positive experience building my portfolio website with Astro.js, Tailwind CSS, and React. The resulting website is fast, visually appealing, and customizable.

When to consider using Astro.js, Tailwind CSS, and React

If you’re looking to build a fast, modern website with a focus on performance and flexibility, Astro.js with Tailwind CSS and React is a great choice. It’s especially suitable for static websites like portfolios, blogs, and documentation sites.

Potential improvements for Astro.js and the ecosystem

As the Astro.js ecosystem grows, it would be great to see:

  • More third-party libraries and integrations
  • Improved compatibility with popular React libraries
  • Continued enhancements in developer experience and performance optimizations

Conclusion

In summary, rebuilding my portfolio website with Astro.js, Tailwind CSS, and React was a rewarding experience. I’m thrilled with the performance and flexibility it offers and would recommend it to others looking to create custom, creative, and fast websites.