Tailwind CSS

使用 Tailwind CSS 创建 CSS 样式。

配置参数

extensions string[]

Extensions processed by this plugin to extract the utility classes

Default:

[ ".html" ]

options object

Options passed to TailwindCSS.

See https://tailwindcss.com/docs/configuration

描述

此插件允许使用 Tailwind CSS 来生成您站点的样式。

它会分析页面的 HTML 代码，搜索 Tailwind 类并生成所需的 CSS 代码。

安装

Tailwind 在底层使用了 Postcss，因此您需要在您的 _config.ts 中同时导入这两个插件，并按照以下顺序使用它们：先 Tailwind，后 Postcss。原因是 Tailwind 需要在 Postcss 处理 CSS 文件之前从 HTML 页面中提取类。

import lume from "lume/mod.ts";
import tailwindcss from "lume/plugins/tailwindcss.ts";
import postcss from "lume/plugins/postcss.ts";

const site = lume();

site.use(tailwindcss(/* Options */));
site.use(postcss());

export default site;

请注意，Tailwind 需要在您的 CSS 代码中的某个地方使用 @tailwind 指令，才能输出生成的代码。例如，您可以创建包含以下代码的 styles.css 文件：

@tailwind base;
@tailwind components;
@tailwind utilities;

在您的主 html 文件（index.html、main.vto 等）中引用它：

// index.html | main.vto | else
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="/styles.css">
  </head>
...

请参阅 Tailwind 文档页面中有关 Tailwind 函数和指令的更多信息

配置

此插件接受一个配置对象，其中包含以下可用选项：

options: Tailwind 的配置对象，您可以在其中定义主题、插件等。请参阅 Tailwind 文档以获取更多信息。
extensions: Tailwind 将会分析以提取 css 类的文件扩展名。默认值为 [".html"]，但您可以添加 JavaScript 或 JSX 以从您的客户端组件中提取类名。

site.use(tailwindcss({
  // 从 HTML 和 JSX 文件中提取类
  extensions: [".html", ".jsx"],

  // 您的 Tailwind 选项，例如主题颜色和字体
  options: {
    theme: {
      colors: {
        blue: "#1fb6ff",
        purple: "#7e5bef",
        pink: "#ff49db",
      },
      fontFamily: {
        sans: ["Graphik", "sans-serif"],
        serif: ["Merriweather", "serif"],
      },
    },
  },
}));

与 Markdown 混合使用: @tailwindcss/typography 插件

要将 TailwindCSS 样式应用于 markdown 文件，需要使用 @tailwindcss/typography 插件。

import lume from "lume/mod.ts";
import postcss from "lume/plugins/postcss.ts";
import tailwindcss from "lume/plugins/tailwindcss.ts";
import typography from "npm:@tailwindcss/typography";

const site = lume();

site.use(tailwindcss({
  options: {
    plugins: [typography],
  },
}));

在您的 html 中，您应该使用 prose 类。

<article class="prose">
  {{ content }}
</article>