hugo-tailwind-theme

Bundle Tailwind CSS, Alpine.js, and vendor assets into self-contained Hugo themes.

Updated Feb 24, 2026

Search Tags:#hugo #tailwindcss #esbuild #theme-development #alpinejs #vendor-assets #font-self-hosting

Ready to run

npx skills add https://github.com/drmowinckels/dotfiles --skill hugo-tailwind-theme

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: hugo-tailwind-theme
Source: https://github.com/drmowinckels/dotfiles/tree/main/config/claude/skills/hugo-tailwind-theme
Command: npx skills add https://github.com/drmowinckels/dotfiles --skill hugo-tailwind-theme

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Hugo themes often require site users to install and configure multiple tools (Tailwind, Alpine, etc.). This skill packages self-contained themes so users only run Hugo; all assets and vendor bundles are built inside the theme.

Core Features & Use Cases

Self-contained vendor bundles built via npm inside the theme
Tailwind CSS 4 + Alpine.js integration with on-demand vendor loading
Dark mode, self-hosted fonts and FontAwesome, and a scalable asset pipeline for theme developers

Quick Start

Install the theme and run the theme's build process to generate vendor bundles, then start Hugo.

Frequently Asked Questions about hugo-tailwind-theme

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I bundle Tailwind CSS and Alpine.js into a Hugo theme so site users don't need npm?▼

To bundle Tailwind CSS and Alpine.js into a self-contained Hugo theme, you build prebuilt vendor bundles using npm inside the theme. This packages all dependencies so end users only run Hugo to render templates and deploy the site.

What's the best way to self-host fonts and FontAwesome in a Hugo theme?▼

The best way to self-host fonts and FontAwesome in a Hugo theme is to use an asset pipeline that bundles vendor assets during the theme build process. This generates prebuilt bundles in the static and assets directories for end-user deployment.

Do I need npm installed to use a Hugo theme with prebuilt Tailwind CSS assets?▼

You only need npm if you are the theme developer installing and building the vendor bundles. Site users deploying the Hugo theme do not need npm; they only run Hugo to render templates using the prebuilt assets.

Can I load Alpine.js on demand in a Hugo theme without bloating the initial page load?▼

Yes, you can load Alpine.js on demand by integrating it within the theme's esbuild asset pipeline. This approach bundles vendor assets during the theme build process, allowing conditional loading to reduce initial page bloat.

How does dark mode work with self-hosted fonts in a Hugo Tailwind theme?▼

Dark mode works by integrating Tailwind CSS 4 with self-hosted fonts bundled directly within the Hugo theme. The theme build process packages these vendor assets, ensuring the dark mode styling and fonts load without external dependencies.

Why does my Hugo theme require site visitors to install Tailwind and other frontend dependencies?▼

Your Hugo theme requires frontend dependencies because vendor assets are not prebuilt. By using an esbuild asset pipeline to bundle Tailwind CSS and Alpine.js inside the theme, you generate static assets so users only run Hugo.