blogs/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2026-08-24 15:28:54 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
c23d97904fd31ef745bece57133aa1b9275ec20c
hugo/content/en/functions/css/TailwindCSS.md
T
Bjørn Erik Pedersen c23d97904f Squashed 'docs/' changes from 0755fb534d..1f8ddb8a52 
1f8ddb8a52 content: clarify resources front matter key descriptions
e064ab8528 content: Add deprecation badges to module config page
727ca5563a github: Add push trigger to lint workflow
64dd5c9886 content: Fix typo
c5bc6b6515 github: Fix lint workflow
faec0c3a0a github: Combine linting actions into a single workflow
06112aeaf2 theme: Miscellaneous template edits
75d4902270 theme: Format templates with gotmplfmt
fec2e2a67e content: Document that the language code in a file name must be lowercase
9dbd841ba6 content: Document the src attribute in the Page Resources metadata reference
fd3ffef985 content: Fix "build from source" instructions for Windows
af4c9cd4d7 content: Miscellaneous edits
408d8b2f0a content: Miscellaneous edits
e8804afe6e content: Fix typo
d98276be30 content: Updates for v0.161.0
01b1f8fa12 content: Note merge limitation for slice configuration values
d2b18f0c8d content: Document page matcher usage for cascading values
45e5bd9ab3 content: Update Cloudflare Worker host/deploy guide
b83726b89a content: Document fallback rendering for fenced code blocks
8f1eeb42bc content: Update reference for source code shortcode
e8da56303b content: Add gotmplfmt to list of VS Code extensions
950fabbfd6 content: Update FAQ on feature availability error
6411146d24 content: Update quick start guide
38cc39fd51 content: Add Hugo Shortcodes to list of VS Code extensions
72d98b107b content: Misc updates to get validators to pass
9fb0e1ca35 Add a paragraph about sec boundaries
e6abf5644f content: Improve syntax highlighting documentation
c06193bd1a content: Update go-i18n package reference
ce58fef945 Hugo 0.161.1
c7e0f63385 content: Fix package references
7f15fb3bf9 data: Regen docshelper
7483d53b55 Update HUGO_VERSION to 0.161.0
c4abcdb45f security: Add a bullet point about "pragmatic defaults"
3cd7492862 content: Improve explanation of mount removal in module configurations
4099f07bb9 content: Update GitHub Pages workflow example
a6c9853a58 content: Fix typo
e6f79a938b Update netlify.toml
abda3d6659 content: Update Action versions in GitHub Pages workflow example
55dd288fa9 content: Add GitCMS to front-ends tools list
21081f6d49 content: Remove outdated new-in badges
b2ec263884 content: Update version references
825e0b8ea9 One more CSS var adjustment
85f95a899b Adjust css.Build var docs a little
df48288002 content: Updates for v0.160.0
a82a9b9797 Update HUGO_VERSION to 0.160.0
1155747dc4 content: Improve CSS processing feature description
f6ce893974 content: Add css.Build to features
67b8ed1198 content: Fix typos
0f62a67863 content: Fix typo
dbb42aed4a content: Document the deploy edition
549f30f933 content: De-emphasize references to the extended edition
8f5c9782d4 content: Add Pages CMS to front-ends documentation
b2bfc3af48 Update HUGO_VERSION to 0.159.2
3793156fc5 content: Fix typos
bacd4824ef content: Specify function namespace in example
7f2dc0d40a Regen docs.yml
65a851f731 Update HUGO_VERSION to 0.159.1
ce05fe3fc0 content: Adjust variable references in build script examples
8a04f9fe64 content: Improve hosting build script examples
67962ce05c content: Link to Codeberg Pages 404 handling
fd248f57ed content: Identify esbuild as the foundation for build functions
62f02879fd content: Remove outdated content
553c407f9e content: Miscellaneous corrections
77e2cad088 content: Add new-in badge for usePackageJSON
0746e1e621 Add a page on using npm dependencies in Hugo Modules
8824850f5c Update HUGO_VERSION to 0.159.0

git-subtree-dir: docs
git-subtree-split: 1f8ddb8a5230518f07c50b4b03cba3cae21081c4
2026-05-21 12:22:48 +02:00

5.2 KiB
Raw Blame History

title, description, categories, keywords, params
title description categories keywords params
css.TailwindCSS Processes the given resource with the Tailwind CSS CLI.
functions_and_methods
aliases returnType signatures
resource.Resource
css.TailwindCSS [OPTIONS] RESOURCE

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.
  2. Compile those utility classes into standard CSS.
  3. 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.

Setup

Step 1
Install Tailwind CSS v4.0 or later: 
npm install --save-dev tailwindcss @tailwindcss/cli @tailwindcss/typography

Note

As of v0.161.0, Hugo no longer supports the Tailwind standalone binary. You must now install the Tailwind CSS CLI via npm as shown above.

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: 
@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: 
{{ 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: 
<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.

Inject CSS variables with vars

The css.Build function has a vars option that can be used to inject CSS variables into your stylesheets. This is particularly useful for dynamically setting values based on your site's configuration or other data. To use this with Tailwind CSS, you can use css.Build as a preprocessor step before passing the result to css.TailwindCSS. Here's how you can do it:

{{ with resources.Get "css/styles.css" }}
  {{ $cssOpts := dict
    "vars" (dict "favourite-color" "#7f93c9")
    "externals" (slice "tailwindcss")
  }}
  {{ $tailwindOpts := dict "disableInlineImports" true }}
  {{ with . | css.Build $cssOpts | css.TailwindCSS $tailwindOpts }}
    <link rel="stylesheet" href="{{ .RelPermalink }}">
  {{ end }}
{{ end }}

Some notes to the above:

  • Marking tailwindcss as an external in the css.Build options prevents it from being processed by the build step, allowing it to be correctly handled by the Tailwind CSS CLI in the subsequent step.
  • The disableInlineImports option is set to true for the Tailwind CSS step as imports are handled by the css.Build.
Reference in New Issue View Git Blame Copy Permalink