How to use Twind Extension Packages?

[ryota-murakami]

I'd like to use @twind/typography for my blog post styling.

But Twind setup() already finished with hardcoded option in a Fresh Twind Plugin.
So I think current Fresh disallow Twind setup with Twind's setup() API.

https://github.com/denoland/fresh/blob/86f92114d87313b9219bc80b5ab87ba49827179e/plugins/twind/shared.ts#L28C19-L28C19

Is this getting better by following re archtecture work?

• idea: entire projects as plugins #1602

[marvinhagemeister]

I think you might have misread the code. You can pass additional twind config options to the plugin which will be merged with some default options that are then passed to twind's setup. It's not hard coded.

const myTwindConfig = { } // put whatever you want in here, twind plugins, etc

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

Is this getting better by following re archtecture work?

#1602

No, that issue is about Fresh plugins and not twind plugins.

[ryota-murakami]

@marvinhagemeister I could apply @twind/typography extension with following code.
Thank you so much!

main.ts

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

import { start } from '$fresh/server.ts'
import typography from '@twind/typography'
import manifest from './fresh.gen.ts'
import twindConfig from './twind.config.ts'

import twindPlugin from '$fresh/plugins/twind.ts'
const myTwindConfig = {
  plugins: {
    ...typography({
      className: 'my-prose', // Defaults to 'prose'
    }),
  },
}

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