blackspike astro landing pageblackspikeastrolandingpage

What are we doing here

We designed and built an early version of our own website’s landing page with Astro and Tailwind a few years ago before we decided to go in a different direction.

Code-complete, but languishing untouched and unloved on GitHub, we decided to modernise it, try out some fresh tech and release it to the Astro community.

We’d never upgraded any project from Tailwind 3 to 4, and there were some new Astro features and advanced CSS capabilities we’d not used before but keen to try.

🆒 Astro web dev stuff

Experimental Astro Fonts API

One of the newest Astro features is a font loading api that does a load of font-magic (preloading, swaps etc) so we thought we’d try it, seems to work great.

SVGs imported as Astro SVG components

We were keen to try this, you import any svg file as a component – we’d inlined them leading to vast swathes of svg code in our pages, this was much neater.

---
import Logo from '../assets/theme-images/logo.svg'
---

<Logo class="group-hover:-rotate-180 group-hover:scale-80 transition-transform ease-bs-spring duration-1000" height="48" width="48" />

Astro Image component for optimised AVIF images

OK we had used this one before, but not in this project. A doddle to import the theme images and use the <Image /> component to convert our src images to AVIFs

All-JSX native Astro components

We’d built the original project with Vue components, but as there was no interactivity, we easily converted them back to straight .astro components and dropped the Vue dependency.

JSON-powered content

We used .json for all the content (rather than markdown / content collections) because we thought we might use a CMS like Directus or headless WordPress later. Works great even as flat files.

Leaner dependencies

Overall, we reduced our dependencies from

"dependencies": {
  "@astrojs/tailwind": "^5.1.1",
  "@astrojs/vue": "^4.5.1",
  "@tailwindcss/container-queries": "^0.1.1",
  "astro": "^4.15.8",
  "swiper": "^11.1.14",
  "tailwindcss": "^3.4.12",
  "vue": "^3.5.8"
}

to

"dependencies": {
  "@tailwindcss/vite": "^4.1.7",
  "astro": "^5.7.13",
  "swiper": "^11.2.6",
  "tailwindcss": "^4.1.7"
}

🆒 CSS & HTML Features

Tailwind 4

The upgrade from 3 to 4 was painless – we used the auto-upgrade tool which fixed some stuff. The big change is using CSS vars rather than a .js config file which is way nicer.

The new vite plugin and built-in support for container queries meant we could reduce three dependencies to two.

Some cool tailwind classes:

CSS scroll-timeline

One cutting-edge CSS feature is scroll-timeline, allowing you to trigger animations when elements come into view (Chrome, Safari TP only atm) – something for which we’d usually use GSAP or AOS Javascript libraries.

@keyframes white-text {
  to { color: var(--color-bs-foreground-light); }
}

@supports (animation-timeline: view()) {
  .bs-st-quote strong {
    animation: white-text linear;
    animation-timeline: view(20% block);
  }
}

We used it here to turn any bold text brighter when it scrolls into view. Neat!

We use another scroll timeline to hide the carousel navigation buttons until the slides are in view ✨

Exclusive accordions with details/summary and animation

Another modern CSS-only solution to an old Javascript-only problem, exclusive accordions with animation from 0px to an unknown height.

With an added modern-css feature of linear easing to give a complex spring-like effect. Also neat!

details {

  @media (prefers-reduced-motion: no-preference) {
    interpolate-size: allow-keywords;
  }

  &::details-content {
    block-size: 0;
    opacity: 0;
    overflow-y: clip;
    transition: content-visibility 1s allow-discrete, opacity 1s, block-size 1s var(--ease-bs-bounce);
  }

  &[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

HTML animated modal dialog

Lastly, we used a native HTML dialog for a call-to-action form, animated with the same linear spring effect.

These features only work in some browsers, but they are the epitome of progressive-enhancement, they all fall back gracefully. It’s unclear whether any of them could be achieved with Tailwind, so we broke them out into raw CSS.

We hope you find this useful!

Here’s how the whole page looks, view it for real in your browser or fork it on GitHub here

Get it here