hugo-tailwind3-starter

hugo-tailwind3-starter is a minimal Hugo starter project that integrates Tailwind CSS through PostCSS and strips unused styles with PurgeCSS in production builds. It doubles as both a project starter and a Hugo theme module, with a Netlify preview deployment that scores 100 on Google PageSpeed Insights for mobile and desktop.

What is hugo-tailwind3-starter?

hugo-tailwind3-starter is a bare-bones Hugo site starter created by BenjaminPrice and published on GitHub. It takes Hugo content as input and outputs a static site with a Tailwind CSS stylesheet, using PostCSS as the processing layer and PurgeCSS to remove unused CSS when building for production. The repository includes the Tailwind typography plugin so Markdown-generated content is styled out of the box.

What makes hugo-tailwind3-starter stand out?

• Tailwind CSS 3 integration — Preconfigured with Tailwind CSS version 3 and the official typography plugin, so prose, headings, lists, and code blocks from Markdown render with proper styles.
• PostCSS build pipeline — PostCSS handles the CSS processing in both development and production, and the production build invokes PurgeCSS to eliminate unused classes.
• Dual use as starter and theme — The readme documents two installation paths: as a standalone project or as a Hugo module imported from github.com/BenjaminPrice/hugo-tailwind3-starter.
• Netlify-ready configuration — A Netlify deploy status badge is included, and the live preview deployment achieves a 100 score on Google PageSpeed Insights for mobile and desktop with a near-perfect Lighthouse score.
• Simple npm commands — Starting a new project takes only npm install and npm start; theme users run hugo mod npm pack then npm install.
• Sample Markdown content — Test content from mxstbr/markdown-test-file is included to demonstrate how the typography plugin styles common Markdown elements.

Who should use hugo-tailwind3-starter?

• Hugo developers who want a working Tailwind CSS setup without manually wiring PostCSS and PurgeCSS into their own site.
• Theme developers seeking a lightweight base for a new Hugo theme, since the same code can be consumed as a Hugo module.
• Performance-focused site owners who want a starter known to reach a perfect PageSpeed score in its default Netlify deployment.

What can you do with hugo-tailwind3-starter?

• Launch a personal blog or documentation site: Use the bundled Markdown sample content and typography plugin to publish readable, styled articles immediately.
• Prototype a landing page: The minimal structure lets you write Tailwind classes in HTML and see them processed instantly via the dev server.
• Learn the Hugo + Tailwind stack: Study how PostCSS and PurgeCSS plug into Hugo's asset pipeline by tracing the production build steps.

How does hugo-tailwind3-starter work?

As a project, cloning the repository and running npm install followed by npm start starts the Hugo development server with Tailwind processing. As a theme, you add github.com/BenjaminPrice/hugo-tailwind3-starter to your Hugo modules configuration, run hugo mod npm pack to generate the package files, then run npm install. The production build runs PostCSS and PurgeCSS so the final static site ships only the CSS classes actually used.

FAQ

Can I use hugo-tailwind3-starter as a Hugo theme?

Yes. The readme explicitly states the setup works both as a starter project and as a theme. Import it with Hugo Modules by adding github.com/BenjaminPrice/hugo-tailwind3-starter, then run hugo mod npm pack and npm install.

What PageSpeed score does the default preview get?

The Netlify preview deployment currently receives a 100 on Google PageSpeed Insights for both mobile and desktop, plus a near-perfect Lighthouse score. These scores apply to the starter's default sample content.

What CSS tools are included?

The starter bundles Tailwind CSS version 3, the official Tailwind typography plugin, PostCSS as the preprocessing step, and PurgeCSS for production CSS cleanup.

How do I start a new project from this starter?

Clone the repository, run npm install, then npm start. The Hugo development server starts with the Tailwind build pipeline already configured for you.

Does the starter include sample content?

Yes, it ships with Markdown content adapted from mxstbr/markdown-test-file, which exercises headings, lists, blockquotes, and code blocks so you can see the typography plugin's output.