Update doc to add purge

pull/4203/head
Cagatay Civici 2023-08-02 10:41:24 +03:00
parent ff2cd68a45
commit ffc1dc6754
1 changed files with 18 additions and 2 deletions

View File

@ -5,16 +5,21 @@
The built-in default theme is basically a <PrimeVueNuxtLink to="/passthrough">global pass through</PrimeVueNuxtLink> configuration that needs to be imported from <i>primevue/tailwind</i> path and then defined during setup. Since the theme
is exclusive to unstyled mode, the <i>unstyled</i> setting is required in addition.
</p>
<DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz />
<p>
Tailwind uses PurgeCSS internally to remove unused classes, since PrimeVue components are loaded from node_modules the <i>content</i> property at <i>tailwind.config.js</i> needs to be aware of PrimeVue, otherwise the classes utilized in
the theme will be removed as well.
</p>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<p>Voilà 💚, you now have 90+ awesome Vue UI components styled with Tailwind that will work in harmony with the rest of your application.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
code1: {
basic: `import {createApp} from "vue";
import PrimeVue from "primevue/config";
import Tailwind from "primevue/tailwind";
@ -22,6 +27,17 @@ import Tailwind from "primevue/tailwind";
const app = createApp(App);
app.use(PrimeVue, { unstyled: true, pt: Tailwind });`
},
code2: {
basic: `export default {
...
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
"./node_modules/primevue/**/*.{vue,js,ts,jsx,tsx}"
],
...
}`
}
};
}