Possible to use this plugin in a plugin?

[silveltman]

I'm creating my own custom plugin with all sort of default values for my projects.
Is it possible to use this plugin inside my plugin?

In this plugin I would like to set responsive fontsizes and spacing, which are the same for all my projects. However, I still want to be able to define custom color-themes on a per-project basis.

I can't seem to find anything on the topic of using a plugin in a plugin, so don't know if tailwind even allows this.

What I thought of is using a preset, which does allow to use plugin I believe, but I'm not sure if I can then use the plugin in the project-specific tailwindconfig too. Are the plugin settings in the preset overwritten then?

Would love to get some help :)

[RyanClementsHax]

Hiya! I'd be happy to help.

What exactly do you anticipate this looking like? Could you write up some same code?

[silveltman]

Well, I have created a custom plugin which I install into all my tailwind projects, to set base styles etc. Ideally, i would want to use tailwindcss-themer inside my custom plugin, so I can also easily add css variables to my setup, like this:

const plugin = require('tailwindcss/plugin')

module.exports = plugin(
	function ({ addBase, addVariant, addComponents, theme }) {
		addBase({
                    // My base styles
                 })
                addVariant({
                // My variants
                })
                addComponents({
                // My components
                })
	},
	{
              theme: {                    
              },
              plugins: [
                  require('tailwindcss-themer')({
                      // define variables here via tailwindcss-themer. These are variables that are the same across all my projects, like responsive font-sizes
                  })
              ]
	},
)

I know I can do this manually in the addBase() function, but I would really like to use tailwindcss-themer as mucht as possible.

In all my tailwind projects (where I import this custom plugin) I want to still be able to use tailwindcss-themer too, to set color themes, which are different for each project.

[RyanClementsHax]

Unfortunately there doesn't seem to be an api available for this in tailwind. I do find your use case cool.

For now, if you just want to share tailwind plugin config, you might have to specify it as an array.

const plugin = require('tailwindcss/plugin')

module.exports = [
      plugin(
	    function ({ addBase, addVariant, addComponents, theme }) {
		    addBase({
                        // My base styles
                     })
                    addVariant({
                    // My variants
                    })
                    addComponents({
                    // My components
                    })
	    },
	    {
                  theme: {                    
                  }
	    }
    ),  
    require('tailwindcss-themer')({
        // define variables here via tailwindcss-themer. These are variables that are the same across all my projects, like responsive font-sizes
    })

I'm not sure how tailwind would react if tailwindcss-themer were included multiple times in the same config, but that would be something to watch out for. If you have any problems with that, I'd be happy to know.

That being said, we could consider opening up some of tailwindcss-themer's internal machinery so you can write themes within a plugin. Would that be something you'd be interested in?

[Andre-ADPC]

Hi Ryan and Sil, I have a similar scenario, especially focused on "colors" and "fontFamily" sections of the config file for tailwindcss-themer with the aim to abstract my theming out of the main Tailwind "entry-point" config file. Each preset in the project is focused on splitting complex configurations into more manageable chunks, which are developed and maintained on their own inside the project repo, or sometimes even in a repo of its own, depending on complexity.

In my project, there are Frontend and Backend views, with other sub-FE & sub-BE views involved which are structured similarly. Additionally, identical Components are used in these structures in many aspects.

To have a good idea of "where am I" the "colour and sometimes font" theming needs to be relevant to the "section" in which the Users find themselves. So, I need to keep those "places in the app " "visually distinct" for all users, to help them navigate through and use the app in a friendlier way.

For example:
"Blue-Theme" means I'm in the Main root of the app's FE.
"Pink-Theme" says I'm in the main root BE Admin portal.
"Green-Theme" means I'm on my personal profile's FE page, and
"Yellow-Theme" shows me I'm in my personal profile's BE Admin portal.

I also have dynamic UI-selectable configurations, where users can dynamically theme (to a point) their little corner in the app (Their config parameters are written to their profiles in the backend and applied from there.), which adds additional complexity to Tailwind's config.

Using Adam Wathan's example theming-tailwind-demo example works well for basic projects with minimal colour ranges. But in my case, there's a whole "gamut set" of brand colours involved per theme, including using more modern colour-space functionality using color() functionality as well.

Significant time and research were spent on setting up the various theme colour palettes and preparing for more advances in display/screen technology. Now I need to implement this in an elegant way.

So in a nutshell, there's a lot going on regarding theming and to keep it all in a single config is a nightmare waiting to happen.

In essence, my question is whether it is possible to use dedicated presets with your plugin, like:

"my-colours-for-default-theme.js" + "my-fonts-for-default-theme.js"

Then add:
"my-colours-for-theme-1.js" + "my-fonts-for-theme-1.js", and include more presets for;
"my-colours-for-theme-2.js" + "my-fonts-for-theme-2.js", etc.

I understand from your documentation that tailwindcss-themer extends Tailwind's theme section, not overriding it as such, but the "if I can" and then "where do I need to put my presets" in such a hierarchy of configurations eludes me a bit.

I have been working with the presets which is a blessing, but adding theming in an elegant way to this mix is my next challenge. Yes, I suppose we can write a new plugin, but why reinvent a wheel when there might be one that can already do the job well?

Your thoughts on this are appreciated.

[RyanClementsHax]

Hiya! I find your use case fascinating. I'd love to learn more. Is there a code base I could take a look at to really understand where your pain points are and what you're trying to achieve? An example repo would be helpful be it a toy or real project. I'd also be happy to set up a call if you would be up to it.