Add part: psuedo selector and all-unset to let tailwind play more nicely with custom-elements ( aka webcomponents )

[herrKlein]

tl;dr
add part psuedo selector and all unset for unstyling and styling within custom-elements.

<test-prev class="part-[button]:all-unset part-[button]:flex px-2 py-2"></test-prev>

Explanation:

Within custom-elements you can style the shadowRoot by the use of the part selector.
This is commonly used to expose certain parts from your custom element to the outside world.

Also the normalize/css reset template does not reach within shadowRoot of a custom-element.

There are more webcomponent frameworks right nog and we solve this problem in Tailwind 3 by using

plugins: [
    /* A plugin for the ::part psuedo selector which tailwind does not support out of the box.
    Specific for custom-elements / webcomponents
    usage : part-[selector]:bg-red-400
    */
    plugin(function ({ matchVariant }) {
      matchVariant(
        'part',
        (value) => {
          return `&::part(${value})`;
        }
      );
    }),
  ],

@layer base {
  .all-unset {
    all: unset;
  }
}

With this you can style the custom element with tailwind.

class TestPrev extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    // Initialization logic, event listeners setup, etc.
    this.render();
  }

  render() {
    this.shadowRoot.innerHTML = `
      <button part="button">
        <slot></slot>
      </button>
    `;
  }
}
customElements.define('test-prev', TestPrev);

And now we can use tailwind to unstyle and style the default button within the shadowroot.

<test-prev class="part-[button]:all-unset part-[button]:flex px-2 py-2"></test-prev>

since custom-elements and parts are natively supported I think it should be part of tailwind default pseudo selector. including the all-unset for unsetting styles of default components within shadowRoots.

[KonnorRogers]

Also tacking on support for :state() since it's related to custom states from ElementInternals.

https://github.com/KonnorRogers/tailwindcss-plugin-custom-elements/blob/main/exports/state-plugin.js