Using Twind with Deno

Twind is a tailwind-in-js solution for using Tailwind. 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 the tw function to specify 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:

  1. import { setup, tw } from "https://esm.sh/twind@0.16.16";
  2. import { getStyleTag, virtualSheet } from "https://esm.sh/twind@0.16.16/sheets";
  4. const sheet = virtualSheet();
  6. setup({
  7.   theme: {
  8.     fontFamily: {
  9.       sans: ["Helvetica", "sans-serif"],
  10.       serif: ["Times", "serif"],
  11.     },
  12.   },
  13.   sheet,
  14. });
  16. function renderBody() {
  17.   return `
  18.     <h1 class="${tw`text(3xl blue-500)`}">Hello from Deno</h1>
  19.     <form>
  20.       <input name="user">
  21.       <button class="${tw`text(2xl red-500)`}">
  22.         Submit
  23.       </button>
  24.     </form>
  25.   `;
  26. }
  28. function ssr() {
  29.   sheet.reset();
  30.   const body = renderBody();
  31.   const styleTag = getStyleTag(sheet);
  33.   return `<!DOCTYPE html>
  34.     <html lang="en">
  35.       <head>
  36.         <title>Hello from Deno</title>
  37.         ${styleTag}
  38.       </head>
  39.       <body>
  40.         ${body}
  41.       </body>
  42.     </html>`;
  43. }
  45. console.log(ssr());