presetTailwind type error with v1 support

[junichi-chiba]

Hi,

I have figured out there seems to be a type issue with tailwind v1 support.
I have init the Fresh 1.2, then followed the official steps to add twind v1, described here: https://fresh.deno.dev/docs/examples/using-twind-v1

main.ts:

/// <reference no-default-lib="true" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
/// <reference lib="dom.asynciterable" />
/// <reference lib="deno.ns" />

import "$std/dotenv/load.ts";

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

import twindPlugin from "$fresh/plugins/twind.ts";
import twindConfig from "./twind.config.ts";

await start(manifest, { plugins: [twindPlugin(twindConfig)] });

twind.config.ts:

import { defineConfig } from "https://esm.sh/@twind/[email protected]";
import presetTailwind from "https://esm.sh/@twind/[email protected]";
import presetAutoprefix from "https://esm.sh/@twind/[email protected]";

export default {
  ...defineConfig({
    presets: [presetTailwind(), presetAutoprefix()],
  }),
  selfURL: import.meta.url,
};

Then I get a type error on VSCode: Argument of type '{ selfURL: string; darkMode?: DarkModeConfig; darkColor?: DarkColor<BaseTheme & TailwindTheme & { screens: Record<string, MaybeArray<ScreenValue>>; colors: Record<...>; }> | undefined; ... 7 more ...; finalize...

---

---

So it seems that twindConfig is missing correct type inference.
I searched for a solution and found some people attempt to add "as Preset" imported from twind core (https://qiita.com/access3151fq/items/71dcc07978b7e61fe263).

twind.config.ts:

import { defineConfig, Preset } from "https://esm.sh/@twind/[email protected]";
import presetTailwind from "https://esm.sh/@twind/[email protected]";
import presetAutoprefix from "https://esm.sh/@twind/[email protected]";

export default {
  ...defineConfig({
    presets: [presetTailwind() as Preset, presetAutoprefix()],
  }),
  selfURL: import.meta.url,
};

The above code with "as Preset" is working in my new environment without the error.

Now, I have a few points to discuss:

• Is this a good solution?
• Should the official steps be updated?
• Should the things be taken care of in twind project instead?
• Is there anybody experiencing the same error? Because strangely, the error did not come up in my old dirty environment with Fresh 1.1 projects. I only see the error in a clean PC. Plus, after I cleared $HOME/.deno/.cache/deno on the old environment I see the same error.

[marvinhagemeister]

Starting with the upcoming Fresh 1.6 release we'll ship with a proper Tailwind CSS plugin. It uses the same npm package as in node.