Update doc to add purge
parent
ff2cd68a45
commit
ffc1dc6754
|
@ -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}"
|
||||
],
|
||||
...
|
||||
}`
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue