diff --git a/doc/guides/csslayer/BootstrapDoc.vue b/doc/guides/csslayer/BootstrapDoc.vue
index 58c76a568..f7a72559f 100644
--- a/doc/guides/csslayer/BootstrapDoc.vue
+++ b/doc/guides/csslayer/BootstrapDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <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>
-        <DocSectionCode :code="code" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/guides/csslayer/NormalizeDoc.vue b/doc/guides/csslayer/NormalizeDoc.vue
index d158c8505..383808906 100644
--- a/doc/guides/csslayer/NormalizeDoc.vue
+++ b/doc/guides/csslayer/NormalizeDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <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 primevue coming after the normalized layer.</p>
-        <DocSectionCode :code="code" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
     </DocSectionText>
 </template>
 
diff --git a/doc/guides/csslayer/ResetDoc.vue b/doc/guides/csslayer/ResetDoc.vue
index 8026d6a1e..25bf46f4e 100644
--- a/doc/guides/csslayer/ResetDoc.vue
+++ b/doc/guides/csslayer/ResetDoc.vue
@@ -5,7 +5,7 @@
             override the PrimeVue 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>primevue</i> comes after your layer since layers defined after has higher precedence. This way, your Reset CSS does not get in the way of PrimeVue components.
         </p>
-        <DocSectionCode :code="code" />
+        <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>If you are using Nuxt, use the built-in <i>cssLayerOrder</i> property of the PrimeVue nuxt module instead.</p>
     </DocSectionText>
 </template>
diff --git a/doc/guides/csslayer/SpecificityDoc.vue b/doc/guides/csslayer/SpecificityDoc.vue
index aa343cf39..c955972fe 100644
--- a/doc/guides/csslayer/SpecificityDoc.vue
+++ b/doc/guides/csslayer/SpecificityDoc.vue
@@ -14,7 +14,7 @@
         <div class="card flex justify-content-center">
             <InputSwitch v-model="checked" :pt="{ slider: 'my-switch-slider' }" />
         </div>
-        <DocSectionCode :code="code" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
         <p>Layers also make it possible to use CSS Modules, view the <NuxtLink to="/theming/#cssmodules">CSS Modules</NuxtLink> guide for examples.</p>
     </DocSectionText>
 </template>
diff --git a/doc/guides/csslayer/TailwindDoc.vue b/doc/guides/csslayer/TailwindDoc.vue
index dda77ddf2..355af39b5 100644
--- a/doc/guides/csslayer/TailwindDoc.vue
+++ b/doc/guides/csslayer/TailwindDoc.vue
@@ -4,7 +4,7 @@
             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 primevue layer comes after the base.
         </p>
-        <DocSectionCode :code="code" />
+        <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
     </DocSectionText>
 </template>
 
@@ -18,12 +18,12 @@ export default {
 @layer tailwind-base, primevue, tailwind-utilities;
 
 @layer tailwind-base {
-  @tailwind base;
+    @tailwind base;
 }
 
 @layer tailwind-utilities {
-  @tailwind components;
-  @tailwind utilities;
+    @tailwind components;
+    @tailwind utilities;
 }
 `
             }