Skip to content

how to style shoelace components with tailwind #1259

Answered by claviska
ahsf asked this question in Help
Discussion options

You must be logged in to vote

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 suppor…

Replies: 1 comment 8 replies

Comment options

You must be logged in to vote
8 replies
@b-d-m-p
Comment options

@KonnorRogers
Comment options

@b-d-m-p
Comment options

@KonnorRogers
Comment options

@b-d-m-p
Comment options

Answer selected by ahsf
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Help
Labels
None yet
4 participants