#Seamlessly include Tailwindcss

1 messages · Page 1 of 1 (latest)

rapid arrow
#

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?

waxen quailBOT
#

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/[email protected]";
import { getStyleTag, virtualSheet } from "https://esm.sh/[email protected]/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

earnest void
#

The CLI would work:

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>")
wispy lava