Idea for theme-nesting for variants

[MichaelAllenWarner]

Here, I shared some class-based selectors that could be used not only to enable a theme-variant within the scope of its corresponding theme, but also to disable each theme-variant within the scope of other themes.

Those selectors were fairly simple and would not support theme-nesting. To support theme-nesting, selectors like these might work for non-default themes:

addVariant('theme-alt', [
  // enable variant within `.theme-alt` scope unless another theme's scope was declared after
  '.theme-alt &:not(.theme-alt .theme-default *, .theme-alt .theme-alt-2 *))',

  // allow something like `.theme-alt .theme-alt-2 .theme-alt` to reestablish this theme's scope
  '.theme-alt .theme-alt &',
])

For the default-theme, you also maybe want it usable in a "themeless" scope, so:

addVariant('theme-alt', [
  // enable default-variant everywhere except within scope of other themes
  '&:not(.theme-alt *, .theme-alt-2 *))',

  // the rest is the same as for the non-default themes
  '.theme-default &:not(.theme-default .theme-alt *, .theme-default .theme-alt-2 *))',
  '.theme-default .theme-default &',
])

(I'm not sure how many "layers" of nesting this could reliably support, but when would you ever need more than 1 or 2?)

Here is a working demo: https://play.tailwindcss.com/rchdc7DlqD

[Ryan Clements]

Great idea! I'm going to let this sit open for a bit so adoption can mature better.

The idea here is that I want to see how people use this plugin before we move forward.

[github-actions]

This issue has been automatically marked stale because it it received no activity for 60 days. If you wish to keep this open, please leave a comment. Thanks.

[github-actions]

This issue has been automatically closed because it received no activity for 60 days. If you think this was closed by accident, please leave a comment. Thanks.