Building a Blog with Astro 5 and Tailwind CSS

Introduction

Astro is a fantastic static site generator, especially when paired with Tailwind CSS. In this tutorial, we will build a blog from scratch.

Step 1: Initializing the Project

Run the following command to create a new Astro project:

npm create astro@latest my-blog

Follow the prompts to set up your project. Choose the “Empty” template for a fresh start.

Step 2: Adding Tailwind CSS

Astro has a built-in command to add integrations like Tailwind:

npx astro add tailwind

This will automatically create a tailwind.config.mjs file and add the integration to your astro.config.mjs.

Step 3: Setting Up Content Collections

Content collections are the best way to manage Markdown in Astro.

1. Create a src/content/config.ts file
2. Define your schema using zod
3. Add your Markdown files to src/content/blog/

Example Schema

import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    date: z.date(),
  }),
});

export const collections = { blog };

Conclusion

You now have a working blog! Customize the styles using Tailwind and add more content to make it your own.