Hugo-Theme-Island

Based on Tailwind CSS 4.0.

Features

• Dark mode
• Multilingual
• Multi-Author
• Archives
• Cover images and authors' avatar images
• Code blocks
• Alerts and blockquotes

Demo and documents: https://hugo-theme-island.netlify.app/

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.