Configure build

The build configuration section contains global build-related configuration options.

build:
  buildStats:
    disableClasses: false
    disableIDs: false
    disableTags: false
    enable: false
  cacheBusters:
  - source: (postcss|tailwind)\.config\.js
    target: (css|styles|scss|sass)
  noJSConfigInAssets: false
  useResourceCacheWhen: fallback

[build]
  noJSConfigInAssets = false
  useResourceCacheWhen = 'fallback'
  [build.buildStats]
    disableClasses = false
    disableIDs = false
    disableTags = false
    enable = false
  [[build.cacheBusters]]
    source = '(postcss|tailwind)\.config\.js'
    target = '(css|styles|scss|sass)'

{
   "build": {
      "buildStats": {
         "disableClasses": false,
         "disableIDs": false,
         "disableTags": false,
         "enable": false
      },
      "cacheBusters": [
         {
            "source": "(postcss|tailwind)\\.config\\.js",
            "target": "(css|styles|scss|sass)"
         }
      ],
      "noJSConfigInAssets": false,
      "useResourceCacheWhen": "fallback"
   }
}

buildStats

See Configure buildStats.

cachebusters

See Configure Cache Busters.

noJSConfigInAssets

(bool) If true, turns off writing a jsconfig.json into your /assets folder with mapping of imports from running js.Build. This file is intended to help with intellisense/navigation inside code editors such as VS Code. Note that if you do not use js.Build, no file will be written.

useResourceCacheWhen

(string) When to use the cached resources in /resources/_gen for PostCSS and ToCSS. Valid values are never, always and fallback. The last value means that the cache will be tried if PostCSS/extended version is not available.

Configure cache busters

The build.cachebusters configuration option was added to support development using Tailwind 3.x’s JIT compiler where a build configuration may look like this:

build:
  buildStats:
    enable: true
  cachebusters:
  - source: assets/watching/hugo_stats\.json
    target: styles\.css
  - source: (postcss|tailwind)\.config\.js
    target: css
  - source: assets/.*\.(js|ts|jsx|tsx)
    target: js
  - source: assets/.*\.(.*)$
    target: $1

[build]
  [build.buildStats]
    enable = true
  [[build.cachebusters]]
    source = 'assets/watching/hugo_stats\.json'
    target = 'styles\.css'
  [[build.cachebusters]]
    source = '(postcss|tailwind)\.config\.js'
    target = 'css'
  [[build.cachebusters]]
    source = 'assets/.*\.(js|ts|jsx|tsx)'
    target = 'js'
  [[build.cachebusters]]
    source = 'assets/.*\.(.*)$'
    target = '$1'

{
   "build": {
      "buildStats": {
         "enable": true
      },
      "cachebusters": [
         {
            "source": "assets/watching/hugo_stats\\.json",
            "target": "styles\\.css"
         },
         {
            "source": "(postcss|tailwind)\\.config\\.js",
            "target": "css"
         },
         {
            "source": "assets/.*\\.(js|ts|jsx|tsx)",
            "target": "js"
         },
         {
            "source": "assets/.*\\.(.*)$",
            "target": "$1"
         }
      ]
   }
}

When buildStats New in v0.115.1 is enabled, Hugo writes a hugo_stats.json file on each build with HTML classes etc. that’s used in the rendered output. Changes to this file will trigger a rebuild of the styles.css file. You also need to add hugo_stats.json to Hugo’s server watcher. See Hugo Starter Tailwind Basic for a running example.

source

A regexp matching file(s) relative to one of the virtual component directories in Hugo, typically assets/....

target

A regexp matching the keys in the resource cache that should be expired when source changes. You can use the matching regexp groups from source in the expression, e.g. $1.

Configure build stats

build:
  buildStats:
    disableClasses: false
    disableIDs: false
    disableTags: false
    enable: false

[build]
  [build.buildStats]
    disableClasses = false
    disableIDs = false
    disableTags = false
    enable = false

{
   "build": {
      "buildStats": {
         "disableClasses": false,
         "disableIDs": false,
         "disableTags": false,
         "enable": false
      }
   }
}

If enable is set to true, creates a hugo_stats.json file in the root of your project. This file contains arrays of the class attributes, id attributes, and tags of every HTML element within your published site. Use this file as data source when removing unused CSS from your site. This process is also known as pruning, purging, or tree shaking.

Exclude class attributes, id attributes, or tags from hugo_stats.json with the disableClasses, disableIDs, and disableTags keys.

Due to the nature of partial server builds, new HTML entities are added while the server is running, but old values will not be removed until you restart the server or run a regular hugo build.