Building a Modern Blog with Next.js 16 and Tailwind CSS v4

Why Build Your Own Blog?

In a world of Medium, Substack, and Dev.to, why build your own blog? Control. When you own your blog, you own your audience, your SEO, and your brand.

A custom blog also serves as a portfolio piece. It shows potential clients and employers that you can ship real products.

The Stack

For this build, we're using:

Next.js 16 with App Router for static generation and routing
Tailwind CSS v4 with the new CSS-first configuration
TypeScript for type safety
Framer Motion for subtle animations

Setting Up Tailwind CSS v4

The biggest change in Tailwind v4 is the move to CSS-first configuration. Instead of a JavaScript config file, you define your design tokens directly in CSS:

@import "tailwindcss";

@theme inline {
  --color-primary: #6366f1;
  --color-secondary: #ec4899;
  --font-sans: "Inter", sans-serif;
}

This approach is cleaner and faster. Your design tokens live alongside your styles, where they belong.

Static Generation

One of Next.js's greatest strengths is static generation. For a blog, this means your pages are pre-rendered at build time — resulting in near-instant load times and perfect SEO.

Use generateStaticParams to tell Next.js which blog posts to pre-render:

export async function generateStaticParams() {
  return posts.map((post) => ({ slug: post.slug }));
}

Dark Mode Done Right

Dark mode isn't optional anymore. The key is preventing the flash of wrong theme on page load. We use an inline script in the <head> that checks localStorage before React hydrates:

<script>
  (function() {
    var t = localStorage.getItem('theme');
    if (t === 'dark' || (!t && matchMedia('(prefers-color-scheme:dark)').matches))
      document.documentElement.classList.add('dark');
  })()
</script>

This ensures the correct theme is applied before any content is painted.

Performance Tips

Use static generation — avoid server-side rendering for blog content
Optimize images — use Next.js Image component with proper sizing
Minimize JavaScript — a blog doesn't need a heavy client-side bundle
Use system fonts — or limit custom fonts to one or two weights

Conclusion

Building your own blog is a rewarding project that improves your skills and gives you full control over your online presence. With Next.js 16 and Tailwind CSS v4, you can ship a production-ready blog in a weekend.