Enable plugin to read config when creating theme extension

[RyanClementsHax]

Feature request

I was wondering if it would be possible to allow plugins that use options to read the tailwind config when creating a theme extension.

Use case

My use case is that I've created tailwindcss-themer. It handles everything tailwind currently makes you do to theme anything using css variables. It essentially automates what y'all already direct us to do. Half of what this plugin does is inject css variables into the config which is why I need the second callback of plugin.withOptions. I would love it if in that second callback, I could read the tailwind config so I don't have to make the developer pass in all of the default values explicitly to the plugin via options.

For example, what has to be specified right now is something like this (see the plugin docs for more details):

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-themer')({
      defaultTheme: {
        // put the default values of any config you want themed
        // just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme
        extend: {
          colors: {
            primary: 'red'
          }
        }
      },
      themes: [
        // ...
      ]
    })
    // ...
  ]
}

I would love to have this api instead:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'red'
      }
    }
  },
  plugins: [
    require('tailwindcss-themer')({
      themes: [
        // ...
      ]
    })
    // ...
  ]
}

The former api forces the developer to specify every default value explicitly which can easily lead to styles breaking unexpectedly when they override a some style but forget they need to specify a default value. It also gets annoying when they want to theme something that comes off of the official tailwind theme like colors.red as they would have to remember to explicitly set it as the default theme instead of the plugin being able to figure that out for them.

I'd love it if the plugin could "infer" to always use what is specified in the theme section of the tailwind config.

I am definitely open to feedback. Perhaps there is an obvious way forward I'm missing 🤷🏼‍♂️.

The following are some questions I anticipate.

Have I considered importing the default theme?

Yes, but the default theme isn't exactly what I want to set as the default, its whatever the developer specifies in the theme section of the config that I want to use as defaults.

Why not make a separate variable?

Something like this would work, and is probably the best workaround, but it has a few problems.

// tailwind.config.js

const defaultTheme = {
  extend: {
    colors: {
      primary: 'red'
    }
  }
}

module.exports = {
  theme: defaultTheme,
  plugins: [
    require('tailwindcss-themer')({
      defaultTheme,
      themes: [
        // ...
      ]
    })
    // ...
  ]
}

It makes the tailwind config less recognizable and harder to visually line up with the docs. This is particularly important for beginners I find. One of the properties that I would like to have for this plugin is that it only cares about your themes not your default styles. This way it can be a "drop in" plugin to enable theming out of the box. As a final point, this method isn't as "clean" as the proposed solution.

Why do you need to do logic with the default theme

This plugin has a concept of a "default" theme which is the set of styles shown when no theme is active. For example, if you wanted to add a "dark" theme for a site, you might consider the "light" theme to be the default. It's really whatever you need it to be.

As such, I need to take in the default values for anything the developer wants to theme.

Why can't you do all of this in the first function to plugin.withOptions?

The first function doesn't let you modify the tailwind config.

If the plugin injects css variables in place of the values, wouldn't this proposed solution nuke all of the default values, preventing you from being able to read them back in the first function thus forcing you to take in the default values via plugin options anyway?

Not if I store the default values on the extension produced by the second function.

For example:

// myPlugin.js
const plugin = require('tailwindcss/plugin')

module.exports = plugin.withOptions(function (options) {
  return function({ config }) {
    const defaultValues = config('my-special-key')

    // continue with the rest of my work
  }
}, function (options, config) {
  const defaultValues = extractDefaultValues(config)
  return {
    theme: {
      'my-special-key': defaultValues,
      extend: createThemeExtension(options)
    },
  }
})

This might not be the best way to achieve this, but it is a way. I'm open to suggestions. Perhaps this could be a separate api?

Related issues/discussions

I have looked at previous issues for related discussion on this topic. There was one that I can't find now that led to the creation of plugin.withOptions, but that was the only one that I was able to find related to this.

PS

Thanks for the great library! I'm loving it :)

[RyanClementsHax]

This is still useful btw.