V4 compatibilitiy issue when bundled styles used in v3 consumer (@layer base is used but no matching @tailwind base directive is present.)

[berkerdemirer]

Hey,

I need help with my current scenario in which I export a library using tailwindv4 styles and try to use it within tailwindv3 project. The error I am getting is @layer base` is used but no matching `@tailwind base` directive is present. Here is my config:

index.css of the library:

@layer theme {
  @import 'tailwindcss/theme.css' prefix(sc);
}

@layer base {
  .twp {
    @import 'tailwindcss/preflight.css';
  }

  html .twp,
  :host .twp {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: --theme(
      --default-font-family,
      ui-sans-serif,
      system-ui,
      sans-serif,
      'Apple Color Emoji',
      'Segoe UI Emoji',
      'Segoe UI Symbol',
      'Noto Color Emoji'
    );
    font-feature-settings: --theme(--default-font-feature-settings, normal);
    font-variation-settings: --theme(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  .no-twp {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
      all: revert-layer;
    }
  }
}

@layer components;

@layer utilities {
  @import 'tailwindcss/utilities.css' prefix(sc);
}

@import 'tw-animate-css';`

In the consumer app that uses Tailwind V3, I import the styles from my library in the main.tsx

import '@package/path/style.css';

But, when I run the application i get:

@layer base` is used but no matching `@tailwind base` directive is present.

Now this is bad, because my library shouldn't be affected by the consumer's version or at least it should work backwards compatible. I don't know if similar problem would occur if consumer was on v4 and library on v3. I also can't ask my consumers to adjust their tailwind version, or break their app if they decide to upgrade.

Due to nature of the bundling I am not able to inject the styles like you would in css-in-js libraries and get rid of the import styles statement in the consumer.

I really need help, maybe I am missing something here.