TheCloud/hugoDocs
1
0
Fork 0
mirror of https://github.com/gohugoio/hugoDocs.git synced 2025-09-12 18:44:46 -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. 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
@ -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}
{{ with (templates.Defer (dict "key" "global")) }}
{{ with resources.Get "css/main.css" }}
{{ $opts := dict
"minify" (not hugo.IsDevelopment)
"inlineImports" true
}}
{{ $opts := dict "minify" (not hugo.IsDevelopment) }}
{{ with . | css.TailwindCSS $opts }}
{{ if hugo.IsDevelopment }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
@ -104,28 +103,6 @@ Call the partial template from your base template:
<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
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
{{ with (templates.Defer (dict "key" "global")) }}
{{ $t := debug.Timer "tailwindcss" }}
{{ with resources.Get "css/styles.css" }}
{{ $opts := dict
"inlineImports" true
"optimize" hugo.IsProduction
}}
{{ with resources.Get "css/main.css" }}
{{ $opts := dict "minify" (not hugo.IsDevelopment) }}
{{ with . | css.TailwindCSS $opts }}
{{ if hugo.IsDevelopment }}
<link rel="stylesheet" href="{{ .RelPermalink }}" />
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{ else }}
{{ with . | minify | fingerprint }}
<link
rel="stylesheet"
href="{{ .RelPermalink }}"
integrity="{{ .Data.Integrity }}"
crossorigin="anonymous" />
{{ with . | fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}
{{ end }}
{{ end }}
{{ end }}
{{ $t.Stop }}
{{ end }}
```