TheCloud/hugoDocs
1
0
Fork 0
mirror of https://github.com/gohugoio/hugoDocs.git synced 2025-09-10 15:24:47 -04:00
Code Issues Packages Projects Releases Wiki Activity

Rewrite the css.TailwindCSS page

Browse Source
This commit is contained in:
Joe Mooring 2025-02-10 11:35:02 -08:00 committed by GitHub
parent 1c46f18644
commit a04e96e559
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 94 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
content/en/functions/css/TailwindCSS.md
View File

@ -16,16 +16,106 @@ toc: true
{{< new-in 0.128.0 />}} {{< new-in 0.128.0 />}}
## Prerequisites Use the `css.TailwindCSS` function to process your Tailwind CSS files. This function uses the Tailwind CSS CLI to:
To use this function you must install the Tailwind CSS CLI v4.0 or later. You may install the CLI as an npm package or as a standalone executable. See the [Tailwind CSS documentation] for details. 1. Scan your templates for Tailwind CSS utility class usage.
1. Compile those utility classes into standard CSS.
1. Generate an optimized CSS output file.
## Setup
```text Step 1
: Install the Tailwind CSS CLI v4.0 or later:
```sh
npm install --save-dev tailwindcss @tailwindcss/cli npm install --save-dev tailwindcss @tailwindcss/cli
``` ```
[Tailwind CSS documentation]: https://tailwindcss.com/docs/installation The TailwindCSS CLI is also available as a [standalone executable] if you want to use it without installing Node.js.
[standalone executable]: https://github.com/tailwindlabs/tailwindcss/releases/latest
Step 2
: 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"
{{< /code-toggle >}}
Step 3
: Create a CSS entry file:
{{< code file=assets/css/main.css >}}
@import "tailwindcss";
@source "hugo_stats.json";
{{< /code >}}
Tailwind CSS respects `.gitignore` files. This means that if `hugo_stats.json` is listed in your `.gitignore` file, Tailwind CSS will ignore it. To make `hugo_stats.json` available to Tailwind CSS you must explicitly source it as shown in the example above.
Step 4
: Create a partial template to process the CSS with the Tailwind CSS CLI:
{{< code file=layouts/partials/css.html copy=true >}}
{{ with resources.Get "css/main.css" }}
{{ $opts := dict
"minify" hugo.IsProduction
"inlineImports" true
}}
{{ with . | css.TailwindCSS $opts }}
{{ if hugo.IsProduction }}
{{ with . | fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}
{{ else }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}
{{ end }}
{{ end }}
{{< /code >}}
Step 5
: Call the partial template from your base template:
{{< code file=layouts/default/baseof.html >}}
<head>
...
{{ partialCached "css.html" . }}
...
<head>
{{< /code >}}
Step 6
: Optionally create a `tailwind.config.js` file in the root of your project as shown below. This is necessary if you use the [Tailwind CSS IntelliSense
extension] for Visual Studio Code.
[Tailwind CSS IntelliSense
extension]: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
{{< code file=tailwind.config.js copy=true >}}
/*
This file is present to satisfy a requirement of the Tailwind CSS IntelliSense
extension for Visual Studio Code.
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
The rest of this file is intentionally empty.
*/
{{< /code >}}
## Options ## Options
@ -40,38 +130,3 @@ inlineImports
skipInlineImportsNotFound skipInlineImportsNotFound
: (`bool`) When `inlineImports` is enabled, we fail the build if an import cannot be resolved. Enable this option to allow the build to continue and leave the import statement in place. Note that the inline importer does not process URL location or imports with media queries, so those will be left as-is even without enabling this option. Default is `false`. : (`bool`) When `inlineImports` is enabled, we fail the build if an import cannot be resolved. Enable this option to allow the build to continue and leave the import statement in place. Note that the inline importer does not process URL location or imports with media queries, so those will be left as-is even without enabling this option. Default is `false`.
## Example
Define a [cache buster] in your site configuration:
[cache buster]: /getting-started/configuration-build/#configure-cache-busters
{{< code-toggle file=hugo >}}
[[build.cachebusters]]
source = 'layouts/.*'
target = 'css'
{{< /code-toggle >}}
Process the resource:
```go-html-template
{{ with resources.Get "css/main.css" }}
{{ $opts := dict "minify" true }}
{{ with . | css.TailwindCSS $opts }}
{{ if hugo.IsDevelopment }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{ else }}
{{ with . | fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}
{{ end }}
{{ end }}
{{ end }}
```
The example above publishes the minified CSS file to `public/css/main.css`.
See [this repository] for more information about the integration with Tailwind CSS v4.0.
[this repository]: https://github.com/bep/hugo-testing-tailwindcss-v4