blogs/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2026-09-03 04:02:38 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
5be51ac3db225d5df501ed1fa1499c41d97dbf65
hugo/content/en/functions/css/TailwindCSS.md
T
Bjørn Erik Pedersen 5be51ac3db Squashed 'docs/' changes from d1a251933..dc7a9ae12 
dc7a9ae12 content: Update JS options
07d3d8803 npm: Use tilde ranges for versions
e06362a13 Minor grammar fixes
c42db0838 content: Algolia DocSearch clarification
d67412b82 deps: Upgrade to TailwindCSS 4.1.0
da1fb12d3 theme: Update Lato font path for images.Text example
140fa3bb9 Update introduction.md
7b1fcca27 content: Fix links to embedded template source
908a55532 theme: Improve dark mode syntax highlighting background
d830e5962 Update XxHash.md
807be5dbf Update Defer.md
4b56693f6 content: Update GitHub Pages sample workflow
57b766fba Update TailwindCSS.md
64982ab6a Update TailwindCSS.md
1b6e879c6 Update TailwindCSS.md
e67cbcdd2 content: Add caching to the GitHub Pages workflow example
b7ca3b07c Update index.md
14e1a3977 Update XxHash.md
980f344ae Update XxHash.md
6b815f03e theme: Remove aria-label attribute from links
1c00bbc45 theme: Update npm dependencies
533149bf9 theme: Include section pages in related content
2b6bda6bd content: Fix typos
92ce95cbb content: Miscellaneous edits
f12936681 theme: Add a simple LRU cache for search
339ca3388 Fix the previous broken commit
8537e59e0 Make it into a non-link
e13f17d29 Add Algolia logo/link to the search listing dialog
d3e09e886 content: Fix typo
7217f64b6 content: Miscellaneous edits
51aa1ae73 content: Improve some examples
8ebaa53f9 theme: Adjust shortcodes
898870438 theme: Hide anchor until mouse-over
c933ea237 content: More front matter cleanup
f26ca047a content: Miscellaneous edits
e272b2039 theme: Fix inline partial refs
c540e6d29 content: Replace note shortcode calls with blockquote alerts
aef899bc5 theme: Add title and QR code when printing
bd46ef626 theme: Implement blockquote render hook
ddefbefaa content: Improve contributing page
f41d28ee1 content: Adjust usage of whitespace removal with action delimiters
03315336d theme: Use full title in related content sidebar
4f4076364 misc: Document the front matter fields used on this site
2f78d7632 misc: Fix gitignore file
7de6dbab3 content: Fix front matter for several function pages
5d3542ea6 config: Disable tags taxonomy
68bc28d67 content: Add linkTitle to shortcode pages
5f32c92ed theme: Restore deduplication logic for related items
a943a4bb8 theme: Implement related content tooling
fd628be6e content: Replace calls to the code shortcode with fenced code blocks
b23c9a583 content: Fix position of new-in badges
ec056f251 content: Fix typo
245351c84 theme: Adjust spacing in highlighting theme examples
2fcd21ee5 content: Remove "related" array from function and method pages
71d8426ee theme: Create code block render hook
4cdde6649 theme: Adjust number of news items to display
34ab45261 content: Miscellaneous edits
b6cae5cbc content: Consolidate configuration documentation
727ef6f66 theme: Fix overflow issue for wide tables
c4f759e01 Add es2024
93cce62c8 Update support list of more recent targets with js.Build / esbuild
974d0655f Update hosting-on-codeberg.md
b3f0ed9ce content: Add hosting instructions for Codeberg Pages
8217c0900 content: Correct the SourceHut repository URL
a8cf3d28f content: Add hosting instructions for SourceHut Pages
8c059cbe1 theme: Use content adapter for news section
03938c600 Remove some old new-in
5c50a75e8 content: Fix typo
5cf89f2f6 theme: Re-enable banner gtag outbound link tracking
3c555d5f8 One more copy button
94bce999a Add some copy buttons
9e1cc0c2b Update PortableText.md
dd26ac49f Document transform.PortableText
5f632ab32 netlify: Hugo 0.145.0
59e057bb4 Update index.md
d07e07d6c Remove some unused home page front matter
d482657b7 Add footnote about alias to the build front matter key
f0629b77c content: Fix typo
d91c4cccf theme: Fix news items URLs
ca931cd1f theme: Restore RSS feed for news section
e6b870bc9 theme: Adjust copy-to-clipboard button
071851431 Update netlify.toml
e68431034 theme: Format layouts
aa3cd839a theme: Format assets
22ad3eee3 theme: Add some more space on the right for copy buttons
f4a19083a netlify: Hugo 0.144.1
974cb8795 theme: Remove Internet Explorer configs (#2929)
4a23a1f41 content: Fix typos
d49f15d03 theme: Get the scrollspy back working
720c7ff67 config: Evict getresource cache hourly
1f62ca97e theme: Hide the Turbo progress bar
f6449ace3 Move the dark class up to the html element
074cd1a07 content: Miscellaneous edits
e098a7716 content: Miscellaneous edits
8e1e104aa content: Updates for v0.144.0
18e1aa916 theme: Add anchor links via JS
ac3b5505c Close new-in
bfa4db6b8 netlify: Hugo 0.144.0
fd6e7feee Regen CLI docs
da9d1218a Regen docs helper
5de494ded Merge branch 'tempv0.144.0'
f683e6469 theme: Minor improvements to base template
ef8bf89d8 resources/page: Revise the new contentbasename permalinks tokens
901adb07b resources/page: Add :contentbasename and :contentbasenameorslug permalink tokens
0fca8ef25 all: Change shortcode usage and design to prevent invalid HTML
c41d76613 Update RegularPagesRecursive.md
e93574748 content: Correct return type for strings.Split
3d504abba Revert "content: Add ids to the Netlify steps"
c08c8e15e content: Add ids to the Netlify steps
5a3b470a2 theme: "move" the id from content to article
b878613aa theme: Add page kind as a CSS class to body
269657e8f content: Fix formatting error
664f6c92f config: Change image cache location
fa6b719b1 theme: Reduce ToC to level 2-4
bc16341ca theme: Render mathematical markup with transform.ToMath
14bf9dc70 theme: Add aria-label attribute to search fields
ed42af5b3 theme: Adjust search field and search activation
f042e4970 dev: Add prettier-plugin-void-html
f6ec83533 content: Fix inline shortcode example
0a74210e2 theme: Remove readfile shortcode
334ca06ac theme: Fix some dark mode accessibility as reported by Axe core
02626ff92 theme: aria-lbabel => aria-label
227b76ab7 Add Prettier and config
43ab22428 content: Bump minimum required Go version to 1.23.0
03e54683f modules: Add GOAUTH to module config
9f06a3b9c js/esbuild: Add drop option
ddcd99369 Merge commit 'a024bc7d76fcc5e49e8210f9b0896db9ef21861a'
733731253 helpers: Add Chroma styles to docs.yaml

git-subtree-dir: docs
git-subtree-split: dc7a9ae127
2025-04-10 13:02:49 +02:00

4.3 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

{{< 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.
  2. Compile those utility classes into standard CSS.
  3. Generate an optimized CSS output file.

Caution

Tailwind CSS v4.0 and later requires a relatively modern browser to render correctly.

Setup

Step 1

Install the Tailwind CSS CLI v4.0 or later:

npm install --save-dev tailwindcss @tailwindcss/cli

The TailwindCSS CLI is also available as a standalone executable if you want to use it without installing Node.js.

Step 2

Add this to your site configuration:

{{< code-toggle file=hugo copy=true >}} module.mounts source = "assets" target = "assets" module.mounts source = "hugo_stats.json" target = "assets/notwatching/hugo_stats.json" disableWatch = true [build.buildStats] enable = true build.cachebusters source = "assets/notwatching/hugo_stats\.json" target = "css" build.cachebusters source = "(postcss|tailwind)\.config\.js" target = "css" {{< /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 (templates.Defer (dict "key" "global")) }}
  {{ with resources.Get "css/main.css" }}
    {{ $opts := dict
      "minify" hugo.IsProduction
      "inlineImports" true
    }}
    {{ with . | css.TailwindCSS $opts }}
      {{ if hugo.IsProduction }}
        {{ with . | fingerprint }}
          <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
        {{ end }}
      {{ else }}
        <link rel="stylesheet" href="{{ .RelPermalink }}">
      {{ end }}
    {{ end }}
  {{ end }}
{{ end }}

Step 5

Call the partial template from your base template:

<head>
  ...
  {{ partialCached "css.html" . }}
  ...
<head>

Step 6

Optionally create a tailwind.config.js file in the root of your project as shown below. This is necessary if you use the Tailwind CSS IntelliSense extension for Visual Studio Code.

/*
This file is present to satisfy a requirement of the Tailwind CSS IntelliSense
extension for Visual Studio Code.

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

The rest of this file is intentionally empty.
*/

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.
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 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.
Reference in New Issue View Git Blame Copy Permalink