Twind

Styling css made-with simple by twind.

The smallest, fastest, most feature complete tailwind-in-js solution in existence.

Install

install external libs @nhttp/twind.

Deno

deno add @nhttp/twind

deno.land

// twind
import {...} from "https://deno.land/x/nhttp/lib/jsx/twind.ts";

// twind server
import {...} from "https://deno.land/x/nhttp/lib/jsx/twind-server.ts";

// twind stream
import {...} from "https://deno.land/x/nhttp/lib/jsx/twind-stream.ts";

npm

npx jsr add @nhttp/twind

Bun

bunx jsr add @nhttp/twind

Yarn

yarn dlx jsr add @nhttp/twind

pnpm

pnpm dlx jsr add @nhttp/twind

Usage

twind server

import nhttp from "@nhttp/nhttp";
import { type FC, renderToHtml } from "@nhttp/nhttp/jsx";
import { useTwindServer } from "@nhttp/twind/server";

useTwindServer();

const app = nhttp();

app.engine(renderToHtml);

app.get("/", () => <h1 className="mt-20">hello twind</h1>);

app.listen(8000, () => {
  console.log("> Running on port 8000");
});

twind stream

import nhttp from "@nhttp/nhttp";
import { type FC, renderToReadableStream } from "@nhttp/nhttp/jsx";
import { useTwindStream } from "@nhttp/twind/stream";

useTwindStream();

const app = nhttp();

app.engine(renderToReadableStream);

app.get("/", () => <h1 className="mt-20">hello twind</h1>);

app.listen(8000, () => {
  console.log("> Running on port 8000");
});

twind cdn

import nhttp from "@nhttp/nhttp";
import { type FC, renderToHtml } from "@nhttp/nhttp/jsx";
import { twind } from "@nhttp/twind";

const app = nhttp();

app.engine(renderToHtml);

app.use(twind());

app.get("/", () => <h1 className="mt-20">hello twind</h1>);

app.listen(8000, () => {
  console.log("> Running on port 8000");
});