Jekyll Starter Tailwind

Jekyll Starter Tailwind is a free, open-source boilerplate that pairs the Jekyll static site generator with the Tailwind CSS utility framework via a Gulp-based build pipeline, giving you a barebones Jekyll theme plus automated CSS purging, minification, and live reload.

What is Jekyll Starter Tailwind?

Jekyll Starter Tailwind is a starter kit that combines Jekyll and Tailwind CSS with a Gulp orchestration layer. The repository contains a barebones Jekyll theme and a Gulpfile that compiles Tailwind, strips unused CSS with Tailwind's purge option, runs Autoprefixer, minifies CSS, compiles Jekyll, and starts Browsersync for local development. The project is hosted at github.com/taylorbryant/jekyll-starter-tailwind and is licensed under the MIT license.

Key Features

• Gulp build pipeline — A single Gulpfile compiles Tailwind, purges unused CSS using Tailwind's purge option, runs Autoprefixer, minifies CSS, compiles Jekyll, and launches Browsersync.
• Tailwind CSS integration — Uses the utility-first Tailwind framework; the purge option removes unused styles to reduce production CSS file size.
• Browsersync for local development — Running npm run start or npm run dev compiles the site and serves it with Browsersync, providing live reload during development.
• Netlify deployment ready — Includes a netlify.toml that overrides Netlify's default jekyll build with npm run build, plus a one-click Deploy to Netlify link in the README.
• Separate build commands — Offers npm run build:dev for development and npm run build / npm run build:production for production output.
• MIT licensed — The starter is free to use and modify under the MIT license.

Who is it for?

• Jekyll developers who want to use Tailwind CSS without manually configuring PostCSS, Autoprefixer, and Gulp.
• Developers building blog or content sites — Jekyll's Markdown and Liquid templates, plus Tailwind's utility classes, give a fast workflow for personal, project, or organization sites.
• Netlify users who want a preconfigured static site pipeline; the included netlify.toml makes deployment straightforward.

What can you do with it?

• Build a personal blog or project site — Use the barebones Jekyll theme, write content in Markdown, and style pages with Tailwind utility classes.
• Create a portfolio or landing page — Extend the starter's minimal layout with responsive Tailwind components to showcase work.
• Learn the Gulp + Tailwind + Jekyll workflow — Study how the Gulpfile orchestrates Tailwind purging, Autoprefixer, and Jekyll compilation into single npm run commands.

How does it work?

After cloning the repository, run bundle install to install required Ruby gems and npm ci to install npm packages. Then npm run start or npm run dev compiles the site with development settings and runs Browsersync. For deployment, npm run build compiles the site for production, producing a static _site directory that can be hosted on any web server or static host.

FAQ

What are the system requirements?

The starter requires Bundler, Jekyll, Node.js, npm, and Ruby. After cloning, run bundle install for gems and npm ci for npm packages.

How do I build for production?

Run npm run build:production or npm run build. The Gulpfile performs Tailwind purging, Autoprefixer, and CSS minification, then compiles Jekyll to a static site.

How do I deploy to Netlify?

Use the one-click Deploy to Netlify button in the README. The included netlify.toml overrides the default jekyll build command with npm run build, so Netlify runs the full Gulp pipeline.

Is Jekyll Starter Tailwind free?

Yes, the project is open source under the MIT license. You can use, modify, and redistribute it for personal or commercial projects.