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
|
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.
|
is exclusive to unstyled mode, the <i>unstyled</i> setting is required in addition.
|
||||||
</p>
|
</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>
|
<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>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
code: {
|
code1: {
|
||||||
basic: `import {createApp} from "vue";
|
basic: `import {createApp} from "vue";
|
||||||
import PrimeVue from "primevue/config";
|
import PrimeVue from "primevue/config";
|
||||||
import Tailwind from "primevue/tailwind";
|
import Tailwind from "primevue/tailwind";
|
||||||
|
@ -22,6 +27,17 @@ import Tailwind from "primevue/tailwind";
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
|
|
||||||
app.use(PrimeVue, { unstyled: true, pt: Tailwind });`
|
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