Support Tailwindcss Plugins

[tw-in-js]

Support Tailwindcss Plugins

[sastan]

After thinking about this and porting tailwindlabs some plugins (@twind/forms, @twind/aspect-ratio and @twind/line-clamp) I'm leaning towards a new module which would create a twind configuration from a tailwind config:

import { setup } from 'twind'
import { compat } from 'twind/compat'

setup(
  compat({
    // Tailwind config
    plugins: [
      // List of tailwind plugins
    ]
  })
)

Or even:

import { setup } from 'twind/compat'

setup({
  // Tailwind config
  plugins: [
    // List of tailwind plugins
  ]
})

[sastan]

Awesome tool, support for Tailwind UI would be great ❤️

We hope that we can achieve that.

[joshua1]

I was about to ask how to use tailwindcss plugins like the ones in tailwindUI (@tailwindcss/forms) , then i saw this. I will await the outcome of this, as i wanted to try using tailwind-UI with twind

[bravo-kernel]

Awesome tool, support for Tailwind UI would be great ❤️

[sastan]

Eager to use tailwindcss/forms!

@thelinuxlich @joshua1 You could try https://github.com/tw-in-js/twind-forms

[sastan]

Honestly I do not believe it will happen any time soon. For now I try to provide the most common tailwind plugins as presets.

[shellscape]

#490 was opened so this should probably be reopened. I have an interest in seeing this supported for https://jsx.email

[thelinuxlich]

Eager to use tailwindcss/forms!

[ggoodman]

I love the concept! I hope that you consider exposing the mapper.

[jgoux]

Hello, how would you adapt https://github.com/stormwarning/tailwindcss-capsize ?

[danielweck]

Twind's primary developer mentioned a code refactoring in this comment (to align the typography plugin with others, and to hook into the autocompletion VSCode / Typescript extension):

tw-in-js/typography#2 (comment)

So I guess the developer uses some sort of template / scaffolding for creating such plugins. It would be great if a "create" Yarn / NPM utility was available to easily kick-start Twind plugins based on Tailwind ones :)
(this would make it possible for the Twind community to help build extensions to the core library)

[lukejacksonn]

All plugins are written the same in principle. Whether they are core, supplementary or custom. Furthermore they are all just functions that get called when certain keywords are picked up by the compiler.

See here for docs: https://twind.dev/docs/handbook/advanced/plugins.html#plugins-without-arguments

With regards capsize, the principle is the same, so something like:

import { setup } from 'twind'

setup({
  plugins: {
    'capsize': ([font, size, lineHeight]) => {
       return computeCapsize(font, size, lineHeight);
    },
  },
})

Where computeCapsize returns some CSS-in-JS object with the appropriate values according to their algorithm. Now if the compiler came across capsize-sans-sm-tight then it would go ahead and compute/inject the appropriate rules.

[KyleJune]

Any updates on the compat API?

If not, what's the manual process of converting a tailwindcss plugin into a twind plugin? I'm new to tailwindcss and twind, but might be able to help with implementing a compatibility layer depending on the size and scope of such a project. If I'm unable, that information might inspire someone else to take on this feature.

Edit: I'm going to just switch to using the latest next release, it has a preset for the tailwindcss forms plugin that should meet my needs.

[stale]

Hey folks. This issue hasn't received any traction for 90 days, so we're going to close this for housekeeping. If this is still an ongoing issue, please do consider contributing a Pull Request to resolve it. Further discussion is always welcome even with the issue closed. If anything actionable is posted in the comments, we'll consider reopening it. ⓘ