gatsby-theme-mdx-tailwind-blog

LIVE DEMO

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

Installation

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

How to use

Configuration

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, ], };

Adding posts

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'
---

/about page

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.

Syntax Highlighting

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.

Run the example

yarn install && yarn example

All the source code is under examples/blog.

You can also see the live demo here →.