Company Theme NPM Package with modular plugins.

[Skylercrane23]

@adamwathan

I am currently working on a company wide tailwind npm package for our brand. This includes base styles for colors, screens, spacing, etc. I am using npm link to test the package and is currently working with any theme or extended object related imports.

The issue I am having is with imported plugins. I have seen references to a handler function and a new api for plugins here #1268. But haven't seen a lot of documentation on how to implement it, especially with imported functions. Not sure if its possible for an NPM package export plugins as one plugin with tailwind but any info would be awesome.

This is my setup:

// index.js in my npm package root.

// Theme Imports 
const {
  colors,
  screens,
  spacing
// etc...
} = require("./tailwind/theme/index.js");

// Plugin Imports ( THESE ARE WHAT I CAN'T FIGURE OUT HOW TO USE IN THE CONFIG
const {
  buttonComponents,
  typography,
  forms
// etc...
} = require("./tailwind/plugins/index.js");


// Exported module that is then published and consumed in another projects tailwind.config.js.

module.exports = {
  config: {
    theme: {
      colors,
      screens,
      // etc...
      extend: {
        spacing,
        // etc... 
       }
    },

    // THIS IS WHERE I AM CONFUSED. 
    // How can I use the imported plugins within this handler (forms, typography, buttonComponents)
    // Not sure how to add those imports here. 

    handler: function({ addUtilities, addComponents}) {
      // addUtilities(...);
      // addComponents(...);
    },
  }
};

I have also seen in that same PR linked at the top a way to create plugins like this:

// How do I use the imported plugins within this plugin function?
module.exports = plugin(function({ addUtilities, theme, variants }) {
  // Plugin work goes here
}, {
  theme: {
    // ...
  },
  variants: {
    // ...
  },
})

Here is an example of how I am exporting a plugin that is then imported into this index.js.

const buttonComponents = function({ addComponents, theme }) {
  const buttons = {
    '.btn': {
      borderRadius: theme('borderRadius.default'),
      fontWeight: theme('fontWeight.bold'),
      fontSize: theme('fontSize.sm'),
      // etc...
    }
  }
  addComponents(buttons)
}
module.exports = buttonComponents

Any direction or help would be greatly appreciated. I currently have it working with something similar but I am having to import every single export from this file and place in the tailwind config vs what I would like to do by just requiring this plugin in any project like this in my tailwind.config.js:

module.exports = {
  theme: {
  variants: {},
  plugins: [require('tailwind-test-package')]
}

[NickDarvey]

@Skylercrane23 what solution did you end up with?