hugo/content/en/functions/css/TailwindCSS.md at bb147f91ee9078e6a55e8c32ab4b2e5dbc5cee45

blogs/hugo

mirror of https://github.com/gohugoio/hugo.git synced 2026-09-03 12:12:37 +00:00

Files

T

Bjørn Erik Pedersen bb147f91ee Squashed 'docs/' changes from b654fcba0..60dd993a6

60dd993a6 content: Update GitHub Pages workflow
6247e3590 content: Fix typo
a22255b0b content: Update version references
21afec198 content: Update version reference
6226532c8 content: Update version reference
80d26621a content: Update version reference
cda7135b5 content: Fix typo
70c509e8a content: Fix typo
136b20310 content: Change render hook example
038246c2f content: Fix accidental removal
441375fa4 netlify: Hugo 0.147.9
4a620931c content: Note that config/env/cascade.xxx is not supported
6d3a7587f config: Ignore front matter param override warnings
623b48624 content: Set searchable param to false for content/en/documentation.md
d1b2aad69 content: Fix Codeberg deployment article
5e3d849b8 search: Use front matter parameter to control search indexing
b4f90e39d content: Note that PATH segments must exclude project directory
a81406e26 content: Create aliases for deleted template pages
7c3adc9ad content: Change order of template types
e093eb036 content: Remove admonition from template types page
0015e7a9b content: Update to align with v0.146.0 template system (phase 1)
cf986240d content: Update templates.Defer note
ab51fdcc7 content: Use consistent templates.Defer examples
b4f8e492f content: Fix formatting
62aa94add content: Fix typo
83747f36b content: Update FAQs
fc644d894 Update netlify.toml
4151f3a5b content: Fix typo
9452bca92 content: Update description ToMath strict option
982b863c3 content: Add instructions about deploying to root of user's Codeberg Pages
fc7cd2878 theme: Generate QR code once per page
784891b87 content: Update links to the CommonMark specification
741113fb5 content: Fix incorrect link to Shortcodes tutorial
c4962f1ac content: Update transform.ToMath
ad7b87223 Update netlify.toml
2d64e57ae theme: Remove bullet from new-in badge
55a832f8e Update ToMath.md
e1e624f49 content: Document transform.ToMath strict mode
2df6218f8 netlify: Hugo 0.147.6
0259b88f1 Revert "theme: Display date on news items from content adapter"
43b35e56a theme: Adjust admonition dark mode colors
2f15e9c34 theme: Add link to Mastodon
d99e979d4 theme: Display date on news items from content adapter
6c93dac97 content: Clarify the AddResource content value
49006468e content: Describe Codeberg's Forgejo Actions
be80c3b82 content: Update css.TailwindCSS opts
b3ba4329c theme: Update css.TailwindCSS opts and remove tailwind.config.js
902e360b0 content: Update stylesheet link for katex.js
8b9e1ba3e content: Update stylesheet link for katex.js
7dae3b0e8 content: Update TailwindCSS instructions
cb093d210 Update netlify.toml
577d6fbb1 content: Remove GitCMS for now
8352af6cd Updates for v0.147.4
2240f07a5 content: Fix typo
677b3fed3 Correct openapi3.Unmarshal example
580477aa5 content: Fix typo
0dc43b481 content: Add GitCMS to commercial front ends list
ac4179f2b content: Fix relref shortcode examples
a699d267b Fix typos
7e28c4380 Make sponsor logo responsive
8e05f0425 Update MaxInt64.md
f715265d3 content: Document math.MaxInt64
0d57ff7d4 Update netlify.toml
d210e3476 theme: Adjust sponsor
e73444b43 content: Clarify page title values
fd4c292b8 content: Fix links to Pandoc
dd074dc67 content: Bump version in GitHub Pages example
fe5537bb2 content: Describe the pandoc format
10834529e theme: Remove duplicate meta element
838706d6e theme: More changes related to new template system
b0b6b1e69 Update new-templatesystem-overview.md
e719d2360 Update new-templatesystem-overview.md
ec2bbd395 Update new-templatesystem-overview.md
53319a681 Add a one pager about the new template system
e17416c05 Fix the spelling issue on the Host on Render description
e8e1c82aa content: Document range-over-int introduced in v0.123.0
bc478f98f content: Fix editing errors
606547b48 Update netlify.toml
e224f3f82 content: Fix formatting
24e4acc41 content: Fix typo
1e773f34b content: Fix typo
5ef94a725 content: Document alternative to shuffle for large collections
7fe42d76c content: Fix sample code formatting
5d601448f content: Update mathematical markup guidance
63b4fe2c0 content: Update version references
722da91f1 content: Fix GO_VERSION in Netlify hosting example
8cc589c3a theme: Add current Hugo version to the header
37aa24ac5 netlify: Hugo 0.147.1
a80b25e24 content: Remove dated new-in
89dcf0f92 content: Fix path formatting
1a5191d78 content: Update transformation examples
3327065ab Update Text.md
557c10dd2 content: Miscellaneous updates for v0.147.0
0dae1a185 netlify: Hugo 0.147.0
9b44821c3 Merge branch 'tempv0.147.0'
f1481e8c3 content: Update GitLab Pages workflow example
2e61a0360 content: Update content format descriptions
fb42d7c2a images: Add option for vertical alignment to images.Text

git-subtree-dir: docs
git-subtree-split: 60dd993a65

2025-07-07 13:16:31 +02:00

4.0 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

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 site 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";
@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.0 KiB Raw Blame History