css.TailwindCSS
Syntax
css.TailwindCSS [OPTIONS] RESOURCE
Returns
resource.Resource
Prerequisites
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.
Options
- minify
- (
bool
) Whether to optimize and minify the output. Default isfalse
. - optimize
- (
bool
) Whether to optimize the output without minifying. Default isfalse
. - 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 isfalse
. - skipInlineImportsNotFound
- (
bool
) WheninlineImports
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 isfalse
.
Example
Define a cache buster in your site configuration:
hugo.
build:
cachebusters:
- source: layouts/.*
target: css
[build]
[[build.cachebusters]]
source = 'layouts/.*'
target = 'css'
{
"build": {
"cachebusters": [
{
"source": "layouts/.*",
"target": "css"
}
]
}
}
Process the resource:
{{ 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.