Use of @apply in plugins

[brc-dd]

As shown by this comment, I think it will be great to have out of box support for @apply directives in plugins. Although the use is not officially documented, yet it works.

Here is an example configuration:

// tailwind.config.js (as supported by latest Tailwind package)
// ...
  plugins: [
    plugin(({ addComponents, theme }) =>
      addComponents({
        ".componentX": {
          "@apply w-full mx-auto px-4 py-8 bg-black text-white": {},
          // other styles below...
        },
      })
    ),
  ],
// ...

The above configuration is equivalent to:

// tailwind.config.js (as supported by twin.macro)
// ...
  plugins: [
    plugin(({ addComponents, theme }) =>
      addComponents({
        ".componentX": {
            width: "100%",
            margin: "0 auto",
            padding: "2rem 1rem",
            background: theme("colors.black"),
            color: "white",
        },
      })
    ),
  ],
//...

Repository demonstrating this: https://github.com/brc-dd/twin-possible-bug/tree/apply-in-plugin

git clone -b apply-in-plugin https://github.com/brc-dd/twin-possible-bug; yarn; yarn dev

---

Well, it seems like we can attain similar functionality in twin by different features like cloning and mixing. But it is a nice feature in itself, especially if someone has some complex plugins in their codebase and they prefer to use it without extra definitions or imports.

Migrated from #432

[fvanwijk]

This would be great. Now I'm hesitant to put reusable stuff into plugins because I cannot use any tailwind utils, only propName: theme('xxx.yyy').