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

content: Update css.TailwindCSS opts

Browse Source
This commit is contained in:
Joe Mooring 2025-05-23 21:23:22 -07:00 committed by GitHub
parent b3ba4329c3
commit be80c3b82f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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. Compile those utility classes into standard CSS.
1. Generate an optimized CSS output file. 1. Generate an optimized CSS output file.
> [!caution] > [!note]
> Tailwind CSS v4.0 and later requires a relatively [modern browser](https://tailwindcss.com/docs/compatibility#browser-support) to render correctly. > 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 ## Setup
@ -75,10 +77,7 @@ Create a partial template to process the CSS with the Tailwind CSS CLI:
```go-html-template {file="layouts/partials/css.html" copy=true} ```go-html-template {file="layouts/partials/css.html" copy=true}
{{ with (templates.Defer (dict "key" "global")) }} {{ with (templates.Defer (dict "key" "global")) }}
{{ with resources.Get "css/main.css" }} {{ with resources.Get "css/main.css" }}
{{ $opts := dict {{ $opts := dict "minify" (not hugo.IsDevelopment) }}
"minify" (not hugo.IsDevelopment)
"inlineImports" true
}}
{{ with . | css.TailwindCSS $opts }} {{ with . | css.TailwindCSS $opts }}
{{ if hugo.IsDevelopment }} {{ if hugo.IsDevelopment }}
<link rel="stylesheet" href="{{ .RelPermalink }}"> <link rel="stylesheet" href="{{ .RelPermalink }}">
@ -104,28 +103,6 @@ Call the partial template from your base template:
<head> <head>
``` ```
### Step 6
> [!note]
> The following step is only neccesary for Tailwind v3 and earlier.
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.
*/
```
## Options ## Options
minify minify

19
content/en/functions/templates/Defer.md
View File

@ -20,27 +20,18 @@ In some rare use cases, you may need to defer the execution of a template until
```go-html-template ```go-html-template
{{ with (templates.Defer (dict "key" "global")) }} {{ with (templates.Defer (dict "key" "global")) }}
{{ $t := debug.Timer "tailwindcss" }} {{ with resources.Get "css/main.css" }}
{{ with resources.Get "css/styles.css" }} {{ $opts := dict "minify" (not hugo.IsDevelopment) }}
{{ $opts := dict
"inlineImports" true
"optimize" hugo.IsProduction
}}
{{ with . | css.TailwindCSS $opts }} {{ with . | css.TailwindCSS $opts }}
{{ if hugo.IsDevelopment }} {{ if hugo.IsDevelopment }}
<link rel="stylesheet" href="{{ .RelPermalink }}" /> <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ else }} {{ else }}
{{ with . | minify | fingerprint }} {{ with . | fingerprint }}
<link <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
rel="stylesheet"
href="{{ .RelPermalink }}"
integrity="{{ .Data.Integrity }}"
crossorigin="anonymous" />
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ $t.Stop }}
{{ end }} {{ end }}
``` ```