Divider border gets overwritten by TailwindCSS preflight

[KonnorRogers]

Describe the bug

<sl-divider>'s border is getting overwritten by TailwindCSS preflight CSS

To Reproduce

https://codepen.io/paramagicdev/pen/VwOdKqP?editors=1000

Screenshots

Browser / OS

• OS: Mac
• Browser: all
• Browser version: all

Additional information

This is a result of the * selector having more specificity than :host. luckily it only affects borders set in a :host block, but its still annoying.

Users can use border: revert-layer on the specific component, but the browser support is atrocious.

sl-divider {
  border: revert-layer;
}

https://caniuse.com/?search=revert-layer

The other option is for them to recreate the :host selectors.

[KonnorRogers]

@jusko I added a discussion to Tailwind here:

tailwindlabs/tailwindcss#13891

fingers crossed there's some way we can resolve this.

[jusko]

Thanks @KonnorRogers. I'll be using the workaround you suggested of recreating the :host selectors for now. Will update if anything further related crops up.

[ChellappanRajan]

Hi @KonnorRogers, I'm curious to know why we are not renaming the --width and --height CSS properties. I believe this could solve the issue. Thank you

[KonnorRogers]

Hi @KonnorRogers, I'm curious to know why we are not renaming the --width and --height CSS properties. I believe this could solve the issue. Thank you

Not sure I follow by "renaming"

Those variables get set in the :host selector so they're scoped to the component. Any styling we do of the border will be rewritten by the * selector, because * has higher specificity than :host.

shoelace/src/components/divider/divider.styles.ts

Lines 4 to 8 in 96edd85

	:host {
	--color: var(--sl-panel-border-color);
	--width: var(--sl-panel-border-width);
	--spacing: var(--sl-spacing-medium);
	}

[ChellappanRajan]

Hi @KonnorRogers, I'm curious to know why we are not renaming the --width and --height CSS properties. I believe this could solve the issue. Thank you

Not sure I follow by "renaming"

Those variables get set in the :host selector so they're scoped to the component. Any styling we do of the border will be rewritten by the * selector, because * has higher specificity than :host.

shoelace/src/components/divider/divider.styles.ts

Lines 4 to 8 in 96edd85

	:host {
	--color: var(--sl-panel-border-color);
	--width: var(--sl-panel-border-width);
	--spacing: var(--sl-spacing-medium);
	}

Instead of reassigning --color: var(--sl-panel-border-color), we can use border-top: solid var(--sl-panel-border-width) var(--color) directly"

[KonnorRogers]

Hi @KonnorRogers, I'm curious to know why we are not renaming the --width and --height CSS properties. I believe this could solve the issue. Thank you

Not sure I follow by "renaming"
Those variables get set in the :host selector so they're scoped to the component. Any styling we do of the border will be rewritten by the * selector, because * has higher specificity than :host.

shoelace/src/components/divider/divider.styles.ts

Lines 4 to 8 in 96edd85

	:host {
	--color: var(--sl-panel-border-color);
	--width: var(--sl-panel-border-width);
	--spacing: var(--sl-spacing-medium);
	}

Instead of reassigning --color: var(--sl-panel-border-color), we can use border-top: solid var(--sl-panel-border-width) var(--color) directly"

That shouldn't make a difference. The problem will will still remain that * has more specificity than :host {}

[marcuslimdw]

@claviska, would you accept a PR to add a note to the sl-divider documentation that:

• this may happen when using Tailwind with Shoelace
• a workaround is available?

If so, is there any particular format you'd want that information to be in? I don't recall any other such caveats being documented for other elements.

[claviska]

@marcuslimdw that's probably a good idea in the meantime. You can add a callout to the divider page wherever it seems appropriate. The syntax for that looks like this:

:::tip
This test will be shown in a callout on the website.
:::

[marcuslimdw]

Created #2356.