LIVE DEMO

This is beta. Things including the style may change without bumping the major version.

This theme is based on gatsby-theme-mdx-blog.

So you need to install both gatsby-theme-mdx-blog and gatsby-theme-mdx-tailwind-blog.

yarn add gatsby-theme-mdx-blog gatsby-theme-mdx-tailwind-blog

In your gatsby-config.js file,

module.exports = { siteMetadata: { title: Your Title, author: Your Name, description: Your Description, }, plugins: [ gatsby-theme-mdx-blog, gatsby-theme-mdx-tailwind-blog, ], };

Add your posts under

src/pages/your-post.mdx

or

src/pages/your-post/index.mdx

At the frontmatter section, you need the following:

---
title: 'Title of the post'
description: 'Description of the post'
date: 'Date Timestamp'
---

This theme has a link to /about page in the header.

If you're going to use the theme without modification, then you need to create about.mdx or about.js file. It's in the example.

You can highlight code syntax.

First, install themes like the following:

yarn add prism-themes

Then, create gatsby-browser.js like this:

import 'prism-themes/themes/prism-darcula.css';

That's it.

yarn install && yarn example

All the source code is under examples/blog.

You can also see the live demo here →.