diff --git a/content/en/functions/css/TailwindCSS.md b/content/en/functions/css/TailwindCSS.md
index 26176c880..f62706d4d 100644
--- a/content/en/functions/css/TailwindCSS.md
+++ b/content/en/functions/css/TailwindCSS.md
@@ -29,7 +29,7 @@ Use the `css.TailwindCSS` function to process your Tailwind CSS files. This func
Install the Tailwind CSS CLI v4.0 or later:
-```sh
+```sh {copy=true}
npm install --save-dev tailwindcss @tailwindcss/cli
```
@@ -42,21 +42,23 @@ The TailwindCSS CLI is also available as a [standalone executable] if you want t
Add this to your site configuration:
{{< code-toggle file=hugo copy=true >}}
-[[module.mounts]]
-source = "assets"
-target = "assets"
-[[module.mounts]]
-source = "hugo_stats.json"
-target = "assets/notwatching/hugo_stats.json"
-disableWatch = true
-[build.buildStats]
-enable = true
-[[build.cachebusters]]
-source = "assets/notwatching/hugo_stats\\.json"
-target = "css"
-[[build.cachebusters]]
-source = "(postcss|tailwind)\\.config\\.js"
-target = "css"
+[build]
+ [build.buildStats]
+ enable = true
+ [[build.cachebusters]]
+ source = 'assets/notwatching/hugo_stats\.json'
+ target = 'css'
+ [[build.cachebusters]]
+ source = '(postcss|tailwind)\.config\.js'
+ target = 'css'
+[module]
+ [[module.mounts]]
+ source = 'assets'
+ target = 'assets'
+ [[module.mounts]]
+ disableWatch = true
+ source = 'hugo_stats.json'
+ target = 'assets/notwatching/hugo_stats.json'
{{< /code-toggle >}}
### Step 3
@@ -75,16 +77,14 @@ Tailwind CSS respects `.gitignore` files. This means that if `hugo_stats.json` i
Create a partial template to process the CSS with the Tailwind CSS CLI:
```go-html-template {file="layouts/partials/css.html" copy=true}
-{{ with (templates.Defer (dict "key" "global")) }}
- {{ with resources.Get "css/main.css" }}
- {{ $opts := dict "minify" (not hugo.IsDevelopment) }}
- {{ with . | css.TailwindCSS $opts }}
- {{ if hugo.IsDevelopment }}
-
- {{ else }}
- {{ with . | fingerprint }}
-
- {{ end }}
+{{ with resources.Get "css/main.css" }}
+ {{ $opts := dict "minify" (not hugo.IsDevelopment) }}
+ {{ with . | css.TailwindCSS $opts }}
+ {{ if hugo.IsDevelopment }}
+
+ {{ else }}
+ {{ with . | fingerprint }}
+
{{ end }}
{{ end }}
{{ end }}
@@ -93,14 +93,16 @@ Create a partial template to process the CSS with the Tailwind CSS CLI:
### Step 5
-Call the partial template from your base template:
+Call the partial template from your base template, deferring template execution until after all sites and output formats have been rendered:
-```go-html-template {file="layouts/_default/baseof.html"}
+```go-html-template {file="layouts/baseof.html" copy=true}
...
- {{ partialCached "css.html" . }}
+ {{ with (templates.Defer (dict "key" "global")) }}
+ {{ partial "css.html" . }}
+ {{ end }}
...
-
+
```
## Options
diff --git a/content/en/functions/templates/Defer.md b/content/en/functions/templates/Defer.md
index c9711dbc0..74378df52 100644
--- a/content/en/functions/templates/Defer.md
+++ b/content/en/functions/templates/Defer.md
@@ -14,21 +14,29 @@ aliases: [/functions/templates.defer]
{{< new-in 0.128.0 />}}
> [!note]
-> This feature is meant to be used in the main page layout files/templates, and has undefined behavior when used from shortcodes, partials or render hook templates. See [this issue](https://github.com/gohugoio/hugo/issues/13492#issuecomment-2734700391) for more info.
+> This feature is meant to be used in the main page layout files/templates, and has undefined behavior when used from shortcodes, partials, or render hook templates. See [this issue](https://github.com/gohugoio/hugo/issues/13492#issuecomment-2734700391) for more info.
In some rare use cases, you may need to defer the execution of a template until after all sites and output formats have been rendered. One such example could be [TailwindCSS](/functions/css/tailwindcss/) using the output of [hugo_stats.json](/configuration/build/) to determine which classes and other HTML identifiers are being used in the final output:
-```go-html-template
-{{ with (templates.Defer (dict "key" "global")) }}
- {{ with resources.Get "css/main.css" }}
- {{ $opts := dict "minify" (not hugo.IsDevelopment) }}
- {{ with . | css.TailwindCSS $opts }}
- {{ if hugo.IsDevelopment }}
-
- {{ else }}
- {{ with . | fingerprint }}
-
- {{ end }}
+```go-html-template {file="layouts/baseof.html" copy=true}
+
+ ...
+ {{ with (templates.Defer (dict "key" "global")) }}
+ {{ partial "css.html" . }}
+ {{ end }}
+ ...
+
+```
+
+```go-html-template {file="layouts/_partials/css.html" copy=true}
+{{ with resources.Get "css/main.css" }}
+ {{ $opts := dict "minify" (not hugo.IsDevelopment) }}
+ {{ with . | css.TailwindCSS $opts }}
+ {{ if hugo.IsDevelopment }}
+
+ {{ else }}
+ {{ with . | fingerprint }}
+
{{ end }}
{{ end }}
{{ end }}
@@ -43,19 +51,23 @@ In some rare use cases, you may need to defer the execution of a template until
For the above to work well when running the server (or `hugo -w`), you want to have a configuration similar to this:
{{< code-toggle file=hugo >}}
+[build]
+ [build.buildStats]
+ enable = true
+ [[build.cachebusters]]
+ source = 'assets/notwatching/hugo_stats\.json'
+ target = 'css'
+ [[build.cachebusters]]
+ source = '(postcss|tailwind)\.config\.js'
+ target = 'css'
[module]
-[[module.mounts]]
-source = "hugo_stats.json"
-target = "assets/notwatching/hugo_stats.json"
-disableWatch = true
-[build.buildStats]
-enable = true
-[[build.cachebusters]]
-source = "assets/notwatching/hugo_stats\\.json"
-target = "styles\\.css"
-[[build.cachebusters]]
-source = "(postcss|tailwind)\\.config\\.js"
-target = "css"
+ [[module.mounts]]
+ source = 'assets'
+ target = 'assets'
+ [[module.mounts]]
+ disableWatch = true
+ source = 'hugo_stats.json'
+ target = 'assets/notwatching/hugo_stats.json'
{{< /code-toggle >}}
## Options