A Tailwind CSS generator for JsonBlog
npm install @jsonblog/generator-tailwind

A modern Tailwind CSS-powered static blog generator for JsonBlog. This package provides the same functionality as @jsonblog/generator-boilerplate but uses Tailwind CSS for styling with build-time compilation and purging for optimal bundle sizes.
- π¨ Tailwind CSS with utility-first approach
- β‘ Optimized CSS - Build-time compilation and purging (~14KB minified)
- π Development server with live reload on port 3500
- π·οΈ Tags and categories support for better content organization
- π Pagination with configurable posts per page
- π‘ RSS feed generation for content syndication
- πΊοΈ Sitemap generation for SEO
- π Syntax highlighting with Highlight.js
- π Clean, modern HTML output with semantic structure
- π¨ Professional design inspired by Stripe, Linear, and Vercel
- π§ Customizable via tailwind.config.js
- π TypeScript support
- β
Same API as generator-boilerplate
``bash`
npm install @jsonblog/generator-tailwind
`typescript
import { generateBlog } from '@jsonblog/generator-tailwind';
const blog = {
site: {
title: 'My Blog',
description: 'A blog about my thoughts',
},
basics: {
name: 'John Doe',
},
settings: {
postsPerPage: 5, // Optional: defaults to 10
},
posts: [
{
title: 'Hello World',
slug: 'hello-world',
content: '# Hello World\n\nThis is my first post!',
createdAt: '2025-11-20',
tags: ['introduction'],
},
],
pages: [],
};
const files = await generateBlog(blog, '/path/to/blog');
console.log(\Generated \${files.length} files\);`
The generator includes a \tailwind.config.js\ that extends Tailwind's default theme:
`javascript`
module.exports = {
content: ['./templates/*/.hbs'],
theme: {
extend: {
fontFamily: {
sans: ['-apple-system', 'BlinkMacSystemFont', ...],
mono: ['"IBM Plex Mono"', 'Monaco', ...],
},
fontSize: {
base: '19px', // Readable base font size
},
maxWidth: {
content: '816px', // Optimized reading width
},
},
},
};
The \templates/input.css\ file uses Tailwind's \@layer\ directive:
`css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.post-card {
@apply mb-10 pb-8 border-b border-gray-200;
}
}
`
The generator supports grid layouts for pages like videos, projects, portfolios, etc. This allows you to showcase items in a visual grid with a featured item at the top.
Recommended: Load items from external file
In your blog.json, add a page with layout: "grid" and itemsSource pointing to a JSON file:
`json`
{
"pages": [
{
"title": "Videos",
"slug": "videos",
"description": "My talks and presentations",
"layout": "grid",
"itemsSource": "videos.json"
}
]
}
Then create videos.json in the same directory as your blog.json:
`json`
[
{
"title": "Building AI Products at Scale",
"description": "A deep dive into production ML systems and the infrastructure needed to run them at scale.",
"url": "https://youtube.com/watch?v=...",
"image": "https://i.ytimg.com/vi/.../maxresdefault.jpg",
"date": "2025-01-15",
"featured": true,
"tags": ["AI", "Infrastructure", "Scale"]
},
{
"title": "Intro to RAG Systems",
"description": "Understanding retrieval-augmented generation for building intelligent applications.",
"url": "https://youtube.com/watch?v=...",
"thumbnail": "https://i.ytimg.com/vi/.../hqdefault.jpg",
"date": "2025-01-10",
"tags": ["RAG", "LLM"]
}
]
Alternative: Inline items
You can also define items directly in blog.json (not recommended for large lists):
`json`
{
"pages": [
{
"title": "Videos",
"layout": "grid",
"items": [
{ "title": "...", "url": "..." }
]
}
]
}
Each item in the items array supports:
- title (required): Item titledescription
- (optional): Item descriptionurl
- (optional): Link URL (makes title/image clickable)image
- (optional): Full-size image (used for featured items)thumbnail
- (optional): Thumbnail image (used for grid items)featured
- (optional): Set to true to display as featured item at topdate
- (optional): Display date (formatted automatically)tags
- (optional): Array of tags to display
- Featured items: Display full-width at the top with larger image and more prominent styling
- Regular items: Display in a 2-column grid below the featured item
- Optional content: You can include regular markdown content that appears before the grid
- Responsive: Grid automatically adjusts to single column on mobile
Perfect for:
- Videos - YouTube/conference talks with thumbnails
- Projects - Portfolio items with screenshots
- Publications - Papers/articles with cover images
- Courses - Educational content with thumbnails
- Talks - Speaking engagements and presentations
`bashBuild Tailwind CSS only
npm run build:css
| Feature | generator-tailwind | generator-boilerplate |
|---------|-------------------|----------------------|
| CSS Framework | Tailwind CSS | Custom CSS |
| CSS Size | ~14KB (purged) | ~8.4KB |
| Customization | tailwind.config.js | Direct CSS editing |
| Utility Classes | β
Yes | β No |
| Build Step | CSS compilation | None |
MIT Β© JSON Blog Team