Caramastifer•9mo ago

Seamlessly include Tailwindcss

Is there a recommended way of achieving this at the moment? What is the cleneast way of including tailwindcss with postcss in a Deno project while having autocomplete for the development?

4 Replies

Deno AI Helper•9mo ago

Yes, the documentation recommends using Twind, a tailwind-in-js solution, for using Tailwind CSS in a Deno project. 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. Here is a basic example of using Twind with Deno:

import { setup, tw } from "https://esm.sh/twind@0.16.16";
import { getStyleTag, virtualSheet } from "https://esm.sh/twind@0.16.16/sheets";

const sheet = virtualSheet();

setup({
  theme: {
    fontFamily: {
      sans: ["Helvetica", "sans-serif"],
      serif: ["Times", "serif"],
    },
  },
  sheet,
});

function renderBody() {
  return `
    <h1 class="${tw`text(3xl blue-500)`}">Hello from Deno</h1>
    <form>
      <input name="user">
      <button class="${tw`text(2xl red-500)`}">
        Submit
      </button>
    </form>
  `;
}

function ssr() {
  sheet.reset();
  const body = renderBody();
  const styleTag = getStyleTag(sheet);

  return `<!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Hello from Deno</title>
        ${styleTag}
      </head>
      <body>
        ${body}
      </body>
    </html>`;
}

console.log(ssr());

import { setup, tw } from "https://esm.sh/twind@0.16.16";
import { getStyleTag, virtualSheet } from "https://esm.sh/twind@0.16.16/sheets";

const sheet = virtualSheet();

setup({
  theme: {
    fontFamily: {
      sans: ["Helvetica", "sans-serif"],
      serif: ["Times", "serif"],
    },
  },
  sheet,
});

function renderBody() {
  return `
    <h1 class="${tw`text(3xl blue-500)`}">Hello from Deno</h1>
    <form>
      <input name="user">
      <button class="${tw`text(2xl red-500)`}">
        Submit
      </button>
    </form>
  `;
}

function ssr() {
  sheet.reset();
  const body = renderBody();
  const styleTag = getStyleTag(sheet);

  return `<!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Hello from Deno</title>
        ${styleTag}
      </head>
      <body>
        ${body}
      </body>
    </html>`;
}

console.log(ssr());

As for autocomplete, the documentation does not provide explicit information on how to achieve this with Twind in a Deno project. However, the Fresh framework, which is built for Deno, has a plugin system that supports Twind. This plugin automatically configures Twind for you to minimize boilerplate in your project. With this plugin, you can specify the class names directly in the JSX component, and the plugin will take care of the rest. This might provide a smoother development experience, but it's not explicitly stated in the

Deno AI Helper•9mo ago

documentation that it provides autocomplete for Tailwind CSS classes.

marvinh.•9mo ago

The CLI would work:

deno run -A npm:tailwindcss -i ./src/input.css -o ./dist/output.css --watch

deno run -A npm:tailwindcss -i ./src/input.css -o ./dist/output.css --watch

If you need it more like a lib then something like this would work:

import tailwind from "npm:tailwindcss";
import postcss from "npm:postcss"


const result = await postcss([tailwind])
  .process("<raw css here>")

import tailwind from "npm:tailwindcss";
import postcss from "npm:postcss"


const result = await postcss([tailwind])
  .process("<raw css here>")

bebraw•9mo ago

note that twind doesn't seem to be actively maintained anymore (i use it as well). unocss is roughly comparable although it doesn't have exactly full parity (but it has some features twind doesn't). integration with deno is fairly simple: https://github.com/gustwindjs/gustwind/blob/develop/plugins/uno/mod.ts i know tailwind team is working on a rust based compiler so maybe we'll see native integration with deno one day. right now postcss dependency is blocking