D
Deno

help

Seamlessly include Tailwindcss

CCaramastifer11/21/2023
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?
DAHDeno AI Helper11/21/2023
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
Mmarvinh.11/21/2023
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>")
Bbebraw11/23/2023
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

Looking for more? Join the community!

Recommended Posts
tidy up `deno.lock`Hey, is there something like `go mod tidy` (https://golangbyexample.com/go-mod-tidy/) in Deno? The bSyntaxError on Web3 packageI'm trying to use this module in my project https://deno.land/x/web3@v0.11.1 and i'm using the code how to document oak apiWhat’s the best way to document an oak api. Like swagger or some kind of thatweb based cmsIs there any web based cms system like word press based on deno or fresh?Minimal code for Preact SSRWhat's the actual code to do some Preact SSR with Deno? For example something simple like a counterHow to use recent Tensorflow.JS? TF from deno.land/x/tensorflow@v0.21 appears to work, but it's oldI've only tried the TF package from deno.land/x/tensorflow@v0.21 with the readme page example. I'm hDeno Deploy isolate startup timeis this startup time normal? https://media.discordapp.net/attachments/936130919163641856/11757670644Deno KV equivalent of 'returning'hello, in sqlite there is a way to get the new value set on an upsert like so insert into cCan't use npm package: Uncaught (in promise) TypeError: Could not resolve 'preact/hooks'I get this error when trying to import the Preact version of Auto-animate in Fresh https://auto-animLeaking resources from inbound HTTP connections in testsAnyone have any ideas why I would be getting the following error. I'm using an oak server that is stPreact Hello World is not working/** @jsxImportSource https://esm.sh/preact */ import { useState } from "https://esm.sh/preact/hooks"using imports map to map no-suffix imports to suffix importsI was hoping i might be able to use an import map in my deno.json like this: ``` "imports": { "./s