css.TailwindCSS

New in v0.128.0

先決條件

要使用此功能，必須安裝 Tailwind CSS CLI v4.0 或更高版本。您可以將 CLI 作為 npm 套件安裝，或作為獨立可執行文件安裝。詳細資訊請參見 Tailwind CSS 文檔。

選項

minify
(bool) 是否優化並縮小輸出的檔案。預設為 false。
optimize
(bool) 是否在不縮小檔案的情況下優化輸出。預設為 false。
inlineImports
(bool) 是否啟用 @import 語句的內聯處理。內聯處理是遞歸進行的，但目前每個檔案只進行一次。無法在不同範圍（根目錄、媒體查詢等）中導入相同的檔案。請注意，這個導入程式不考慮 CSS 規範，因此您可以在檔案中的任何位置包含 @import 語句。預設為 false。
skipInlineImportsNotFound
(bool) 當啟用 inlineImports 時，如果無法解析 @import，則建構過程會失敗。啟用此選項可以讓建構繼續並保留原始的 @import 語句。請注意，內聯導入程式不會處理 URL 位置或帶有媒體查詢的導入，因此即使不啟用此選項，這些也會保持原狀。預設為 false。

範例

在網站配置中定義一個 cache buster：

hugo.
      
build:
  cachebusters:
  - source: layouts/.*
    target: css

[build]
  [[build.cachebusters]]
    source = 'layouts/.*'
    target = 'css'

{
   "build": {
      "cachebusters": [
         {
            "source": "layouts/.*",
            "target": "css"
         }
      ]
   }
}

處理資源：

{{ with resources.Get "css/main.css" }}
  {{ $opts := dict "minify" true }}
  {{ 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 }}

上面的範例將處理並將縮小後的 CSS 檔案發佈至 public/css/main.css。

有關 Tailwind CSS v4.0 整合的更多資訊，請參見 此資料庫。

CurrentSection css.PostCSS