diff options
Diffstat (limited to 'docs/content/en/functions/css')
| -rw-r--r-- | docs/content/en/functions/css/Sass.md | 20 | ||||
| -rw-r--r-- | docs/content/en/functions/css/TailwindCSS.md | 100 |
2 files changed, 52 insertions, 68 deletions
diff --git a/docs/content/en/functions/css/Sass.md b/docs/content/en/functions/css/Sass.md index 03a4c7451..ae628a15f 100644 --- a/docs/content/en/functions/css/Sass.md +++ b/docs/content/en/functions/css/Sass.md @@ -66,20 +66,20 @@ vars ```go-html-template {copy=true} {{ with resources.Get "sass/main.scss" }} {{ $opts := dict - "enableSourceMap" (not hugo.IsProduction) - "outputStyle" (cond hugo.IsProduction "compressed" "expanded") + "enableSourceMap" hugo.IsDevelopment + "outputStyle" (cond hugo.IsDevelopment "expanded" "compressed") "targetPath" "css/main.css" "transpiler" "dartsass" "vars" site.Params.styles "includePaths" (slice "node_modules/bootstrap/scss") }} {{ with . | toCSS $opts }} - {{ if hugo.IsProduction }} + {{ if hugo.IsDevelopment }} + <link rel="stylesheet" href="{{ .RelPermalink }}"> + {{ else }} {{ with . | fingerprint }} <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> {{ end }} - {{ else }} - <link rel="stylesheet" href="{{ .RelPermalink }}"> {{ end }} {{ end }} {{ end }} @@ -113,7 +113,7 @@ macOS|Homebrew|[brew.sh]|`brew install sass/sass/sass` Windows|Chocolatey|[chocolatey.org]|`choco install sass` Windows|Scoop|[scoop.sh]|`scoop install sass` -You may also install [prebuilt binaries] for Linux, macOS, and Windows. +You may also install [prebuilt binaries] for Linux, macOS, and Windows. You must install the prebuilt binary outside of your project directory and ensure its path is included in your system's PATH environment variable. Run `hugo env` to list the active transpilers. @@ -141,8 +141,8 @@ To install Dart Sass for your builds on GitLab Pages, the `.gitlab-ci.yml` file ```yaml variables: - HUGO_VERSION: 0.144.2 - DART_SASS_VERSION: 1.85.0 + HUGO_VERSION: 0.147.9 + DART_SASS_VERSION: 1.89.2 GIT_DEPTH: 0 GIT_STRATEGY: clone GIT_SUBMODULE_STRATEGY: recursive @@ -175,8 +175,8 @@ To install Dart Sass for your builds on Netlify, the `netlify.toml` file should ```toml [build.environment] -HUGO_VERSION = "0.144.2" -DART_SASS_VERSION = "1.85.0" +HUGO_VERSION = "0.147.9" +DART_SASS_VERSION = "1.89.2" NODE_VERSION = "22" TZ = "America/Los_Angeles" diff --git a/docs/content/en/functions/css/TailwindCSS.md b/docs/content/en/functions/css/TailwindCSS.md index 6add7373a..9d40ad0aa 100644 --- a/docs/content/en/functions/css/TailwindCSS.md +++ b/docs/content/en/functions/css/TailwindCSS.md @@ -18,8 +18,10 @@ Use the `css.TailwindCSS` function to process your Tailwind CSS files. This func 1. Compile those utility classes into standard CSS. 1. Generate an optimized CSS output file. -> [!caution] -> Tailwind CSS v4.0 and later requires a relatively [modern browser](https://tailwindcss.com/docs/compatibility#browser-support) to render correctly. +> [!note] +> Use this function with Tailwind CSS v4.0 and later, which require a relatively [modern browser] to render correctly. + +[modern browser]: https://tailwindcss.com/docs/compatibility#browser-support ## Setup @@ -27,11 +29,12 @@ 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 ``` -The TailwindCSS CLI is also available as a [standalone executable] if you want to use it without installing Node.js. +The Tailwind CSS CLI is also available as a [standalone executable]. You must install it outside of your project directory and ensure its path is included in your system's `PATH` environment variable. + [standalone executable]: https://github.com/tailwindlabs/tailwindcss/releases/latest @@ -40,21 +43,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 @@ -72,20 +77,15 @@ 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" 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 }}"> +```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 }} + <link rel="stylesheet" href="{{ .RelPermalink }}"> + {{ else }} + {{ with . | fingerprint }} + <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> {{ end }} {{ end }} {{ end }} @@ -94,33 +94,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} <head> ... - {{ partialCached "css.html" . }} + {{ with (templates.Defer (dict "key" "global")) }} + {{ partial "css.html" . }} + {{ end }} ... -<head> -``` - -### 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 - -```js {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. -*/ +</head> ``` ## Options @@ -131,8 +114,9 @@ minify optimize : (`bool`) Whether to optimize the output without minifying. Default is `false`. -inlineImports -: (`bool`) Whether to enable inlining of `@import` statements. Inlining is performed recursively, but currently once only per file. It is not possible to import the same file in different scopes (root, media query, etc.). Note that this import routine does not care about the CSS specification, so you can have `@import` statements anywhere in the file. Default is `false`. +disableInlineImports +: {{< new-in 0.147.4 />}} +: (`bool`) Whether to disable inlining of `@import` statements. Inlining is performed recursively, but currently once only per file. It is not possible to import the same file in different scopes (root, media query, etc.). Note that this import routine does not care about the CSS specification, so you can have `@import` statements anywhere in the file. Default is `false`. skipInlineImportsNotFound : (`bool`) Whether to allow the build process to continue despite unresolved import statements, preserving the original import declarations. It is important to note that the inline importer does not process URL-based imports or those with media queries, and these will remain unaltered even when this option is disabled. Default is `false`. |