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

blogs/hugo

mirror of https://github.com/gohugoio/hugo.git synced 2026-09-03 04:02:38 +00:00

Files

T

Bjørn Erik Pedersen a024bc7d76 Squashed 'docs/' changes from 73a01565c..d1a251933

d1a251933 theme: Optimize for printing
d906488d5 theme: Add border to highlighted code blocks within list items
9630c38cb theme: Display short command on commands list
7f81dd997 content: Regen commands markup
a84008e99 content: Cleanup primary list page
0874b03e9 content: Publish QR code examples to the images/qr directory
ef1ce3498 Restore static/img
489a68458 content: Restore KeyCDN screen captures
7d6e6184b theme: Move search button in navbar to the right on smaller screens
b03b96082 theme: Misc style adjustments
ecad97821 theme: Misc fixes
cf5e07b0f content: Restore example data and images
c7265041f content: Reformat css.TailwindCSS setup steps
3226e668f theme: Make the search button more compact on mobile
1f6614ee8 content: Update css.TailwindCSS example
49a2e7d71 theme: Improve search output
7e6b81ffa misc: Create issue template
826740223 theme: Misc search improvements
75f32b2f6 theme:  Remove the search alert
fd3de4ac2 config: Enable link render hook warnings
769e387cd Adjust logic to mark current section for Algolia
ba73ce646 Adjust markup to make it easier to match in Algolia
5accec5f1 Misc adjustments
eb5842566 Some content adjustments
bdf97b7b4 Add new theme
b19d68ee5 Remove old theme
a04e96e55 Rewrite the css.TailwindCSS page
1c46f1864 Update deprecation notes
aedcb444c Fix typo
c3290b876 Changes related to release of v0.144.0
a0012fcce netlify: Hugo 0.143.1
9e4d73e87 Include sections in quick-reference page collection
4591058f5 Miscellaneous edits
612b8528f glossary: More edits
1f0c54e60 Fit typo
6f14084c1 Move glossary to quick reference section
2d94905be Improve branch bundle admonition
2ea56bef3 Fix typos found with codespell
71c5fe951 Close shortcode
e95d06592 Document the responseHeaders option for resources.GetRemote
da7c12aaa Deprecate gist shortcode
c2d3e2c25 netlify: Bump to 0.143.0
367d3a7ab Improve new-in shortcode
1a7413a16 Clean up shortcode documentation
d847892aa Improve glossary
6a7fd42ff Update pages describing Store methods and functions
fa7643d1b Revert "Improve link render hook performance"
fe4c86ec4 Reformat MathJax example
cea44922a Update MathJax example to use safe mode
0b6d0292c Update KaTeX example to use latest version
fd4508645 Improve link render hook performance
23aeb5bd0 Update purgecss example
f7ef83e56 Refer each Hugo Pipe page to the corresponding function
81b91ef4e Remove related pages from pages for deprecated functions and methods
53c7627d5 Remove body from deprecated functions and methods
d9cf034c8 Consolidate css.ToCSS information
b7ed108f9 Improve js.Build example and presentation of options
86a4a5088 Improve babel example and description of options
d1874c5f5 Consistently use "edition" when referring to standard, extended, etc.
92f03a350 Revise description of privacy settings
152a92d80 Update Last.md
82a2365bd Add print-only QR code example
d22cadc25 Update mathematics.md
b8160af03 Delete page self-reference in page/type.md
ce24fe4e0 Update param.md
51cb92180 Improve description of output format template selection
78bcf358e Update Tailwind CSS npm package version to 4.0
2ca9da4af Include winget command to uninstall

git-subtree-dir: docs
git-subtree-split: d1a2519330

2025-02-13 10:40:34 +01:00

4.3 KiB

Raw Blame History

title, description, categories, keywords, action, toc

title

description

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:

{{< code file=assets/css/main.css copy=true >}} @import "tailwindcss"; @source "hugo_stats.json"; {{< /code >}}

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:

{{< code file=layouts/partials/css.html copy=true >}} {{ 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 }} {{ end }} {{ else }} {{ end }} {{ end }} {{ end }} {{ end }} {{< /code >}}

Step 5

Call the partial template from your base template:

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

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.

{{< code file=tailwind.config.js copy=true >}} /* 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. */ {{< /code >}}

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) When inlineImports is enabled, we fail the build if an import cannot be resolved. Enable this option to allow the build to continue and leave the import statement in place. Note that the inline importer does not process URL location or imports with media queries, so those will be left as-is even without enabling this option. Default is false.

4.3 KiB Raw Blame History