Published on

Statics Blog: Tailwind & Next.js

In my views, the Blog is to show articles and news. The most important thing is to make it easy to read. If we post our articles in something platform like the CSDN or the Zhihu etc. Those platforms is not clear, which have a lot advertisements, and much futures not support, like the LaTeX\LaTeX. So we need one way to show our articles, and we can control it. The one way is to build a blog by ourselves.

TIP

Maybe have other great ways to build the blog, here we use the Next.js and Tailwind CSS to build the blog.

Why Next.js?

Next.js is a React framework that provides a great developer experience with many features. It is a great choice for building a blog because of the following reasons:

  1. SEO Friendly: Next.js provides great SEO support out of the box.
  2. Performance: Next.js optimizes the performance of the blog by providing features like server-side rendering and static site generation. (if further we want to use dynamic version blog, we also can use this framework)
  3. Developer Experience: Next.js provides a great developer experience with features like hot module replacement, automatic code splitting, and more. (if we want add some futures, we can use the plugins quickly)
  4. Community: Next.js has a large and active community that provides great support and resources. It have 129k+ stars on GitHub until 2025.

Why Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes that can be used to style elements. It is a great choice for building a blog because of the following reasons:

  1. Customizable: Tailwind CSS provides a great degree of customization, which means that our can easily modify the styles to fit our needs.
  2. Developer Experience: Tailwind CSS provides a great developer experience by providing a set of pre-defined classes that can be used to style elements.
  3. Community: Tailwind CSS has a large and active community that provides great support and resources. Until 2025, it have 84.5k+ stars on GitHub.

tailwind-nextjs-starter-blog

tailwind-nextjs-starter-blog is a starter template for Next.js and Tailwind CSS that provides a great starting point for building a blog. Here are some of the features of the starter template:

  • Easy styling customization with Tailwind 3.0 and primary color attribute
  • MDX - write JSX in markdown documents!
  • Lightweight, 85kB first load JS
  • Mobile-friendly view
  • Light and dark theme
  • Integration with Pliny that provides:
    • Multiple analytics options including Umami, Plausible, Simple Analytics, Posthog, and Google Analytics
    • Comments via Giscus, Utterances, or Disqus
    • Command palette search with Kbar or Algolia
  • Math display supported via KaTeX
  • Citation and bibliography support via rehype-citation
  • Support for tags - each unique tag will be its own page