hugo/content/en/functions/css/TailwindCSS.md at 0c2fa2460f485e0eca564dcccf36d34538374922

blogs/hugo

mirror of https://github.com/gohugoio/hugo.git synced 2026-08-24 15:28:54 +00:00

Files

T

Bjørn Erik Pedersen 0c2fa2460f Squashed 'docs/' changes from 42914c50e..80dd7b067

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

2026-02-24 21:38:42 +01:00

4.1 KiB

Raw Blame History

title, description, categories, keywords, params

title

description

Setup

Step 1

Install the Tailwind CSS CLI v4.0 or later:

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.

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.

4.1 KiB Raw Blame History

Setup

Options

4.1 KiB

Raw Blame History