css.TailwindCSS

css.TailwindCSS [OPTIONS] RESOURCE

resource.Resource

先决条件

要使用此函数，您必须安装 Tailwind CSS CLI v4.0 或更高版本。您可以将 CLI 作为 npm 包或独立可执行文件安装。有关详细信息，请参阅Tailwind CSS 文档。

选项

minify

（bool）是否优化和压缩输出。默认值为 false。

optimize

（bool）是否在不压缩的情况下优化输出。默认值为 false。

inlineImports

（bool）是否启用 @import 语句的内联。内联是递归执行的，但目前每个文件只执行一次。不可能在不同的作用域（根、媒体查询等）中导入同一个文件。请注意，此导入例程不关心 CSS 规范，因此您可以在文件中的任何位置使用 @import 语句。默认值为 false。

skipInlineImportsNotFound

（bool）启用 inlineImports 时，如果无法解析导入，我们将使构建失败。启用此选项以允许构建继续并将导入语句保留在原位。请注意，内联导入器不处理 URL 位置或带有媒体查询的导入，因此即使不启用此选项，这些导入也将保持原样。默认值为 false。

示例

在站点配置中定义缓存破坏器

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 集成的更多信息，请参阅此存储库。