Hello World

Thu, 15 Jan 2026 00:00:00 +0000

Welcome to hugo-tailwind-starter — a minimal, production-ready template for Hugo + Tailwind CSS v4.

Features

This starter includes everything you need to build a fast, modern static site:

Hugo Pipes integration with Tailwind CSS v4
Dark mode with system detection
Client-side search
SEO optimized with OGP and JSON-LD

Code Example

Here’s how the CSS pipeline works in baseof.html:

{{ $css := resources.Get "css/main.css" }}
{{ $css = $css | css.PostCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $css.RelPermalink }}">

Getting Started

Clone the repository
Run npm install
Run hugo server

That’s it! No build scripts needed — Hugo handles everything.

Getting Started with Hugo and Tailwind

Sat, 10 Jan 2026 00:00:00 +0000

Prerequisites

Hugo (extended version)
Node.js 20+

Quick Start

Clone the repo and install dependencies:

git clone https://github.com/YOUR_USERNAME/hugo-tailwind-starter.git
cd hugo-tailwind-starter
npm install
hugo server

Open http://localhost:1313 in your browser.

Project Structure

The most important files:

hugo.toml — Site configuration
assets/css/main.css — Tailwind CSS entry point
layouts/ — All page templates

Dark Mode

The starter supports dark mode out of the box. It detects your system preference and allows manual toggle via the button in the header.

Tutorial on Hugo Tailwind Starter