My try on a Hugo boilerplate.

I used the Parima Hugo Theme as starting point. It comes with:

  • TailwindCSS (2.2.17)
  • PurgeCSS/PostCSS

Parima is nice and gives you a purged and minified CSS /public/ folder. The normal Tailwind CSS is 3.5Mb in size

I added:

  • Tailwind JIT
  • @tailwindcss/typography

Tailwind JIT gives you a small CSS in dev and saves loading time.

How to use

Prerequisite:

  • hugo
  • Node.js/npm

Install with:

git clone https://github.com/4044ever/hugo-boilerplate-tailwind-jit/

run npm install then npm run start

Go to localhost:1313 to view what you do.

run npm run build to build the ready to host public folder.

git clone https://github.com/4044ever/hugo-boilerplate-tailwind-jit
npm install
npm run start
/* npm run build */

Note: if you want to use Visual Studio Code’s Live Server and you see only style free text - you need to set baseURL = "localhost:1313", otherwise the browser can not find the linked CSS.

Last words:

I am not a coder, just an amateur that puts some stuff together. You probably find lots of errors here. But point is, it basically works.

Git Repo

Demo Site

© 4044ever - Use freely as you please.