本页内容

使用 Twind 与 Deno

Twind 是一个 tailwind-in-js 解决方案，用于使用 Tailwind。Twind 在 Deno 的服务器环境中特别有用，在该环境中，Tailwind 和 CSS 可以轻松地进行服务器端渲染，生成动态、高效的 CSS，同时具有使用 Tailwind 进行样式设置的可用性。

基本示例 跳转到标题

在以下示例中，我们将使用 twind 进行服务器端渲染 HTML 页面并将其记录到控制台。它演示了如何使用分组的 Tailwind 类，并仅使用文档中指定的样式进行渲染，而无需客户端 JavaScript 来完成 tailwind-in-js。

import { extract, install } from "https://esm.sh/@twind/[email protected]";
import presetTailwind from "https://esm.sh/@twind/[email protected]";

install({
  presets: [
    presetTailwind(),
    {
      theme: {
        fontFamily: {
          sans: ["Helvetica", "sans-serif"],
          serif: ["Times", "serif"],
        },
      },
    },
  ],
});

function renderBody() {
  return `<!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Hello from Deno</title>
      </head>
      <body class="font-sans">
        <h1 class="text(3xl blue-500)">Hello from Deno</h1>
        <form>
          <input name="user">
          <button class="text(2xl red-500)">
            Submit
          </button>
        </form>
      </body>
    </html>
  `;
}

function ssr() {
  const body = renderBody();
  const { html, css } = extract(body);
  return html.replace("</head>", `<style data-twind>${css}</style></head>`);
}

console.log(ssr());

https://twind.style/packages/@twind/core#extract