Vendor layer
Wrap third-party CSS in @layer vendor to guarantee your styles always win — no !important arms race, no specificity battles with library class names.
▲ your styles always beat vendor
Quick implementation
/* Declare vendor as lowest priority layer */
@layer vendor, base, components, utilities, page;
/* Option A: wrap an @import in the vendor layer */
@layer vendor {
@import url('https://cdn.example.com/library.css');
}
/* Option B: copy-paste or bundle third-party CSS here */
@layer vendor {
/* Third-party tooltip styles — your components override
these automatically, no !important needed */
.tooltip {
background: #1a1a1a;
border-radius: 4px;
padding: 0.4em 0.8em;
font-size: 0.875rem;
}
}
/* Your component styles win, same class name, no hacks */
@layer components {
.tooltip {
background: oklch(0.19 0.02 260);
border: 1px solid oklch(0.28 0.02 260);
border-radius: 0.5rem;
font-family: var(--font-body);
}
}Prompt this to your LLM
Includes role, constraints, framework variants, and edge cases.
You are a senior frontend engineer integrating a third-party CSS
component library (e.g. Floating UI, Tippy.js, or a charting lib)
into a project using CSS cascade layers.
Goal: Wrap the vendor library's CSS in @layer vendor so that all
project styles automatically override it without !important.
The layer order is: vendor, base, components, utilities, page.
Show:
1. How to wrap an @import in @layer vendor
2. How to inline vendor CSS into the vendor layer when @import
is not available (e.g., bundled output)
3. How to override a specific vendor class (.tooltip, .popover)
in @layer components with matching class names and no hacks
Constraints:
- No !important anywhere in your code.
- Explain why layer order beats specificity.
- Note the @import-in-layer limitation: the @import must be at
the very top of the file (before any other rules) — show the
correct file structure.
Return only the CSS with inline comments.Why vendor styles always lose
The layer declaration order means @layer vendor is lowest priority regardless of selector specificity within the vendor CSS. A three-class selector like .modal .header .title in the vendor layer loses to a single-class selector like .title in your components layer. You never have to match or beat vendor specificity — just write clean selectors in your layers and they win automatically.
The @import-in-layer caveat
@layer vendor { @import url(...) } requires the import to be at the very top of the file before any other rules — browsers don't support imports after non-import statements. In practice, most teams copy-paste the vendor CSS into the vendor layer block, or use a CSS bundler (PostCSS, Lightning CSS, Vite) that handles the import at build time before the @layer wrapper is applied.