Code section updates

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>
 

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>
 

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>

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>

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 components;
-  @tailwind utilities;
+    @tailwind utilities;
 }
 `
             }