module.exports = function buttonComponentsPlugin({ addComponents, theme }) {
  addComponents({
    '.fluid-button': {
      color: theme('colors.gray.400')
  });
Example With Proposed API
module.exports = function buttonComponentsPlugin({ addComponents, apply }) {
  addComponents({
    '.fluid-button': {
      ...apply('text-gray-400')
  });
For the above examples using text color as an example, the different is minimal. For other, more complex utilities -- like box shadows, for example -- being able to use apply() as a shortcut would be a really considerable clean-up!
Ideally, apply returns an object that matches the same CSS-in-JS syntax that Tailwind Plugins already use when authoring styles. This becomes quite handy, as the spread operator makes composing multiple usages of apply together fairly ergonomic.
addComponents({
  '.fluid-button': {
    ...apply('text-gray-400',
    ...apply('bg-blue-600')
    ...apply('rounded')
Why Not Use CSS?
Naturally, a case like ours could be solved by just writing some custom CSS that is processed by PostCSS and itself uses @apply
@tailwind base;
@tailwind components;
.fluid-button {
  @apply text-gray-400;
  @apply bg-blue-600;
  @apply rounded;
@tailwind utilities;
However, that leaves this CSS file as an artifact that has to make it's way into the CSS build pipeline for each of our applications, imported from somewhere, etc.
Since Tailwind is already easy to extend with plugins that can add components through the addComponent API, this is a good candidate for a means for us to author our own custom component classes. This JS API for apply just makes this process a lot easier!
Potential Issues
Utility Resolution
It might be challenging to resolve classes within apply if the class being applied is itself inserted by a plugin.
This might not be so bad, however, if classes applied by a "previous" plugin are available to the "next" one. Plugin order might suddenly matter more than before, but I don't know that that would really cause an issue in practice.
It would be impossible to have a kind of "circular dependency" between plugins that apply classes from each other; you would need to extract shared styling to an additional plugin that precedes both of them.
        
After a little bit of playing around with the idea to see how it might be implemented, a problem is pretty quickly encountered: there's no real way to exchange a Tailwind configuration for the list of classes that are generated by that configuration, much less the styles themselves applied by each of those classes.
The definition for each style (say, turning your color config and the presence of the backgroundColor plugin) into the actual classes (.bg-blue-400 and friends) happens, itself, as a plugin to Tailwind, within the PostCSS build process. Because the only real artifact of processing the Tailwind configuration is the PostCSS output itself, having an apply syntax as suggested would need to have access to the whole PostCSS style tree up to that point, which does not seem possible in the current plugin architecture.
Thinking about other options, I am wondering if it would be worthwhile to split things up a bit, so that there was
A tool that takes a Tailwind configuration and generates the classes (with their CSS output definitions)
Another tool that takes this intermediate representation and turns that into an actual output CSS file
(By tools, here, I really just mean JavaScript functions; not whole, unique packages or anything).
I think that something like that would be helpful in many contexts, such as editor auto-complete (which, last time I dug into it, generates and then parses a CSS file internally to read a list of classes to power the auto-complete behavior) or class auto-sorting (which I tried to build, then realized that getting the class list requires compiling the whole PostCSS plugin in a pseudo-file and subsequently gave up on).
        
Not sure if this is exactly what you want but you can use apply directly with this syntax:
module.exports = function buttonComponentsPlugin({ addComponents }) {
  addComponents({
    '.fluid-button': {
      "@apply text-gray-400": {},
  });
But you can't update it from the tailwind.config.js user config which is important for changing plugin styles. So I would also love to see first class support for this.
You can see my button component here.
        
Oh, that's interesting @praveenjuge! Thanks for calling that out!
But you can't update it from the tailwind.config.js user config
What do you mean by this? I interpret that as the plugin not respecting changes to the default Tailwind configuration -- is that the case?
        
Yes that's what I meant but I just created a new project to check and everything seems to work fine now, whenever I change the color scheme in the tailwind config, the @apply color in the plugin also changes in the latest version.
So I guess there is no problems.
        
Thanks for the information, I will try to figure it out for more. Keep sharing such informative post keep suggesting such post.
Omegle