Tailwind CSS Failing when running ExampleSite

support
1
  1. Run these commands.
hugo new site quickstart
cd quickstart
hugo new theme quick
echo "theme = 'quick'" >> hugo.toml
  1. Install Tailwind CSS css.TailwindCSS
  2. Create a new folder named exampleSite inside the theme and copy the content folder into it and create a simple hugo.toml file
baseURL = 'https://example.org/'
locale = 'en-us'
title = 'Test'
  1. While inside the exampleSite folder, run this command
hugo server --theme ../..
  1. Personally, I get this error
/themes/quick/layouts/_partials/head/css.html:5:38": execute of template failed: template: _partials/head/css.html:5:38: executing "_partials/head/css.html" at <.RelPermalink>: error calling RelPermalink: TAILWINDCSS: failed to transform "/css/main.css" (text/css). You need to install TailwindCSS CLI. See https://gohugo.io/functions/css/tailwindcss/: binary with name "tailwindcss" not found in PATH

N.B. Note in terminals where links are clickable, the colon in https://gohugo.io/functions/css/tailwindcss/: is added to the link, thus pointing to a non-existent page.

2

I think the new security model in v0.161.0 has broken the command hugo server --theme ../.. inside exampleSite. V0.160.0 works. I assume this is a breaking change?

And if it is a breaking change, what’s the way forward?

3

For anyone else who comes across this issue (sad I got no response), just try this command (with the necessary modifications to your theme path) in your package.json then run npm run devsite.

"devsite": "cd themes/bandu/exampleSite && PATH=\"$(npx -c 'pwd')/../../../node_modules/.bin:$PATH\" hugo server --theme ../.."
4

I’m sure someone (me) would have gotten to this, but on my list of priorities it’s no where near the top.

5

I thought so. With two maintainers, I am beginning to think I should try Astro for my next project (a wider ecosystem).