Merge branch 'prod'
commit
cb02937382
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue