Hugo-Theme-Island

Based on Tailwind CSS 4.0, work in progress.

Development

Just check package.json and install packages.

Run following commands with two consoles to start the development server:

npm run watch-css

npm run hugo

A page refreshing may be required each time after code changed.

[!NOTE] Remember to run npm run build to generate main.css and commit it to GitHub.

Why not using the built in Hugo’s css.TailwindCSS feature feature?

As a published theme, I believe that the css should not be built every time when building the site, and users don’t have to install node_modules. So let’s simply commit the generated assets/css/main.css and load it from layouts directly.

To generate the main.css file, npx @tailwindcss/cli -i assets/css/tailwind.css -o assets/css/main.css is called. And for development, npx @tailwindcss/cli -i assets/css/tailwind.css -o assets/css/main.css -w (the “-w”) is very consistent.

See also

• Hugoplate
• Coder
• Blowfish
• Yue
• congo