Styling part="" selectors with Tailwind

Nostr Web Components ship with a bunch of part attributes that can be used by CSS to break the shadow DOM barrier and style the component from the outside.

To do that with Tailwind we just need a simple plugin that tells Tailwind to transform part-[<part-attribute>]:actual-tw-class into the proper CSS declaration. In short, add this to your Tailwind v4 CSS file:

 @import "tailwindcss";
+@plugin "tailwind-part";

And install it with npm: npm install --save-dev tailwind-part.

After that you can style components by placing classes on the component tag like this:

<nostr-picture pubkey="npub1..." class="part-[img]:rounded"></nostr-picture>

Check each component's documentation to see what part selectors are available for each.

Do it manually

Or you can declare the plugin manually in your Tailwind config or on a separate file that can be imported by the CSS:

import plugin from 'tailwindcss/plugin'

export default plugin(({ matchVariant }) => {
  matchVariant('part', value => {
    return `&::part(${value})`
  })
})

Yes, this is the full source code for the plugin. See tailwind.config.js.