tailwindcss: borders missing when using ui5-webcomponents with tailwind

[pskelin]

Bug Description

When using a project with tailwind (the original issue was reported for sveltekit which includes a tailwindcss setup), the list items of a ui5-list are missing the bottom borders.

[pskelin]

Analysis

by @ilhan007

adding tailwind to a project includes a CSS reset (preflight) that removes borders from all elements:
@tailwind base

the problematic selector:

*,
::before,
::after {
  border-width: 0;
  border-style: solid;
  border-color: theme('borderColor.DEFAULT', currentColor);
}

This selector even though with low specificity is always applied before :host selectors.

ui5-li standard list item has the following selector in the shadow dom:

:host([has-border]) {
  border-bottom: var(--ui5-listitem-border-bottom);
}

Solution

In the application css, after the tailwind reset, add the following to revert the effect of the tailwind border reset for the list item:

@tailwind base;

ui5-li {
  all: revert-layer;
}

Do this for all components that are used in the application that have a default border that is hidden by the reset.