Proper way to set up theme with node dependencies

support
5

@schwartzmj i had my fair share of challenges in blending tailwind with hugo and below is the gist for your queries, i can write a follow up for my initial blog post if you can elaborate your needs and below answer doesn’t solve your queries in full.

Code snippet taken from https://github.com/leelavg/thoughtexpo

How does this transfer to a development environment and to deployment?

  • In case of Hugo with Tailwind, we potentially need purgeCSS in deployment and faster renders in development
  • For example with below code in your head partial $ hugo serve (typically used in dev) hugo will invoke postcss-cli to act up on css/tailwind.css according to it’s config
{{$tailwind := resources.Get "css/tailwind.css" | resources.PostCSS (dict "inlineImports" true)}}
{{if (eq (getenv "NODE_ENV") "production")}}
    {{$tailwind = $tailwind | minify | fingerprint | resources.PostProcess}}
{{end}}
  • But with $ NODE_ENV=production hugo (typically used in deploy) postcss-cli also triggers purgeCSS as specified in tailwind.config.js and hugo in addition to above also minifies and fingerprints css.

Are node_modules installed within the theme folder?

  • You will never be committing node_modules to git, typically this folder goes into .gitignore and yes, packages mentioned in package.json will be downloaded to this folder locally upon running npm install or yarn install but when deployed to, typically Netlify, it installs these packages before hugo builds the site.

Do I also potentially have a package.json and node_modules folder in the project root?

  • You will only be committing package.json (vs node_modules) to version control but once these packages get installed locally in node_modules, hugo and postcss-cli utilizes them without you needing any manual intervention.

How do I decouple the project from the theme?

Does Hugo evaluate this and run postCSS from that config at build time?

  • I assume config as in tailwind.config.js, package.json, postcss.config.js but not config.[yaml/toml] then yes hugo with the feature Hugo Pipes talks typically with postcss-cli which then uses postcss.config.js and calls the plugins mentioned in that config.

Does it also look for a package.json?

  • yes, hugo typically looks for package.json in root dir if postcss is used or any other location which is specified inline.

Does Hugo expect a globally installed PostCSS instead?

  • hugo expects postcss-cli executable be available either globally or locally.

Please take my response as a rebuttable presumption and disregard the info which you already know of.

HTH, @leelavg.

3 Likes
Proper Tailwind CSS Theme Setup - Blank Slate Theme