Why we rewrote hm-webstudio.com with Astro 5 + Tailwind v4
Lessons from migrating a static HTML/CSS/JS site to Astro with native i18n, MDX, and CSS-first config. Performance, DX and SEO without compromises.
After a year on the first version of the site built with vanilla HTML, CSS and JavaScript, we rewrote everything. Not for the thrill — for maintainability.
The vanilla problem
Every time a header value changed, six files needed editing. Every new project required HTML copy-paste. The “partial fetch” trick worked but was fragile and caused a flash on load.
Why Astro
- Real components that compile to static HTML.
- Native i18n with typed routes.
- MDX to write articles like this with embedded components.
- Zero client JavaScript unless we explicitly ask for it.
The CSS-first experiment
Tailwind v4 changes the game: config lives in CSS via @theme. Goodbye tailwind.config.js, hello declarative tokens. Faster to build, easier to read, and more aligned with the modern “design tokens” mindset.
Results after the first deploy
| Metric | v1 (vanilla) | v2 (Astro) |
|---|---|---|
| Lighthouse Performance | 89 | 99 |
| Duplicate HTML lines | ~1,200 | 0 |
| Time to add a project | 30 min | 90 sec |
| Client JS (home) | 18 KB | 4 KB |
What’s next
Migrate the full blog, ship View Transitions API across pages, and experiment with CSS scroll-driven animations. Code is open on GitHub.