Jekyll Tailwindcss Starter

Jekyll Tailwindcss Starter is a boilerplate that pairs the Jekyll static site generator with Tailwind CSS v2.2+ to produce a styled Jekyll site with minimal configuration. It takes a standard Jekyll project and adds a working Tailwind/PostCSS/PurgeCSS build pipeline, along with integrations for Disqus comments, Google Analytics, and MathJax LaTeX rendering.

What is Jekyll Tailwindcss Starter?

Jekyll Tailwindcss Starter is an open-source boilerplate repository that combines Jekyll 4 with Tailwind CSS, PostCSS, and PurgeCSS to build static websites. Its input is a standard Jekyll project structure; its output is a compiled site with Tailwind utility classes, syntax-highlighted code blocks, and optional comment and analytics integrations. The project is hosted on GitHub at github.com/shenlu89/jekyll-tailwindcss-starter and is licensed under the MIT license.

What makes it stand out?

• Tailwind CSS v2.2+ — The starter ships with Tailwind CSS already wired into the Jekyll build via PostCSS, so you can use utility classes immediately.
• PurgeCSS — Unused CSS is stripped from the production build, keeping the final stylesheet lean.
• Tailwind Typography plugin — Code blocks and article prose get typographic styles through @tailwindcss/typography.
• Disqus integration — Commenting is supported for blog posts, powered by Disqus.
• Google Analytics — The template includes support for adding Google Analytics tracking.
• MathJax — LaTeX math formulas in Markdown are rendered by MathJax.
• Modern browser focus — The template explicitly supports modern browsers only and does not support IE 11 or older.
• Simple build commands — Setup uses Yarn and two commands: yarn css:build to compile the CSS and yarn jekyll:serve to preview the site.

Who is this template for?

• Jekyll developers who want Tailwind CSS without manually configuring PostCSS and PurgeCSS.
• Bloggers who need a static blog with Disqus comments, Google Analytics, and LaTeX math support.
• Theme creators looking for a minimal, modern-browser-only foundation to build a custom Jekyll theme.

Use cases

• Static bloggers: publish Markdown posts that are styled with Tailwind, have syntax-highlighted code, and can include LaTeX equations.
• Personal portfolios: build a clean personal website using Jekyll's layout system and Tailwind's utility classes.
• Prototyping: clone the starter to quickly spin up a Jekyll site and experiment with themes or features without dealing with build configuration.

How does it work?

The repository requires Node.js 12+ and Jekyll 4+. After cloning, you install dependencies with Yarn, run yarn css:build to generate the Tailwind stylesheet through PostCSS and PurgeCSS, and launch a local preview with yarn jekyll:serve. This process produces a static site that can be deployed to any Jekyll-compatible host.

FAQ

Is Jekyll Tailwindcss Starter free?

Yes, the project is open source under the MIT license, so you can freely use, modify, and distribute it, including for commercial projects.

What are the system requirements?

You need Node.js version 12 or higher and Jekyll version 4 or higher installed to run the starter locally.

Does the template support Internet Explorer?

No. The template targets modern browsers and explicitly excludes IE 11 and older versions.

What integrations are included?

The README lists Disqus for comments, Google Analytics, and MathJax for LaTeX rendering, plus Tailwind Typography for syntax highlighting.