Tutorial
How to Use Tailwind CSS with Jekyll (2026 Guide)
A step-by-step guide to setting up Tailwind CSS v4 with Jekyll — installation, PostCSS config, purging unused styles, and a working example.
Tailwind CSS and Jekyll are a natural combination — Tailwind’s utility-first approach works beautifully in Liquid templates, and the purging process eliminates unused classes for a tiny final CSS bundle. Here is how to set it up properly in 2026.
Prerequisites
You need Node.js installed alongside Ruby and Jekyll. Check both are available:
node --version # v18 or higher recommended
ruby --version # 3.1 or higher
jekyll --version # 4.x
Method 1: Tailwind via PostCSS (recommended)
This approach integrates Tailwind into Jekyll’s asset pipeline via PostCSS.
Step 1: Initialise npm in your Jekyll project
cd your-jekyll-site
npm init -y
Step 2: Install Tailwind and PostCSS
npm install -D tailwindcss @tailwindcss/postcss postcss autoprefixer
Step 3: Initialise Tailwind
npx tailwindcss init
This creates tailwind.config.js in your project root.
Step 4: Configure Tailwind content paths
Edit tailwind.config.js to scan your Jekyll template files:
/** @type {import("tailwindcss").Config} */
module.exports = {
content: [
"./_includes/**/*.html",
"./_layouts/**/*.html",
"./_pages/**/*.html",
"./_posts/**/*.md",
"./*.html",
],
theme: {
extend: {},
},
plugins: [],
};
Step 5: Create a PostCSS config
Create postcss.config.js in your project root:
module.exports = {
plugins: {
"@tailwindcss/postcss": {},
autoprefixer: {},
},
};
Step 6: Create your Tailwind input CSS
Create assets/css/tailwind.css:
@import "tailwindcss";
Step 7: Add a build script to package.json
{
"scripts": {
"build:css": "postcss assets/css/tailwind.css -o assets/css/main.css",
"watch:css": "postcss assets/css/tailwind.css -o assets/css/main.css --watch",
"dev": "npm run watch:css & bundle exec jekyll serve",
"build": "npm run build:css && JEKYLL_ENV=production bundle exec jekyll build"
}
}
Step 8: Link the compiled CSS in your layout
In _layouts/default.html, replace your existing CSS link:
<link rel="stylesheet" href="/assets/css/main.css">
Step 9: Add compiled CSS to .gitignore (optional)
echo "assets/css/main.css" >> .gitignore
Add it to your git history if you prefer to commit the compiled output for simpler CI/CD.
Step 10: Run the development server
npm run dev
This runs Tailwind in watch mode alongside jekyll serve. Changes to your HTML templates trigger Tailwind to recompile; changes to your Markdown content trigger Jekyll to rebuild.
Method 2: Tailwind CDN (quick start, not for production)
For rapid prototyping, the Tailwind Play CDN works immediately with no build step:
<script src="https://cdn.tailwindcss.com"></script>
Add this to your <head>. This is only for development and prototyping — the CDN loads the full unoptimised Tailwind bundle (~3MB). Never use it in production.
Using Tailwind in Liquid templates
With Tailwind set up, you can use utility classes directly in your layouts and includes:
<!-- _layouts/default.html -->
<nav class="sticky top-0 z-50 bg-white border-b border-gray-100 shadow-sm">
<div class="max-w-6xl mx-auto px-4 flex items-center justify-between h-16">
<a href="/" class="text-xl font-bold text-blue-600">JekyllHub</a>
<ul class="flex gap-6">
<li><a href="/themes/" class="text-gray-600 hover:text-blue-600 transition-colors">Browse</a></li>
<li><a href="/blog/" class="text-gray-600 hover:text-blue-600 transition-colors">Blog</a></li>
</ul>
</div>
</nav>
<!-- _layouts/post.html -->
<article class="max-w-2xl mx-auto px-4 py-16">
<h1 class="text-4xl font-bold tracking-tight text-gray-900 mb-4">
How to Use Tailwind CSS with Jekyll (2026 Guide)
</h1>
<div class="prose prose-lg text-gray-700">
<div class="read-progress" id="read-progress"></div>
<article class="post" itemscope itemtype="https://schema.org/BlogPosting">
<header class="post-hero">
<div class="container">
<div class="post-hero__breadcrumb">
<a href="/">Home</a>
<span class="breadcrumb-sep">›</span>
<a href="/blog/">Blog</a>
<span class="breadcrumb-sep">›</span>
<span>Jekyll vs Webflow: Which Is Right for Your Website in 2026?</span>
</div>
<div class="post-hero__inner">
<span class="post-hero__cat">Comparison</span>
<h1 class="post-hero__title" itemprop="name">Jekyll vs Webflow: Which Is Right for Your Website in 2026?</h1>
<p class="post-hero__desc" itemprop="description">Jekyll and Webflow are both used to build beautiful, fast websites — but they work completely differently. Here is how to choose between them.</p>
<div class="post-hero__meta">
<span class="post-meta-item">
<svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
Updated <time itemprop="dateModified" datetime="2026-07-15T00:00:00+00:00">July 15, 2026</time>
</span>
<span class="post-meta-item">
<svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
5 min read
</span>
</div>
</div>
</div>
</header>
<div class="post-cover">
<div class="container">
<img src="/assets/images/blog/jekyll-vs-webflow.webp" alt="Jekyll vs Webflow: Which Is Right for Your Website in 2026?" class="post-cover__img" itemprop="image">
</div>
</div>
<div class="container">
<div class="post-body">
<div class="post-body__main">
<div class="post-toc" id="post-toc" data-collapsed="false" style="display:none">
<button class="post-toc__label" id="toc-toggle" aria-expanded="false" aria-controls="toc-body">
<span class="post-toc__label-left">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h10"/></svg>
Table of Contents
</span>
<svg class="post-toc__chevron" width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
</button>
<nav id="toc-body" class="toc"></nav>
</div>
<div class="prose" itemprop="articleBody">
<p>Jekyll and Webflow represent two very different approaches to building websites. Jekyll is a code-first static site generator. Webflow is a visual design tool that generates clean HTML and CSS without writing code. Both produce fast, beautifully designed websites — but the path to get there is completely different.</p>
<h2 id="what-each-tool-is">What each tool is</h2>
<p><strong>Jekyll</strong> is a static site generator you run on your computer. You write Markdown for content, HTML and Liquid for templates, and SCSS for styles. The output is a folder of static files you deploy to any host.</p>
<p><strong>Webflow</strong> is a visual web design platform — you design in a browser-based editor similar to Figma or Adobe XD, and Webflow generates the HTML, CSS, and JavaScript. You host on Webflow’s infrastructure or export the code.</p>
<h2 id="who-each-tool-is-for">Who each tool is for</h2>
<p>Jekyll is for developers and technical users. You need to be comfortable with the command line, text editors, Git, and markup languages. A non-technical person can learn it, but it takes time.</p>
<p>Webflow is for designers and non-developers. Its visual canvas is intuitive for anyone who has used a design tool. You can build a production-quality website without writing a single line of code.</p>
<h2 id="cost-comparison">Cost comparison</h2>
<table>
<thead>
<tr>
<th>Plan</th>
<th>Jekyll</th>
<th>Webflow</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hosting</td>
<td>Free (GitHub Pages/Cloudflare)</td>
<td>$14–$39+/month</td>
</tr>
<tr>
<td>CMS (managed content)</td>
<td>Free</td>
<td>Included in Business plan</td>
</tr>
<tr>
<td>E-commerce</td>
<td>Free (+ transaction fees)</td>
<td>$29–$212/month</td>
</tr>
<tr>
<td>Custom code</td>
<td>Full access</td>
<td>Paid plans</td>
</tr>
<tr>
<td>Team collaboration</td>
<td>Git (free)</td>
<td>$19–$49/seat/month</td>
</tr>
</tbody>
</table>
<p>Jekyll can be hosted for free indefinitely. Webflow’s site plans start at $14/month and scale up. For a developer, Jekyll is dramatically cheaper. For a non-developer who would otherwise hire a developer, Webflow’s cost may be justified.</p>
<h2 id="design-flexibility">Design flexibility</h2>
<p>Webflow gives you pixel-perfect control over layout and design through its visual canvas. Animations, interactions, and responsive breakpoints are set visually. What you see in the editor is almost exactly what you get in the browser.</p>
<p>Jekyll gives you total control through code — but you need to write it. You can build anything in Jekyll that you can build in HTML and CSS, but there is no visual editor. Design changes happen in a text file.</p>
<p><strong>For designers:</strong> Webflow.<br />
<strong>For developers:</strong> Jekyll.</p>
<h2 id="content-management">Content management</h2>
<p>Webflow has a built-in CMS with a visual editor for non-technical content editors. You define content types (blog posts, team members, products), your editors fill them in through the dashboard, and Webflow builds the pages.</p>
<p>Jekyll stores content as Markdown files in a repository. Non-technical editors can use a headless CMS like Decap CMS or Forestry.io that provides a dashboard in front of the Git repository — but it requires setup.</p>
<p><strong>Winner for non-technical content editing:</strong> Webflow.</p>
<h2 id="performance">Performance</h2>
<p>Both platforms produce fast websites. Jekyll outputs pure static HTML with no server-side processing. Webflow adds some of its own JavaScript for interactions and the Webflow hosting infrastructure uses a global CDN.</p>
<p>In practice, both score 90+ on Google Lighthouse. Jekyll has a slight edge for minimal sites because it ships zero framework JavaScript. Webflow sites with complex animations can become heavy.</p>
<h2 id="ownership-and-portability">Ownership and portability</h2>
<p>Jekyll content is Markdown files on your computer. You own them completely, can move hosts at any time, and are not dependent on any platform.</p>
<p>Webflow is more of a platform lock-in. You can export the static HTML/CSS, but the CMS content and dynamic features do not export cleanly. Moving away from Webflow means rebuilding your content structure.</p>
<p><strong>Winner for ownership:</strong> Jekyll.</p>
<h2 id="when-to-choose-jekyll">When to choose Jekyll</h2>
<ul>
<li>You are a developer or willing to learn basic web technologies</li>
<li>Cost is a primary concern (free vs $14+/month)</li>
<li>You want complete ownership of your code and content</li>
<li>You have a blog or documentation site that does not need complex animations</li>
<li>You want to host on GitHub Pages for free</li>
</ul>
<h2 id="when-to-choose-webflow">When to choose Webflow</h2>
<ul>
<li>You are a designer who does not code</li>
<li>You need to build and iterate on complex, animated layouts quickly</li>
<li>Your client or team needs a visual CMS without a developer in the loop</li>
<li>You are building a marketing site that needs frequent design changes</li>
<li>Budget is less of a concern than speed of design iteration</li>
</ul>
<h2 id="the-middle-ground">The middle ground</h2>
<p>Some teams use Webflow for design exploration and Jekyll for production — Webflow to prototype quickly, then port the design to Jekyll for long-term control and free hosting. This is more work upfront but pays off for sites that need to last years.</p>
<p>If you are a developer who values control and low cost, Jekyll is the right choice. If you are a designer who wants to ship beautiful sites without touching code, Webflow earns its price tag.</p>
<p>Browse <a href="/themes/">Jekyll themes on JekyllHub</a> to see what is achievable without Webflow.</p>
</div>
<div class="post-tags">
</div>
<div class="post-share">
<span class="post-share__label">Share</span>
<a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fjekyllhub.com%2Fcomparison%2F2026%2F06%2F01%2Fjekyll-vs-webflow%2F&text=Jekyll+vs+Webflow%3A+Which+Is+Right+for+Your+Website+in+2026%3F" target="_blank" rel="noopener" class="post-share__btn post-share__btn--twitter">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
X / Twitter
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fjekyllhub.com%2Fcomparison%2F2026%2F06%2F01%2Fjekyll-vs-webflow%2F&title=Jekyll+vs+Webflow%3A+Which+Is+Right+for+Your+Website+in+2026%3F" target="_blank" rel="noopener" class="post-share__btn post-share__btn--linkedin">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
LinkedIn
</a>
<button class="post-share__btn post-share__btn--copy" onclick="JekyllHub.copyPostLink(this)">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
<span>Copy Link</span>
</button>
</div>
<nav class="post-nav" aria-label="Post navigation">
<div class="post-nav__prev">
<a href="/comparison/2026/05/31/jekyll-vs-ghost/" class="post-nav__link">
<span class="post-nav__label">← Previous</span>
<span class="post-nav__title">Jekyll vs Ghost: Which Platform Is Right for Your Blog in 2026?</span>
</a>
</div>
<div class="post-nav__center">
<a href="/blog/" class="btn btn--secondary btn--sm">All Posts</a>
</div>
<div class="post-nav__next">
<a href="/tutorial/2026/06/02/jekyll-tailwind-css/" class="post-nav__link post-nav__link--next">
<span class="post-nav__label">Next →</span>
<span class="post-nav__title">How to Use Tailwind CSS with Jekyll (2026 Guide)</span>
</a>
</div>
</nav>
</div>
<aside class="post-body__sidebar">
<div class="sidebar-card">
<h3 class="sidebar-card__title">Browse Themes</h3>
<ul class="post-sidebar__links">
<li><a href="/jekyll-academic-themes/">🎓 Academic Themes</a></li>
<li><a href="/jekyll-blog-themes/">✍️ Blog Themes</a></li>
<li><a href="/jekyll-business-themes/">💼 Business Themes</a></li>
<li><a href="/jekyll-documentation-themes/">📚 Documentation Themes</a></li>
<li><a href="/jekyll-e-commerce-themes/">🛒 E-commerce Themes</a></li>
<li><a href="/jekyll-landing-page-themes/">🚀 Landing Page Themes</a></li>
<li><a href="/jekyll-personal-themes/">👤 Personal Themes</a></li>
<li><a href="/jekyll-portfolio-themes/">🎨 Portfolio Themes</a></li>
<li><a href="/jekyll-resume-cv-themes/">📄 Resume/CV Themes</a></li>
<li><a href="/jekyll-github-pages-themes/"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="display:inline;vertical-align:middle;margin-right:4px"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>GitHub Pages Themes</a></li>
</ul>
<a href="/themes/" class="btn btn--primary btn--full" style="margin-top:var(--space-5)">Browse All Themes →</a>
</div>
<div class="sidebar-card" style="margin-top:var(--space-6)">
<h3 class="sidebar-card__title">Submit Your Theme</h3>
<p style="font-size:0.875rem;color:var(--text-3);line-height:1.6;margin-bottom:var(--space-4)">Built a Jekyll theme? Share it with thousands of developers.</p>
<a href="/submit/" class="btn btn--secondary btn--full">Submit a Theme →</a>
</div>
</aside>
</div>
</div>
<!-- Related Themes — rendered by JS from SITE_DATA, shuffled per page load -->
<section class="post-related-themes" style="display:none">
<div class="container">
<h2 class="post-related-themes__title">Themes You Might Like</h2>
<div class="themes-grid themes-grid--4" id="post-related-themes-grid"
data-tags="[]"
data-related-category="Blog"></div>
</div>
</section>
</article>
<!-- Back to top -->
<button class="back-to-top" id="back-to-top" aria-label="Back to top" onclick="window.scrollTo({top:0,behavior:'smooth'})">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 15l7-7 7 7"/>
</svg>
</button>
<script src="/assets/js/post.js" defer></script>
</div>
</article>
Adding the Tailwind Typography plugin
The @tailwindcss/typography plugin adds beautiful prose styling for Markdown-rendered content — exactly what you need for blog posts:
npm install -D @tailwindcss/typography
In tailwind.config.js:
module.exports = {
// ...
plugins: [
require("@tailwindcss/typography"),
],
};
Then wrap your post content in a prose class:
<div class="prose prose-lg prose-blue max-w-none">
<div class="read-progress" id="read-progress"></div>
<article class="post" itemscope itemtype="https://schema.org/BlogPosting">
<header class="post-hero">
<div class="container">
<div class="post-hero__breadcrumb">
<a href="/">Home</a>
<span class="breadcrumb-sep">›</span>
<a href="/blog/">Blog</a>
<span class="breadcrumb-sep">›</span>
<span>Jekyll vs Webflow: Which Is Right for Your Website in 2026?</span>
</div>
<div class="post-hero__inner">
<span class="post-hero__cat">Comparison</span>
<h1 class="post-hero__title" itemprop="name">Jekyll vs Webflow: Which Is Right for Your Website in 2026?</h1>
<p class="post-hero__desc" itemprop="description">Jekyll and Webflow are both used to build beautiful, fast websites — but they work completely differently. Here is how to choose between them.</p>
<div class="post-hero__meta">
<span class="post-meta-item">
<svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
Updated <time itemprop="dateModified" datetime="2026-07-15T00:00:00+00:00">July 15, 2026</time>
</span>
<span class="post-meta-item">
<svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
5 min read
</span>
</div>
</div>
</div>
</header>
<div class="post-cover">
<div class="container">
<img src="/assets/images/blog/jekyll-vs-webflow.webp" alt="Jekyll vs Webflow: Which Is Right for Your Website in 2026?" class="post-cover__img" itemprop="image">
</div>
</div>
<div class="container">
<div class="post-body">
<div class="post-body__main">
<div class="post-toc" id="post-toc" data-collapsed="false" style="display:none">
<button class="post-toc__label" id="toc-toggle" aria-expanded="false" aria-controls="toc-body">
<span class="post-toc__label-left">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h10"/></svg>
Table of Contents
</span>
<svg class="post-toc__chevron" width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
</button>
<nav id="toc-body" class="toc"></nav>
</div>
<div class="prose" itemprop="articleBody">
<p>Jekyll and Webflow represent two very different approaches to building websites. Jekyll is a code-first static site generator. Webflow is a visual design tool that generates clean HTML and CSS without writing code. Both produce fast, beautifully designed websites — but the path to get there is completely different.</p>
<h2 id="what-each-tool-is">What each tool is</h2>
<p><strong>Jekyll</strong> is a static site generator you run on your computer. You write Markdown for content, HTML and Liquid for templates, and SCSS for styles. The output is a folder of static files you deploy to any host.</p>
<p><strong>Webflow</strong> is a visual web design platform — you design in a browser-based editor similar to Figma or Adobe XD, and Webflow generates the HTML, CSS, and JavaScript. You host on Webflow’s infrastructure or export the code.</p>
<h2 id="who-each-tool-is-for">Who each tool is for</h2>
<p>Jekyll is for developers and technical users. You need to be comfortable with the command line, text editors, Git, and markup languages. A non-technical person can learn it, but it takes time.</p>
<p>Webflow is for designers and non-developers. Its visual canvas is intuitive for anyone who has used a design tool. You can build a production-quality website without writing a single line of code.</p>
<h2 id="cost-comparison">Cost comparison</h2>
<table>
<thead>
<tr>
<th>Plan</th>
<th>Jekyll</th>
<th>Webflow</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hosting</td>
<td>Free (GitHub Pages/Cloudflare)</td>
<td>$14–$39+/month</td>
</tr>
<tr>
<td>CMS (managed content)</td>
<td>Free</td>
<td>Included in Business plan</td>
</tr>
<tr>
<td>E-commerce</td>
<td>Free (+ transaction fees)</td>
<td>$29–$212/month</td>
</tr>
<tr>
<td>Custom code</td>
<td>Full access</td>
<td>Paid plans</td>
</tr>
<tr>
<td>Team collaboration</td>
<td>Git (free)</td>
<td>$19–$49/seat/month</td>
</tr>
</tbody>
</table>
<p>Jekyll can be hosted for free indefinitely. Webflow’s site plans start at $14/month and scale up. For a developer, Jekyll is dramatically cheaper. For a non-developer who would otherwise hire a developer, Webflow’s cost may be justified.</p>
<h2 id="design-flexibility">Design flexibility</h2>
<p>Webflow gives you pixel-perfect control over layout and design through its visual canvas. Animations, interactions, and responsive breakpoints are set visually. What you see in the editor is almost exactly what you get in the browser.</p>
<p>Jekyll gives you total control through code — but you need to write it. You can build anything in Jekyll that you can build in HTML and CSS, but there is no visual editor. Design changes happen in a text file.</p>
<p><strong>For designers:</strong> Webflow.<br />
<strong>For developers:</strong> Jekyll.</p>
<h2 id="content-management">Content management</h2>
<p>Webflow has a built-in CMS with a visual editor for non-technical content editors. You define content types (blog posts, team members, products), your editors fill them in through the dashboard, and Webflow builds the pages.</p>
<p>Jekyll stores content as Markdown files in a repository. Non-technical editors can use a headless CMS like Decap CMS or Forestry.io that provides a dashboard in front of the Git repository — but it requires setup.</p>
<p><strong>Winner for non-technical content editing:</strong> Webflow.</p>
<h2 id="performance">Performance</h2>
<p>Both platforms produce fast websites. Jekyll outputs pure static HTML with no server-side processing. Webflow adds some of its own JavaScript for interactions and the Webflow hosting infrastructure uses a global CDN.</p>
<p>In practice, both score 90+ on Google Lighthouse. Jekyll has a slight edge for minimal sites because it ships zero framework JavaScript. Webflow sites with complex animations can become heavy.</p>
<h2 id="ownership-and-portability">Ownership and portability</h2>
<p>Jekyll content is Markdown files on your computer. You own them completely, can move hosts at any time, and are not dependent on any platform.</p>
<p>Webflow is more of a platform lock-in. You can export the static HTML/CSS, but the CMS content and dynamic features do not export cleanly. Moving away from Webflow means rebuilding your content structure.</p>
<p><strong>Winner for ownership:</strong> Jekyll.</p>
<h2 id="when-to-choose-jekyll">When to choose Jekyll</h2>
<ul>
<li>You are a developer or willing to learn basic web technologies</li>
<li>Cost is a primary concern (free vs $14+/month)</li>
<li>You want complete ownership of your code and content</li>
<li>You have a blog or documentation site that does not need complex animations</li>
<li>You want to host on GitHub Pages for free</li>
</ul>
<h2 id="when-to-choose-webflow">When to choose Webflow</h2>
<ul>
<li>You are a designer who does not code</li>
<li>You need to build and iterate on complex, animated layouts quickly</li>
<li>Your client or team needs a visual CMS without a developer in the loop</li>
<li>You are building a marketing site that needs frequent design changes</li>
<li>Budget is less of a concern than speed of design iteration</li>
</ul>
<h2 id="the-middle-ground">The middle ground</h2>
<p>Some teams use Webflow for design exploration and Jekyll for production — Webflow to prototype quickly, then port the design to Jekyll for long-term control and free hosting. This is more work upfront but pays off for sites that need to last years.</p>
<p>If you are a developer who values control and low cost, Jekyll is the right choice. If you are a designer who wants to ship beautiful sites without touching code, Webflow earns its price tag.</p>
<p>Browse <a href="/themes/">Jekyll themes on JekyllHub</a> to see what is achievable without Webflow.</p>
</div>
<div class="post-tags">
</div>
<div class="post-share">
<span class="post-share__label">Share</span>
<a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fjekyllhub.com%2Fcomparison%2F2026%2F06%2F01%2Fjekyll-vs-webflow%2F&text=Jekyll+vs+Webflow%3A+Which+Is+Right+for+Your+Website+in+2026%3F" target="_blank" rel="noopener" class="post-share__btn post-share__btn--twitter">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
X / Twitter
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fjekyllhub.com%2Fcomparison%2F2026%2F06%2F01%2Fjekyll-vs-webflow%2F&title=Jekyll+vs+Webflow%3A+Which+Is+Right+for+Your+Website+in+2026%3F" target="_blank" rel="noopener" class="post-share__btn post-share__btn--linkedin">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
LinkedIn
</a>
<button class="post-share__btn post-share__btn--copy" onclick="JekyllHub.copyPostLink(this)">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
<span>Copy Link</span>
</button>
</div>
<nav class="post-nav" aria-label="Post navigation">
<div class="post-nav__prev">
<a href="/comparison/2026/05/31/jekyll-vs-ghost/" class="post-nav__link">
<span class="post-nav__label">← Previous</span>
<span class="post-nav__title">Jekyll vs Ghost: Which Platform Is Right for Your Blog in 2026?</span>
</a>
</div>
<div class="post-nav__center">
<a href="/blog/" class="btn btn--secondary btn--sm">All Posts</a>
</div>
<div class="post-nav__next">
<a href="/tutorial/2026/06/02/jekyll-tailwind-css/" class="post-nav__link post-nav__link--next">
<span class="post-nav__label">Next →</span>
<span class="post-nav__title">How to Use Tailwind CSS with Jekyll (2026 Guide)</span>
</a>
</div>
</nav>
</div>
<aside class="post-body__sidebar">
<div class="sidebar-card">
<h3 class="sidebar-card__title">Browse Themes</h3>
<ul class="post-sidebar__links">
<li><a href="/jekyll-academic-themes/">🎓 Academic Themes</a></li>
<li><a href="/jekyll-blog-themes/">✍️ Blog Themes</a></li>
<li><a href="/jekyll-business-themes/">💼 Business Themes</a></li>
<li><a href="/jekyll-documentation-themes/">📚 Documentation Themes</a></li>
<li><a href="/jekyll-e-commerce-themes/">🛒 E-commerce Themes</a></li>
<li><a href="/jekyll-landing-page-themes/">🚀 Landing Page Themes</a></li>
<li><a href="/jekyll-personal-themes/">👤 Personal Themes</a></li>
<li><a href="/jekyll-portfolio-themes/">🎨 Portfolio Themes</a></li>
<li><a href="/jekyll-resume-cv-themes/">📄 Resume/CV Themes</a></li>
<li><a href="/jekyll-github-pages-themes/"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="display:inline;vertical-align:middle;margin-right:4px"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>GitHub Pages Themes</a></li>
</ul>
<a href="/themes/" class="btn btn--primary btn--full" style="margin-top:var(--space-5)">Browse All Themes →</a>
</div>
<div class="sidebar-card" style="margin-top:var(--space-6)">
<h3 class="sidebar-card__title">Submit Your Theme</h3>
<p style="font-size:0.875rem;color:var(--text-3);line-height:1.6;margin-bottom:var(--space-4)">Built a Jekyll theme? Share it with thousands of developers.</p>
<a href="/submit/" class="btn btn--secondary btn--full">Submit a Theme →</a>
</div>
</aside>
</div>
</div>
<!-- Related Themes — rendered by JS from SITE_DATA, shuffled per page load -->
<section class="post-related-themes" style="display:none">
<div class="container">
<h2 class="post-related-themes__title">Themes You Might Like</h2>
<div class="themes-grid themes-grid--4" id="post-related-themes-grid"
data-tags="[]"
data-related-category="Blog"></div>
</div>
</section>
</article>
<!-- Back to top -->
<button class="back-to-top" id="back-to-top" aria-label="Back to top" onclick="window.scrollTo({top:0,behavior:'smooth'})">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 15l7-7 7 7"/>
</svg>
</button>
<script src="/assets/js/post.js" defer></script>
</div>
This automatically styles headings, paragraphs, code blocks, blockquotes, lists, and tables in rendered Markdown without any additional CSS.
Dark mode with Tailwind
Enable dark mode in tailwind.config.js:
module.exports = {
darkMode: "class",
// ...
};
Then your Jekyll dark mode toggle (which adds a dark class to <html>) works automatically with Tailwind’s dark: variants:
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
Content
</div>
Production build
For production, run:
npm run build
Tailwind scans all your template files, keeps only the utility classes you actually use, and outputs a tiny CSS file — often under 20kb for a standard site.
Common pitfalls
Dynamic class names not included: Tailwind scans for class names as strings. If you build class names dynamically in Liquid, Tailwind will not detect them:
{# This will NOT work — Tailwind cannot detect dynamic class names #}
<div class="text-{{ page.color }}-600">...</div>
{# Use conditional logic instead #}
{% if page.color == "blue" %}
<div class="text-blue-600">...</div>
{% elsif page.color == "red" %}
<div class="text-red-600">...</div>
{% endif %}
Forgetting to rebuild CSS: When running without the watch script, remember to rebuild CSS after changing templates or adding new Tailwind classes. The dev script handles this automatically.
Tailwind and Jekyll together give you a modern, utility-first CSS workflow with all the simplicity of a static site. Once the setup is in place, building layouts is fast and the output is lean.