Have you successfully used tailwindcss-forms in deno Fresh?

[nkabbara]

I'm trying to get https://github.com/tailwindlabs/tailwindcss-forms to work through https://www.npmjs.com/package/@twind/forms. But no luck so far.

Where you able to do this?

In my twind.config.ts, I tried import { forms } from "npm:@twind/forms" then

 
  plugins: {
    forms
}

But no go. I get

error: Uncaught (in promise) TypeError: import_twind.directive is not a function
    at Object.<anonymous> (file:///Users/nkabbara/Library/Caches/deno/npm/registry.npmjs.org/@twind/form
s/0.1.4/forms.cjs:154:26)
    at Object.<anonymous> (file:///Users/nkabbara/Library/Caches/deno/npm/registry.npmjs.org/@twind/form
s/0.1.4/forms.cjs:164:4)

[sastan]

Still working on a deno fresh example. Here is the documentation for v1. Could you try if that works?

[nkabbara]

Thank you!

I think deno is on twind 0.16.17 right? Should it be on v1+?

I tried following instructions but no go. It doesn't look like forms are being reset. I could be doing something wrong. Below is my config.

export default {
  selfURL: import.meta.url,
  presets: [presetTailwindForms({ strategy: "base" })],
  theme: {
    extend: {
      colors: {
        brand: {
          DEFAULT: "#9C182f",
          light: "#b91d38",
          dark: "#8d162b",
        },
      },
      fontFamily: {
        headline: "Lora, Serif",
        body: "ui-serif, Serif",
      },
    },
  },
  plugins: {
    btn: apply`rounded-lg  px-5 py-3 inline-block uppercase tracking-wider font-semibold text-sm sm:text-base focus:outline-none focus:ring focus:ring-offset-2 focus:ring-opacity-50 `,
    "btn-primary": apply`bg-brand hover:bg-brand-light text-white focus:ring-brand active:bg-brand-dark`,
    "btn-secondary": apply`bg-gray-300 hover:bg-gray-200 text-gray-800 focus:ring-gray-300  active:bg-gray-400`,
  },
} as Options;

[sastan]

For v1 you can see here that it is working and I converted the plugins config to rules for v1. Could you create a reproduction using https://github.com/tw-in-js/twind/tree/main/examples/using-tailwind-forms for deno fresh?

[matthewmorek]

I tried using forms and regardless of the configuration, I keep getting the same error in different format:

error: Uncaught (in promise) SyntaxError: The requested module '/v107/@twind/[email protected]/deno/colors.js' does not provide an export named 'blue'

My current configuration in Deno Fresh:

import_map.json

{
  "imports": {
    "@/": "./",
    "$fresh/": "https://deno.land/x/[email protected]/",
    "react": "https://esm.sh/[email protected]/compat",
    "preact": "https://esm.sh/[email protected]",
    "preact/": "https://esm.sh/[email protected]/",
    "preact-render-to-string": "https://esm.sh/*[email protected]",
    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
    "@twind/core": "https://esm.sh/@twind/[email protected]",
    "@twind/forms": "https://esm.sh/@twind/[email protected]",
    "@twind/preset-tailwind": "https://esm.sh/@twind/preset-tailwind",
    "@twind/preset-tailwind/": "https://esm.sh/@twind/preset-tailwind/",
    "@twind/preset-tailwind-forms": "https://esm.sh/@twind/preset-tailwind-forms",
    "@twind/preset-autoprefix": "https://esm.sh/@twind/preset-autoprefix",
    "freshwind": "https://deno.land/x/[email protected]",
    "freshwind/": "https://deno.land/x/[email protected]/",
    "@headlessui/react": "https://esm.sh/@headlessui/[email protected]?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&[email protected]"
  }
}

twind.config.ts

import { defineConfig } from "@twind/core";
import presetAutoprefix from "@twind/preset-autoprefix";
import presetTailwind from "@twind/preset-tailwind";
import presetTailwindForms from "@twind/preset-tailwind-forms";

export default defineConfig({
  presets: [presetAutoprefix(), presetTailwind(), presetTailwindForms()],
});

export const configURL = import.meta.url;

main.ts

import { start } from "$fresh/server.ts";
import manifest from "./fresh.gen.ts";

import freshwind from "freshwind/plugin.ts";
import config, { configURL } from "./twind.config.ts";

await start(manifest, { plugins: [freshwind(config, configURL)] });

---

Just a note, that everything else seem to work fine and colours are normally accessible in all classes, just the forms seem to be having an issue with importing and ingesting the base @twind/preset-tailwind package.

[KyleJune]

I had the same issue. This was fixed in v108 of esm.sh.
esm-dev/esm.sh#527
Also, I'd recommend pinning the version of your dependencies and your version of esm.sh.