Support loading plugins by package / file name

[thecrypticace]

Today we require that plugins be required in the config (or imported in some cases) to be used. Additionally, when passing options to a plugin you have to call that plugin as a function to pass in the options.

Today, you have to write this:

module.exports = {
  // …
  plugins: [
    // Including our forms plugin
    require("@tailwindcss/forms"),
    
    // Including our typography plugin while changing `prose` to `wysiwyg`
    require('@tailwindcss/typography')({
      className: 'wysiwyg',
    }),
  ]
}

This PR allows us to simplify this a bit such that, if you have no options to pass, you can specify just the name of the package or file and Tailwind CSS will require() it for you. And, if you need to pass options, you can use a tuple with the name of the package and the options you want to pass.

Turning the above config into this:

module.exports = {
  // …
  plugins: [
    // Including our forms plugin
    "@tailwindcss/forms",

    // Including our typography plugin while changing `prose` to `wysiwyg`
    ["@tailwindcss/typography", { className: 'wysiwyg' }],
  ]
}

Now, the old plugin format is still supported — and you can freely mix and match!

module.exports = {
  // …
  plugins: [
    require("@tailwindcss/forms"),
    "@tailwindcss/container-queries",
    ["@tailwindcss/typography", { className: 'wysiwyg' }],
  ]
}

A note about TypeScript and ES Modules support

Due to implementation details this way of loading plugins does not support plugins written in TypeScript or ESM. ESM is not supported because many of the things that would need to be async are not and doing so would be a breaking change for people relying on APIs like resolveConfig. Similarly, for TS support — we use Jiti to compile our config to TypeScript and would not want to package jiti in every bundle that happens to use resolveConfig.

In these cases we recommend you stick to using the typical import syntax you are using today!