Tailwind CSS Blog

Features

• Easy styling customization with Tailwind 3.0 and primary color attribute
• Near perfect lighthouse score - Lighthouse report
• Lightweight, 45kB first load JS, uses Preact in production build
• Mobile-friendly view
• Light and dark theme
• Self-hosted font with Fontsource
• Supports plausible, simple analytics and google analytics
• MDX - write JSX in markdown documents!
• Server-side syntax highlighting with line numbers and line highlighting via rehype-prism-plus
• Math display supported via KaTeX
• Citation and bibliography support via rehype-citation
• Automatic image optimization via next/image
• Flexible data retrieval with mdx-bundler
• Support for tags - each unique tag will be its own page
• Support for multiple authors
• Blog templates
• TOC component
• Support for nested routing of blog posts
• Newsletter component with support for mailchimp, buttondown, convertkit, klaviyo and revue
• Supports giscus, utterances or disqus
• Projects page
• Preconfigured security headers
• SEO friendly with RSS feed, sitemaps and more!

Sample posts

• A markdown guide
• Learn more about images in Next.js
• A tour of math typesetting
• Simple MDX image grid
• Example of long prose
• Example of Nested Route Post

Quick Start Guide

1. TypeScript and Contentlayer (alpha)

1
npx degit timlrx/tailwind-nextjs-starter-blog#contentlayer

or JS (official support)

1
npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git

or with TypeScript (community support)

1
npx degit timlrx/tailwind-nextjs-starter-blog#typescript

1. Personalize siteMetadata.js (site related information)
2. Modify the content security policy in next.config.js if you want to use any analytics provider or a commenting solution other than giscus.
3. Personalize authors/default.md (main author)
4. Modify projectsData.js
5. Modify headerNavLinks.js to customize navigation links
6. Add blog posts
7. Deploy on Vercel

Installation

1
npm install

Development

First, run the development server:

1
npm start

or

1
npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Extend / Customize

data/siteMetadata.js - contains most of the site related information which should be modified for a user's need.

data/authors/default.md - default author information (required). Additional authors can be added as files in data/authors.

data/projectsData.js - data used to generate styled card on the projects page.

data/headerNavLinks.js - navigation links.

data/logo.svg - replace with your own logo.

data/blog - replace with your own blog posts.

public/static - store assets such as images and favicons.

tailwind.config.js and css/tailwind.css - contain the tailwind stylesheet which can be modified to change the overall look and feel of the site.

css/prism.css - controls the styles associated with the code blocks. Feel free to customize it and use your preferred prismjs theme e.g. prism themes.

components/social-icons - to add other icons, simply copy an svg file from Simple Icons and map them in index.js. Other icons use heroicons.

components/MDXComponents.js - pass your own JSX code or React component by specifying it over here. You can then call them directly in the .mdx or .md file. By default, a custom link and image component is passed.

layouts - main templates used in pages.

pages - pages to route to. Read the Next.js documentation for more information.

next.config.js - configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains.

Post

Frontmatter

Frontmatter follows Hugo's standards.

Currently 7 fields are supported.

1
title (required)
2
date (required)
3
tags (required, can be empty array)
4
lastmod (optional)
5
draft (optional)
6
summary (optional)
7
images (optional, if none provided defaults to socialBanner in siteMetadata config)
8
authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
9
layout (optional list which should correspond to the file names in `data/layouts`)
10
canonicalUrl (optional, canonical url for the post for SEO)

Here's an example of a post's frontmatter:

1
---
2
title: 'Introducing Tailwind Nexjs Starter Blog'
3
date: '2021-01-12'
4
lastmod: '2021-01-18'
5
tags: ['next-js', 'tailwind', 'guide']
6
draft: false
7
summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
8
images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
9
authors: ['default', 'sparrowhawk']
10
layout: PostLayout
11
canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
12
---

Compose

Run node ./scripts/compose.js to bootstrap a new post.

Follow the interactive prompt to generate a post with pre-filled front matter.

Licence

MIT © Timothy Lin