Component library with Tailwind v4 causing ⁠@layer base error in projects using Tailwind v3

[kowalczyk-mateusz]

Problem

I'm building a component library using Tailwind v4 that needs to be consumed by projects still using Tailwind v3. When importing components, I get this error:

CssSyntaxError: ⁠@layer base is used but no matching ⁠@tailwind base directive is present.

Setup Details

Component Library:

• Built with React 19 + Vite 7
• Uses Tailwind CSS v4 (via @tailwindcss/vite)
• Based on shadcn/ui components
• CSS bundled using vite-plugin-lib-inject-css

Consuming Project:

• Next.js 15 with React 19
• Tailwind CSS v3.4.17 (cannot upgrade to v4 yet)
• Gets the error when importing library components

Error Details

The error occurs in the consuming project when it tries to process the library's bundled CSS (dist/main.css). The library's CSS contains Tailwind v4 syntax like @layer base but the consuming project's Tailwind v3 expects @tailwind base directive.

What I've Tried

1. Layer renaming approach from this discussion - didn't work
2. PostCSS configuration - styles stopped working
3. Different Vite CSS configurations - still getting conflicts

Configuration Files

vite.config.ts

export default defineConfig({
  plugins: [
    react(),
    libInjectCss(),
    tailwindcss(), // @tailwindcss/vite plugin
    // ...
  ],
  build: {
    lib: {
      entry: resolve(__dirname, "lib/main.ts"),
      formats: ["es"],
    },
    rollupOptions: {
      external: ["react", "react/jsx-runtime", "react-dom"],
    },
  },
});

main.css


@import "tailwindcss";
@custom-variant dark (&:is(.dark *));

@theme inline {
  /* custom theme variables */
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
}

Question

Is there a way to build a Tailwind v4 component library that's compatible with projects using Tailwind v3?
The goal is to:

1. Keep using Tailwind v4 features in the library

2. Generate CSS that doesn't conflict with consuming projects' Tailwind v3

3. Avoid requiring consumers to update to Tailwind v4

[kowalczyk-mateusz]

somehow after few tries #18123 it worked