mirror of
https://github.com/gohugoio/hugo.git
synced 2026-08-24 15:28:54 +00:00
Bjørn Erik Pedersen
0c2fa2460f
80dd7b067 theme: Fix border class in render-codeblock template 0d3fde6c9 content: Fix typo 23a4adb29 content: More site => project changes 9243e9f6b content: Rename site configuration to project configuration (phase 2) 330aa2249 content: Miscellaneous edits 25ce893be content: Clarify sort order with PAGE.Rotate b398506dc content: Various dimension improvements c54573d13 content: Use singular form in method section descriptions d9a95fe54 content: Improve description of PAGE.Rotate 154f30600 content: Fix link c71bd2776 content: Address Markdown linting error 72c88e68e content: Improve pages related to content dimensions b85afa645 content: Fix formatting 7aaca8947 content: More site-to-project changes 8e1579030 content: Update quick start guide f7ba1fde2 content: Make new-in into a note 8b9d51584 theme: Address TailwindCSS warnings 3a4c2a25c theme: Address Hugo v0.156.0 deprecations 4f1a2bd7b content: Improve glossary entries 21bcd23a6 content: Update glossary entry c72ef1116 content: Update quick start guide c0737ffab content: Add typography plugin to TailwindCSS example 80bcb868e content: Remove Site.AllPages from examples 2b9ba5831 content: Replace Page.Sites and Site.Sites with hugo.Sites 2cdcc2556 content: Remove outdated badges 5a4beb530 content: Replace Site.Data with hugo.Data de4651b5d content: Update glossary entry 2302825a7 content: Add hugo.Data and note other deprecations bac5da4b5 content: Add hugo.Sites and update the other Sites methods 0f7d99153 content: Add Site.IsDefault f888f33bb content: Update glossary entries 65311c2de content: Include the "build" subcommand where appropriate 4991320d2 content: Standard shell language code in info strings b16d9f162 theme: Style todo lists f121450c6 content: Update version references 5a81dd8c2 content: Update CLI documentation f3ae0ce86 content: Rename site configuration to project configuration (phase 1) 9c8327119 content: Miscellaneous edits fbff91e22 Update HUGO_VERSION to 0.156.0 2ec625ae8 content: Restore snap installation instructions fc8c246b8 content: Clarify module initialization git-subtree-dir: docs git-subtree-split: 80dd7b067c31c28b13c51f3ac4636890509a4bb7
118 lines
4.1 KiB
Markdown
118 lines
4.1 KiB
Markdown
---
|
|
title: css.TailwindCSS
|
|
description: Processes the given resource with the Tailwind CSS CLI.
|
|
categories: []
|
|
keywords: []
|
|
params:
|
|
functions_and_methods:
|
|
aliases: []
|
|
returnType: resource.Resource
|
|
signatures: ['css.TailwindCSS [OPTIONS] RESOURCE']
|
|
---
|
|
|
|
{{< new-in 0.128.0 />}}
|
|
|
|
Use the `css.TailwindCSS` function to process your Tailwind CSS files. This function uses the Tailwind CSS CLI to:
|
|
|
|
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.
|
|
|
|
> [!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
|
|
|
|
Step 1
|
|
: Install the Tailwind CSS CLI v4.0 or later:
|
|
|
|
```sh {copy=true}
|
|
npm install --save-dev tailwindcss @tailwindcss/cli @tailwindcss/typography
|
|
```
|
|
|
|
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
|
|
|
|
Step 2
|
|
: Add this to your project configuration:
|
|
|
|
{{< code-toggle file=hugo copy=true >}}
|
|
[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
|
|
: Create a CSS entry file:
|
|
|
|
```css {file="assets/css/main.css" copy=true}
|
|
@import "tailwindcss";
|
|
@plugin "@tailwindcss/typography";
|
|
@source "hugo_stats.json";
|
|
```
|
|
|
|
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:
|
|
|
|
```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 }}
|
|
{{ end }}
|
|
```
|
|
|
|
Step 5
|
|
: 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/baseof.html" copy=true}
|
|
<head>
|
|
...
|
|
{{ with (templates.Defer (dict "key" "global")) }}
|
|
{{ partial "css.html" . }}
|
|
{{ end }}
|
|
...
|
|
</head>
|
|
```
|
|
|
|
## Options
|
|
|
|
minify
|
|
: (`bool`) Whether to optimize and minify the output. Default is `false`.
|
|
|
|
optimize
|
|
: (`bool`) Whether to optimize the output without minifying. 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`.
|