diff --git a/runtime/_data.ts b/runtime/_data.ts index 8fe2b1ac9..efdc9d298 100644 --- a/runtime/_data.ts +++ b/runtime/_data.ts @@ -84,7 +84,6 @@ export const sidebar = [ "/runtime/manual/advanced/jsx_dom/overview/", "/runtime/manual/advanced/jsx_dom/jsx/", "/runtime/manual/advanced/jsx_dom/css/", - "/runtime/manual/advanced/jsx_dom/twind/", "/runtime/manual/advanced/jsx_dom/jsdom/", "/runtime/manual/advanced/jsx_dom/deno_dom/", "/runtime/manual/advanced/jsx_dom/linkedom/", diff --git a/runtime/manual/advanced/jsx_dom/index.md b/runtime/manual/advanced/jsx_dom/index.md index 8921a627f..ae941995c 100644 --- a/runtime/manual/advanced/jsx_dom/index.md +++ b/runtime/manual/advanced/jsx_dom/index.md @@ -11,4 +11,3 @@ Deno, including: - [Using deno-dom with Deno](./deno_dom.md) - [Using JSDOM with Deno](./jsdom.md) - [Parsing and Stringifying CSS](./css.md) -- [Using Twind with Deno](./twind.md) diff --git a/runtime/manual/advanced/jsx_dom/overview.md b/runtime/manual/advanced/jsx_dom/overview.md index c24ae068a..0cca63065 100644 --- a/runtime/manual/advanced/jsx_dom/overview.md +++ b/runtime/manual/advanced/jsx_dom/overview.md @@ -96,4 +96,3 @@ Cascading Style Sheets (CSS) provide styling for HTML within the DOM. There are tools which make working with CSS in a server side context easier and powerful. - [Parsing and stringifying CSS](./css.md) -- [Using Twind with Deno](./twind.md) diff --git a/runtime/manual/advanced/jsx_dom/twind.md b/runtime/manual/advanced/jsx_dom/twind.md deleted file mode 100644 index 903ad394f..000000000 --- a/runtime/manual/advanced/jsx_dom/twind.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: "Using Twind with Deno" -oldUrl: /runtime/manual/jsx_dom/twind/ ---- - -[Twind](https://twind.style/) is a _tailwind-in-js_ solution for using -[Tailwind](https://tailwindcss.com/). Twind is particularly useful in Deno's -server context, where Tailwind and CSS can be easily server side rendered, -generating dynamic, performant and efficient CSS while having the usability of -styling with Tailwind. - -## Basic example - -In the following example, we will use twind to server side render an HTML page -and log it to the console. It demonstrates using grouped tailwind classes and -have it rendered using only the styles specified in the document and no client -side JavaScript to accomplish the _tailwind-in-js_: - -```ts -import { extract, install } from "https://esm.sh/@twind/core@1.1.3"; -import presetTailwind from "https://esm.sh/@twind/preset-tailwind@1.1.4"; - -install({ - presets: [ - presetTailwind(), - { - theme: { - fontFamily: { - sans: ["Helvetica", "sans-serif"], - serif: ["Times", "serif"], - }, - }, - }, - ], -}); - -function renderBody() { - return ` - - - Hello from Deno - - -

Hello from Deno

-
- - -
- - - `; -} - -function ssr() { - const body = renderBody(); - const { html, css } = extract(body); - return html.replace("", ``); -} - -console.log(ssr()); -``` - -https://twind.style/packages/@twind/core#extract