Tailwind v3.0 and Hugo

support
21

Thanks. Precisely what I was looking for.

1 Like
22

What is not working with Tailwind 3.0? I am using my repo since day 1 of 3.0 and it seems to work fine.

23
3 Likes
24

hi @willduncanphoto

can i now use the tailwind with hugo modules or one still needs to have node modules?

thanks

25

As noted above by @bwintx the best place to watch is here:

Hugo Issue #8343

Personally I’m not keen on a work around approach but I was hoping it would be sorted by now. I’m currently working on my first new Hugo project since my post (its a small site) and I’m electing to write the CSS myself including some Tailwind style utility classes. If I really needed Tailwind I’d be OK using version 2 but if I had to use version 3 I’d look into the work around.

1 Like
26

Actually, Tailwind 3.0.11 and up works better with Hugo, as explained in that post.

1 Like
27

Putting another option here for y’all that uses PostCSS CLI. Presenting it here in case someone needs to use @imports of CSS or SCSS files.

Why you shouldn’t use this approach:

  1. Praveen Juge and Bwintx’s Tailwind CLI solution looks cleaner to me.
  2. It also doesn’t leverage Hugo as much as some of the other solutions.

That being said, it was the only thing that worked for our messy CSS structure, and we’ve been using it for months without any issues. It may be worth a try to someone else with similar issues.

Using TailwindCSS JIT with Hugo via the PostCSS CLI

  • We have installed Tailwind as a PostCSS plugin. When looking at the TailwindCSS docs be sure to reference that configuration and not the Tailwind CLI (aka npx tailwindcss). Unless I missed something, their docs do not clarify that npx tailwindcss does not support '@import’s of CSS files.
  • As a result, we are using TailwindCSS with PostCSS as our preprocessor via the PostCSS CLI: Using with Preprocessors - Tailwind CSS
  • For local development (& npm run watch-css): We want as fast of rebuilds as possible. We are using ‘–watch’ with the PostCSS CLI to watch for changes and then rebuild our stylesheet to the static dir. We must also tell Hugo to rebuild via livereload on every static folder change with the flag --forceSyncStatic
  • For production builds (npm run prebuild &&): We use sequential NPM scripts to first create our CSS file and then build Hugo. This has to be done sequentially because if ‘dist/prod-styles.css’ Hugo pipes cannot use resource.Get and therefore Hugo Pipes for minify or fingerprint. This must be a permalink as our exports need to have the full URL
  • For Windows users we need to use the cross-env package and add npx cross-env. This is optional.

In package.json:

"scripts":  
{
    "build": "npm run prebuild && hugo --minify --gc --environment production",
    "prebuild": "postcss ./assets/css/tailwind.css --verbose --config 'assets/postcss' -o assets/dist/prod-styles.css",
    "start": "npx cross-env hugo server --forceSyncStatic & npm run watch-css",
    "watch-css": "postcss ./assets/css/tailwind.css --config 'assets/postcss' -o static/dev-styles.css --watch"
}

{{- if and (site.IsServer) (ne hugo.Environment "production") -}}
  <link rel="stylesheet" href="/dev-styles.css?{{ now.Unix }}" media="screen" />
{{- else if os.FileExists "assets/dist/prod-styles.css" -}}
  {{- $css := (resources.Get "dist/prod-styles.css" | minify | fingerprint ) -}}
  <link rel="stylesheet" href="{{ $css.RelPermalink  }}" media="screen" />
{{- else -}}
  {{ errorf "\n> \n> \n> Could not find 'assets/dist/prod-styles.css' \n> hugo.Environment='%v'%v%v'%v" hugo.Environment " and 'site.IsServer = " site.IsServer "\n> \n> It's likely that the PostCSS CLI did not make the file in time for Hugo to use it OR you are on a local dev environment which is not 'development' and didn't run 'npm run prebuild'. \n> \n> Check 'partials/site/stylesheets.html' for info\n> \n> " }}
{{- end -}}
2 Likes
28

I recently built a small site, my first Hugo build in quite a long time, and I elected to use Tailwind 2.0. Its now launched and I’ve created a branch on the repo to experiment with a Tailwind 3.0 setup solution I just found in a search the other day. Its a workaround so there is a downside (see comments on linked page) but its simple to setup. It appears to work as expected, deploy preview checks outs and everything seems good.

3 Likes
29

Thanks for the plug!

30

I am slightly familiar with Tailwind. This tutorial took a while to implement, especially because I discovered the input and output need direct paths to the files. All good now

31

I used Tailwind CSS 3.x since a few month during theme development. A bit like @angel approach via packages.json, but with npx tailwindcss .. --watch and hugo server during development, worked fine for me:

//[...]
{
  "scripts": {
    [...]
    "dev": "npm-run-all --parallel dev:tailwindcss dev:example --print-name --race",
    "dev:tailwindcss": "touch ./assets/styles/tw-main-dist.css && NODE_ENV=development npx tailwindcss -i ./assets/styles/tw-main-src.css -o ./assets/styles/tw-main-dist.css --watch --minify",
    "dev:example": "hugo server --source ./exampleSite --themesDir ../.. --baseURL http://localhost/ --port 1313 --buildDrafts --cleanDestinationDir  --disableFastRender --gc --minify --noHTTPCache --printI18nWarnings --renderToDisk --templateMetrics --templateMetricsHints",
    "build:vendorlibs": "npm-run-all preinstall postinstall --print-name",
    "build:tailwindcss": "NODE_ENV=production npx tailwindcss -i ./assets/styles/tw-main-src.css -o ./assets/styles/tw-main-dist.css --minify"
  },
  //[...]
}

To work on the theme, simply change into the theme directory, run npm run dev and access the Hugo example page at http://localhost:1313. It is automatically regenerated on every change to a style, template or sample content.

I described it with a few more details at foundata | How to use Tailwind CSS v3 in Hugo themes (including live reload)

2 Likes