Is it possible to use @apply in plugin while creating a component?

[dzonatan]

Searched and read ton of issues and discussions but could not find the answer so far.
Is it possible to use @apply in addComponents while creating a plugin?
If not, then why? Is that by design? It feels that I am missing some obvious puzzle part here..

Use case is pretty simple:
What if I want to extract a component that is purely written using tailwindcss classes (e.g. .btn) and share it with others by exporting it into a separate library. BUT still leaving the possibility for the user of component library to control the configuration (e.g. prefix like it does for .container). For the latter it seems like an anwser is to write a plugin. In such case I'm forced to rewrite this component with css. Or am I?

[tlgreg]

You can. The css-in-js style postcss syntax is a bit weird because the whole @apply ... has to be declared in the key and should use an empty object as the value. This is because most at-functions have blocks, but @apply doesn't.

const plugin = require('tailwindcss/plugin')
module.exports = {
  plugins: [
    plugin(({ addComponents }) => addComponents({
      '.btn': {
        '@apply px-4 py-3 bg-ingido-700 text-white font-semibold uppercase rounded': {},
      },
    }),
  ],
}

[dzonatan]

Ohh.. yeah, that syntax looks weird. Thanks!