Cascade Layers

Put styles that belong to application-wide layout in themeLayout, page compositions in themePage, and individual UI parts in themePart. Use these top-level layers directly, not components or nested layers such as components.layout. Theme-root custom properties and Tailwind directives may remain outside these layers where required. For normal declarations, themePart overrides themePage, and themePage overrides themeLayout, regardless of import order; within one layer, normal cascade rules still apply. Keep Tailwind @theme and @utility directives outside these layers where required.

Correct

@layer themePage {
    .blog {
        @apply grid;
    }
}

Incorrect

@layer components.layout {
    .header {
        @apply flex;
    }
}
@layer components {
    .card {
        @apply block;
    }
}

Fix

Place layout, page, and UI part styles in themeLayout, themePage, and themePart.