hugo-tailwind-theme

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.

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.

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.

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.

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.

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.