css layer section added

src/app/showcase/doc/guides/csslayer/bootstrapdoc.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { Code } from 'src/app/showcase/domain/code';
+
+@Component({
+    selector: 'bootstrap-doc',
+
+    template: `
+        <app-docsectiontext>
+            <p>Bootstrap has a <i>reboot</i> utility to reset the CSS of the standard elements. If you are including this utility, you may give it a layer while importing it.</p>
+            <app-code [code]="code" selector="bootstrap-demo" [hideToggleCode]="true" [hideCodeSandbox]="true" [hideStackBlitz]="true"></app-code>
+        </app-docsectiontext>
+    `
+})
+export class BootstrapDoc {
+    code: Code = {
+        basic: `@layer bootstrap-reboot, primeng
+
+@import "bootstrap-reboot.css" layer(bootstrap-rebooot);
+`
+    };
+}

src/app/showcase/doc/guides/csslayer/normalizedoc.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { Code } from 'src/app/showcase/domain/code';
+
+@Component({
+    selector: 'normalize-doc',
+
+    template: `
+        <app-docsectiontext>
+            <p>Normalize is another utility to reset CSS of the standard elements. While importing the CSS file, assign it to a layer and define the layer order with primeNG coming after the normalized layer.</p>
+            <app-code [code]="code" selector="normalize-demo" [hideToggleCode]="true" [hideCodeSandbox]="true" [hideStackBlitz]="true"></app-code>
+        </app-docsectiontext>
+    `
+})
+export class NormalizeDoc {
+    code: Code = {
+        basic: `@layer normalize, primeng;
+
+@import "normalize.css" layer(normalize-reset);
+`
+    };
+}

src/app/showcase/doc/guides/csslayer/resetdoc.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { Code } from 'src/app/showcase/domain/code';
+
+@Component({
+    selector: 'reset-doc',
+
+    template: `
+        <app-docsectiontext>
+            <p>
+                Ease of customization may present an issue if you have global styles on HTML elements like inputs and buttons that are also utilized by PrimeNG because global styles with a broader scope e.g. <i>button &#123; &#125;</i> and no layer
+                always override the PrimeNG components leading to unexpected results. A common use case for global styles applying to standard HTML elements is CSS reset utilities to remove the default styling of the browsers. In this case, best
+                practice is wrapping your CSS in a layer like <i>reset</i> and make sure <i>primeNG</i> comes after your layer since layers defined after has higher precedence. This way, your Reset CSS does not get in the way of PrimeNG components.
+            </p>
+            <app-code [code]="code" selector="specificity-demo" [hideToggleCode]="true" [hideCodeSandbox]="true" [hideStackBlitz]="true"></app-code>
+        </app-docsectiontext>
+    `
+})
+export class ResetDoc {
+    code: Code = {
+        basic: `/* Order */
+@layer reset, primeng;
+
+/* Reset CSS */
+@layer reset {
+    button,
+    input {
+        /* CSS to Reset */
+    }
+}
+`
+    };
+}

src/app/showcase/doc/guides/csslayer/specificitydoc.ts

@@ -0,0 +1,58 @@
+import { Component } from '@angular/core';
+import { Code } from 'src/app/showcase/domain/code';
+
+@Component({
+    selector: 'specificity-doc',
+
+    template: `
+        <app-docsectiontext>
+            <p class="notification">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.</p>
+            <p>
+                The <i>&#64;layer</i> 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
+                <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer">MDN</a> to begin with. In styled mode, PrimeNG wraps the built-in style classes under the <i>primeNG</i> 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.
+            </p>
+            <p>
+                For example, let's assume you need to remove the rounded borders of the InputSwitch component defined by the theme in use. In order to achieve this, <i>.p-inputswitch .p-inputswitch-slider</i> selector needs to be overriden. Without
+                the layers, we'd have to write a stronger css or use <i>!important</i> however, with layers, this does not present an issue as your CSS can always override PrimeNG with a more straightforward class name such as
+                <i>my-switch-slider</i>. Another advantage of this approach is that it does not force you to figure out the built-in class names of the components.
+            </p>
+            <div class="card flex justify-content-center">
+                <p-inputSwitch [(ngModel)]="checked" styleClass="my-inputswitch" />
+            </div>
+
+            <app-code [code]="code" selector="specificity-demo" [hideToggleCode]="true" [hideCodeSandbox]="true" [hideStackBlitz]="true"></app-code>
+            <p>Layers also make it possible to use CSS Modules, view the <a [routerLink]="['/theming/#cssmodules']"> CSS Modules </a> guide for examples.</p>
+        </app-docsectiontext>
+    `,
+    styles: `
+   :host ::ng-deep {
+    .my-inputswitch .p-inputswitch-slider {
+        border-radius: 0;
+     }
+     .my-inputswitch .p-inputswitch-slider:before  {
+        border-radius: 0;
+     }
+ }
+    `
+})
+export class SpecificityDoc {
+    checked: boolean = false;
+
+    code: Code = {
+        basic: `<p-inputSwitch [(ngModel)]="checked" styleClass="my-switch-slider" />
+        
+<style>
+
+.my-switch-slider {
+    border-radius: 0;
+}
+
+.my-switch-slider:before {
+    border-radius: 0;
+}
+
+</style>
+        `
+    };
+}

src/app/showcase/doc/guides/csslayer/tailwinddoc.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { Code } from 'src/app/showcase/domain/code';
+
+@Component({
+    selector: 'tailwind-doc',
+
+    template: `
+        <app-docsectiontext>
+            <p>
+                Tailwind CSS includes a reset utility in base called <a href="https://tailwindcss.com/docs/preflight" target="_blank" rel="noopener noreferrer">preflight</a>. If you are using this feature, wrap the base and utilities in separate
+                layers and make sure primeNG layer comes after the base.
+            </p>
+            <app-code [code]="code" selector="tailwind-demo" [hideToggleCode]="true" [hideCodeSandbox]="true" [hideStackBlitz]="true"></app-code>
+        </app-docsectiontext>
+    `
+})
+export class TailwindDoc {
+    code: Code = {
+        basic: `@layer tailwind-base, primeng, tailwind-utilities;
+        
+@layer tailwind-base {
+    @tailwind base;
+}
+
+@layer tailwind-utilities {
+    @tailwind components;
+    @tailwind utilities;
+}
+    `
+    };
+}

src/app/showcase/doc/guides/guidesdoc.module.ts

@@ -11,10 +11,15 @@ import { IntroductionDoc } from './accessibility/introductiondoc';
 import { SemanticHTMLDoc } from './accessibility/semantichtmldoc';
 import { WAIARIADoc } from './accessibility/waiariadoc';
 import { WCAGDoc } from './accessibility/wcagdoc';
-
+import { SpecificityDoc } from './csslayer/specificitydoc';
+import { ResetDoc } from './csslayer/resetdoc';
+import { InputSwitchModule } from 'primeng/inputswitch';
+import { TailwindDoc } from './csslayer/tailwinddoc';
+import { BootstrapDoc } from './csslayer/bootstrapdoc';
+import { NormalizeDoc } from './csslayer/normalizedoc';
 @NgModule({
-    imports: [CommonModule, AppCodeModule, AppDocModule, RouterModule, FormsModule, CheckboxModule],
+    imports: [CommonModule, AppCodeModule, AppDocModule, RouterModule, FormsModule, CheckboxModule, InputSwitchModule],
     exports: [AppDocModule],
-    declarations: [ColorsDoc, FormControlsDoc, IntroductionDoc, SemanticHTMLDoc, WAIARIADoc, WCAGDoc]
+    declarations: [ColorsDoc, FormControlsDoc, IntroductionDoc, SemanticHTMLDoc, WAIARIADoc, WCAGDoc, SpecificityDoc, ResetDoc, TailwindDoc, BootstrapDoc, NormalizeDoc]
 })
 export class GuidesDocModule {}

src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html

@@ -1 +1 @@
-<app-doc docTitle="CSS Layer - PrimeNG" header="CSS Layer"></app-doc>
+<app-doc docTitle="CSS Layer - PrimeNG" header="CSS Layer" [docs]="docs" description="Best practices for the PrimeVue cascade layer in styled mode."></app-doc>

src/app/showcase/pages/guides/csslayer/csslayerdemo.component.ts

@@ -1,9 +1,48 @@
 import { Component } from '@angular/core';
+import { BootstrapDoc } from 'src/app/showcase/doc/guides/csslayer/bootstrapdoc';
+import { NormalizeDoc } from 'src/app/showcase/doc/guides/csslayer/normalizedoc';
+import { ResetDoc } from 'src/app/showcase/doc/guides/csslayer/resetdoc';
+import { SpecificityDoc } from 'src/app/showcase/doc/guides/csslayer/specificitydoc';
+import { TailwindDoc } from 'src/app/showcase/doc/guides/csslayer/tailwinddoc';
 
 @Component({
     selector: 'css-layer',
     templateUrl: './csslayerdemo.component.html'
 })
 export class CssLayerDemoComponent {
-    docs = [];
+    docs = [
+        {
+            id: 'css-specificity',
+            label: 'CSS Specificity',
+            component: SpecificityDoc
+        },
+        {
+            id: 'reset',
+            label: 'Reset',
+            component: ResetDoc
+        },
+        {
+            id: 'libraries',
+            label: 'Libraries',
+            description: 'Compatibility between PrimeVue and CSS libraries.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind CSS',
+                    component:TailwindDoc
+                },
+                {
+                    id: 'bootstrap',
+                    label: 'Bootstrap',
+                    component:BootstrapDoc
+                },
+                {
+                    id: 'normalize',
+                    label: 'Normalize',
+                    component:NormalizeDoc
+                },
+
+            ]
+        }
+    ];
 }