- A CSS layer is utilized in styled mode only, in unstyled mode the built-in CSS classes are not included and as a result no layer is defined. This documentation only applies to styled mode.
The @layer is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at
- MDN to begin with. PrimeNG wraps the built-in style classes under the primeNG cascade layer to make the library styles easy to override. CSS in your app
+ MDN to begin with. PrimeNG wraps the built-in style classes under the primeng cascade layer to make the library styles easy to override. CSS in your app
without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is written.
diff --git a/src/app/showcase/doc/guides/csslayer/tailwinddoc.ts b/src/app/showcase/doc/guides/csslayer/tailwinddoc.ts
index 61da889f2da..335047b0b76 100644
--- a/src/app/showcase/doc/guides/csslayer/tailwinddoc.ts
+++ b/src/app/showcase/doc/guides/csslayer/tailwinddoc.ts
@@ -25,7 +25,6 @@ export class TailwindDoc {
@layer tailwind-utilities {
@tailwind components;
@tailwind utilities;
-}
- `
+}`
};
}
diff --git a/src/app/showcase/doc/installation/stylesdoc.ts b/src/app/showcase/doc/installation/stylesdoc.ts
index 09f079a2356..f16fb4f0c52 100644
--- a/src/app/showcase/doc/installation/stylesdoc.ts
+++ b/src/app/showcase/doc/installation/stylesdoc.ts
@@ -9,11 +9,18 @@ import { Code } from '../../domain/code';
Theme and Core styles are the necessary css files of the components, visit the Themes section for the complete list of available themes to choose from. Styles can either be imported at
angular.json or src/styles.css file.
- angular.json
+ With angular.json
- styles.css
+ With styles.css
+
+ CSS layer
+
+ The style classes of PrimeNG are defined under the primeng CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap,
+ Normalize, or similar, a custom CSS layer configuration would be necessary for compatibility. View the CSS Layer guide for more information.
+
+
`
})
@@ -31,4 +38,17 @@ export class StylesDoc {
scss: `@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";`
};
+
+ code3: Code = {
+ scss: `/* Order */
+@layer reset, primeng;
+
+/* Reset CSS */
+@layer reset {
+ button,
+ input {
+ /* CSS to Reset */
+ }
+}`
+ };
}
diff --git a/src/app/showcase/layout/app.config.ts b/src/app/showcase/layout/app.config.ts
index ec48c41a172..c7a4f0d832d 100644
--- a/src/app/showcase/layout/app.config.ts
+++ b/src/app/showcase/layout/app.config.ts
@@ -1,15 +1,10 @@
import { ApplicationConfig } from '@angular/core';
-import { provideRouter, withDisabledInitialNavigation, withEnabledBlockingInitialNavigation, withInMemoryScrolling, withViewTransitions } from '@angular/router';
+import { provideRouter, withEnabledBlockingInitialNavigation, withInMemoryScrolling } from '@angular/router';
-import { routes } from './app.routes';
-import { provideClientHydration } from '@angular/platform-browser';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideHttpClient, withFetch } from '@angular/common/http';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
- providers: [
- provideRouter(routes, withInMemoryScrolling({ anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled' }), withEnabledBlockingInitialNavigation(), withViewTransitions()),
- provideHttpClient(withFetch()),
- provideAnimationsAsync()
- ]
+ providers: [provideRouter(routes, withInMemoryScrolling({ anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled' }), withEnabledBlockingInitialNavigation()), provideHttpClient(withFetch()), provideAnimationsAsync()]
};
diff --git a/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html b/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html
index cfcdaee2314..f8279d9d5aa 100644
--- a/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html
+++ b/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html
@@ -1 +1 @@
-