BUILDING THE MODERN WEB WITH ASTRO 6

Why Astro?

Astro’s island architecture delivers something that most frameworks can’t: zero JavaScript by default. For content-heavy sites, this translates directly to performance wins that users feel.

The Content Layer API

Astro 6 introduced the new Content Layer API — a fundamental shift in how collections work. Instead of a magic src/content/ convention, collections now require explicit loaders.

import { defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';

const articles = defineCollection({
  loader: glob({ pattern: '**/*.md', base: './src/content/articles' }),
  schema: z.object({
    title: z.string(),
    date: z.coerce.date(),
  }),
});

The render() function is now imported separately:

import { render } from 'astro:content';
const { Content } = await render(entry);

Tailwind 4 Integration

Tailwind 4 drops the JavaScript config file entirely. All theme customization lives in CSS using @theme:

@import "tailwindcss";

@theme {
  --font-mono: 'JetBrains Mono', monospace;
  --color-primary: #ffffff;
}

Conclusion

Astro 6 + Tailwind 4 is a remarkably productive stack for personal sites. The Content Layer API’s explicit loaders make collection behavior predictable, and Tailwind 4’s CSS-first approach reduces configuration surface area.