how to style shoelace components with tailwind

[ahsf]

if I understand correctly I have to use the part() pseudo element.
Which is not supported by tailwind.
So how can I style shoelace components with tailwind?

[claviska]

Because Tailwind doesn't support ::part(), you won't be able to use utility classes on the host element to target parts:

<!-- works for the host element, but not parts -->
<sl-button class="…">

I recommend using @apply for this, which lets you do things like:

/* parts can be targeted using @apply */
sl-button::part(base) {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}

EDIT by @KonnorRogers 4/20/2024 :

Tailwind supports ::part() using the arbitrary property syntax in their JIT compiler, so technically you can target parts like this:

I don't recall if Tailwind supported JIT at the time of the original answer, but Tailwind technically supports ::part() using arbitrary properties, but it is not great.

<sl-card class="[&::part(base)]:px-4 [&::part(base)]:py-2">
</sl-card>

I have a plugin I wrote here to make it slightly less worse:

https://github.com/KonnorRogers/tailwindcss-plugin-custom-elements

there is also a discussion here about adding it to Tailwind "Core"

tailwindlabs/tailwindcss#13544

[b-d-m-p]

It looks like it is something being considered.
https://www.konnorrogers.com/posts/2023/web-components-tailwind-and-ssr

And here is a proposal to add it.
tailwindlabs/tailwindcss#13544

[KonnorRogers]

@b-d-m-p that's my blog post 😂 also it looks exactly like the part plugin I wrote!

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

I also added one for when :state() is eventually used by our components

[b-d-m-p]

I knew it was yours—I just wanted to highlight that you said that Adam was talking about it at the conference, and your valuable insights 😃.

I just heard the syntax episode, which got me digging around. Good job, by the way!

[KonnorRogers]

@b-d-m-p I was more so shocked to see the blog post referenced 😂 which reminds me, I should probably add the plugin I made to that post.

I'm probably going to edit the current answer and provide a little extra context since it is a little out of date.

I don't recall if Tailwind supported JIT at the time of the original original, but Tailwind technically supports ::part() using arbitrary properties, but it is not great.

<sl-card class="[&::part(base)]:px-4 [&::part(base)]:py-2">
</sl-card>

[b-d-m-p]

Using this ::part() using arbitrary properties. Works well. Strangely, the TailwindCSS docs don't seem to mention it other than arbitrary properties broadly.

Haven't tried the plugin yet, but excited to.