A barebone Hugo & Tailwind CSS 3.0 starter kit

  • By null
  • Last update: Dec 17, 2022
  • Comments: 3

Hugo & Tailwind 3.0

A barebone Hugo & Tailwind CSS 3.0 starter kit

Install to VS Code with:
git clone https://github.com/4044ever/Hugo-Tailwind-3.0
npm install

To start developing:
npm run start

To generate the site HTML:
npm run build

npm run start will run two commands parallel:
npx tailwindcss -i ./assets/css/main.css -o ./assets/css/style.css --watch

and hugo server

Note: When you start first time npm run start a style.css must exist - or you get an error! Just do a Ctrl+c and run npm run start - even though you got an error but a style was written anyway and 2nd time round it should start fine.

To get out of developing mode you need to do Ctrl+c twice.

Disclaimer: This is my first try with Hugo and Tailwind 3.0. To me it looks like all functions work, classes get updated, a correct /public/ folder with purged, minified style*.css gets created. Seems production ready, you can build a theme around it. Leave a comment if you see errors or improvements.

Github

https://github.com/4044ever/Hugo-Tailwind-3.0

Comments(3)

  • 1

    [Bug] npm run start is not working

    I am getting following error when trying to execute "npm run start" command. I have not made any changes just cloned the site and executed this command after installation. Any idea what is going wrong? I am able to run both watch commands separately without any issue

    Env Details: OS:ubuntu 20.0 node: v16.15.1 npm: 6.14.7

    Error Message:

    [email protected] start /media/lenovo/Windows/linuxdocs/workspace/projects/newbeelearn.com/tailwind-hugo-theme/Hugo-Tailwind-3.0 concurrently npm:watch:*

    [watch:*tw] npm run watch:tw exited with code 243 [watch:*hugo] npm run watch:hugo exited with code 243 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: concurrently npm:watch:* npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:

  • 2

    Is there some installation step missing that a newbie like me needs, in order to follow your installation & build instructions?

    Thanks so much for providing this starter. I've been working with Hugo for about 4 months now and made a lot of Hugo sites to try out different themes, but I'm afraid I'm unclear on something with your README instructions. Am I supposed to create a Hugo new site xxxxx before doing this? If so, what directory should I be in when I run the: git clone https://github.com/4044ever/Hugo-Tailwind-3.0 npm install ??

    I thought it would create a Hugo Site for me, so I went into my HugoSites folder and issued the command. This resulted in a: HugoSites > Hugo-Tailwind-3.0 folder and a HugoSites > package.json

    Doing your next step: npm run start (from where I was - without moving into the Hugo-Tailwind-3.0 folder) resulted in this:

    D:\Hugo\HugoSites>npm install
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path D:\Hugo\HugoSites/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'D:\Hugo\HugoSites\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

    However, this file DOES exist: 'D:\Hugo\HugoSites\package.json'

    Is there some step missing that a newbie like me needs, in order to follow your installation & build instructions? Thanks in advance for any reply you may have time to provide!

  • 3

    Run `tailwindcss` in build step

    Thanks for creating such a useful pairing!

    I've added ./assets/css/style.css to my .gitignore since it changes so frequently. When I build my site in CI, running npm run build fails because ./assets/css/style.css doesn't exist. I think it assumes you've run npm run start at least once. This change ensures style.css exists before building with Hugo.

Popular Tag

Related