Hugo Starter Tailwind Basic

Hugo Starter Tailwind Basic is a boilerplate starter project that combines the Hugo static site generator with TailwindCSS v3, a PostCSS build pipeline, and PurgeCSS for production CSS minification. It can be used as a standalone project or imported as a Hugo Module theme, making it a flexible starting point for any Hugo site that wants utility-first styling with minimal configuration.

What is Hugo Starter Tailwind Basic?

Hugo Starter Tailwind Basic is a minimal starter project and theme that wires Hugo to TailwindCSS v3 and its typography plugin. It takes a Hugo site with your content and templates as input and produces a static website with a processed, purged CSS file. The project is hosted on GitHub under the user bep and includes a Netlify deployment badge showing a live preview.

Key Features

• TailwindCSS v3 setup — Includes the official Tailwind typography plugin, so prose elements get readable typography without custom CSS.
• PostCSS build pipeline — Uses PostCSS to process the CSS, with PurgeCSS removing unused utility classes when building for production.
• Dual usage modes — Works as a standalone starter with npm install and hugo server, or as a Hugo Module via hugo mod npm pack.
• Hugo module mounts — Ships with a hugo.toml configuration that mounts the assets directory and hugo_stats.json to enable Tailwind class detection.
• Performance baseline — The Netlify preview deployment reports a 100 score on both mobile and desktop in Google PageSpeed Insights.
• Tailwind 2.x variant — A separate module path (.../v2) is available for projects that need Tailwind 2.x rather than 3.x.

Who is it for?

• Hugo developers who want a quick, pre-configured TailwindCSS setup without manually linking PostCSS and PurgeCSS.
• Theme authors who need a reference implementation for mounting Hugo modules and using hugo_stats.json with Tailwind.
• Performance-conscious site builders who want a tiny CSS output; the production build purges unused classes to keep page weight low.

What can you do with Hugo Starter Tailwind Basic?

• Start a new Hugo site: Clone the repo, run npm install and hugo server, then write Markdown content styled with Tailwind utilities.
• Create a custom theme: Import it as a Hugo Module and layer your own templates and assets on top, following the module pattern in the README.
• Learn Hugo's build caching: Extend the provided cachebuster rules to handle other asset types (JS, images) in your own projects.

How does Hugo Starter Tailwind Basic work?

As a project, you install dependencies with npm install and run hugo server for local development. For theme usage, you add the module reference to your hugo.toml, run hugo mod npm pack to fetch the npm requirements, and then build as normal. The build.cachebusters settings tell Hugo when to re-run PostCSS and Tailwind based on file changes.

FAQ

Is Hugo Starter Tailwind Basic free?

The repository is publicly available on GitHub with no licensing or pricing information, so it is free to use and modify.

What version of Hugo is required?

The module configuration declares a minimum Hugo version of 0.112.0 and sets extended = false, so the regular Hugo binary is sufficient.

Can I use Tailwind 2.x instead of 3.x?

Yes. The README points users to the .../v2 module path for Tailwind 2.x compatibility.

Does this starter include pre-designed page templates?

No. The README describes only the build setup; there are no showcased page layouts or templates beyond a basic site scaffold.

How does PurgeCSS affect development and production?

PurgeCSS runs only in production builds, so development has all Tailwind classes available; the production CSS is reduced to only the classes actually used in your templates.