Tailwind v4 with component libraries

[zZHorizonZz]

Hello, we are currently trying to migrate to Tailwind v4, but we are having issues with Tailwind applying base layer styles to our external component library material web components. The main issue is that it's applying padding: 0 and margin: 0 to some components in this library. We didn't have this issue when using Tailwind v3. We have figured that it comes down to preflight which is applying this:

*, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
}

We are using a monorepo where we have a component package which contains some components that are not implemented in the external library:

Css of our component library:

@import "tailwindcss" prefix(company);
@import "@company/tailwind-config/theme.css";

Then we have module/app package for basically each app (each app has it's own prefix as well and imports the components CSS):

@import "@company/components/styles.css";

@import "tailwindcss" prefix(task);
@import "@company/tailwind-config/theme.css";

Also the tailwind-config/theme looks something like this:

@theme {
  --text-md-sys-typescale-display-large: 3.5625rem;
  --text-md-sys-typescale-display-large--line-height: 4rem;
  --text-md-sys-typescale-display-large--letter-spacing: -0.015625rem;
  --text-md-sys-typescale-display-large--font-weight: 400;
  --text-md-sys-typescale-display-medium: 2.8125rem;
  --text-md-sys-typescale-display-medium--line-height: 3.25rem;
  --text-md-sys-typescale-display-medium--letter-spacing: 0;
  --text-md-sys-typescale-display-medium--font-weight: 400;
  --text-md-sys-typescale-display-small: 2.25rem;
  
  /** Ommited for brewity */

  @keyframes md-sys-animation-size-in {
    0% {
      opacity: 0;
      transform: scale(0.9);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes md-sys-animation-size-out {
    0% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(0.9);
    }
  }
}

@layer data {
  html {
    -webkit-tap-highlight-color: rgb(var(--md-sys-color-primary));
  }

  /* width */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 9999px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant);
    border-radius: 9999px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-outline);
  }

  body {
    background: var(--md-sys-color-surface-container);
  }
}

External component library uses constructed stylesheets.

If there is somebody who could help us shed some light on this, we would really appreciate any tips and help.