vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update TW doc

pull/5880/head
Cagatay Civici 2024-06-13 08:48:27 +03:00
parent ff3fb8104e
commit abc8676c46
4 changed files with 72 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/showcase/assets/styles/layout/_doc.scss
View File

@ -162,6 +162,7 @@
border-radius: 10px;
background: var(--mark-background);
color: var(--mark-text);
margin-bottom: 1rem;
}
.doc-section-nav {

61
apps/showcase/doc/tailwind/OverrideDoc.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<DocSectionText v-bind="$attrs">
<p>In styled mode, Tailwind utilities may not be able to override the default styling due to css specificity, there are two possible solutions.</p>
<h3>Important</h3>
<p>Use the <i>!</i> as a prefix to enforce the styling.</p>
<DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
<h3>CSS Layer</h3>
<p>
Enable PrimeVue CSS layer and configure the tailwind styles to have higher specificity with layering. This way, <i>!</i> prefix is not required. If you are using Nuxt, there is a
<NuxtLink to="/nuxt/#layerorder">cssLayerOrder</NuxtLink> property to define the order.
</p>
<DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
<DocSectionCode :code="code3" importCode hideToggleCode hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
<InputText placeholder="Overriden" class="!p-8" />
`
},
code2: {
basic: `
import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';
const app = createApp(App);
app.use(PrimeVue, {
theme: {
preset: Aura,
options: {
cssLayer: true
}
}
});
`
},
code3: {
basic: `
@layer tailwind-base, primevue, tailwind-utilities;
@layer tailwind-base {
@tailwind base;
}
@layer tailwind-utilities {
@tailwind components;
@tailwind utilities;
}
`
}
};
}
};
</script>

1
apps/showcase/doc/tailwind/PresetsDoc.vue
View File

@ -1,5 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<div class="doc-notification">Currently, the Tailwind CSS Presets are not compatible with v4 and will be with a future update after v4 final.</div>
<p>
In unstyled mode of PrimeVue, default styling elements like design tokens and css classes are turned off so that you have full control over the component styling with pass-through properties. This feature is quite useful when you'd like
to build your own UI library based on a custom design by wrapping PrimeVue components or simply utilitze Tailwind CSS to style the PrimeVue components.

12
apps/showcase/pages/tailwind/index.vue
View File

@ -1,13 +1,13 @@
<template>
<Head>
<Title>Tailwind CSS - PrimeVue</Title>
<Meta name="description" content="Integration between PrimeVue and Tailwind CSS" />
<Meta name="description" content="Integration between PrimeVue and Tailwind CSS both in styled and unstyled modes" />
</Head>
<div class="doc">
<div class="doc-main">
<div class="doc-intro">
<h1>Tailwind CSS</h1>
<p>Integration between PrimeVue and Tailwind CSS.</p>
<p>Integration between PrimeVue and Tailwind CSS both in styled and unstyled modes.</p>
</div>
<DocSections :docs="docs" />
</div>
@ -18,6 +18,7 @@
<script>
import AnimationsDoc from '@/doc/tailwind/AnimationsDoc.vue';
import ExtensionsDoc from '@/doc/tailwind/ExtensionsDoc.vue';
import OverrideDoc from '@/doc/tailwind/OverrideDoc.vue';
import OverviewDoc from '@/doc/tailwind/OverviewDoc.vue';
import PluginDoc from '@/doc/tailwind/PluginDoc.vue';
import PresetsDoc from '@/doc/tailwind/PresetsDoc.vue';
@ -41,7 +42,7 @@ export default {
},
{
id: 'plugin',
label: 'PluginDoc',
label: 'Plugin',
component: PluginDoc
},
{
@ -49,6 +50,11 @@ export default {
label: 'Extensions',
component: ExtensionsDoc
},
{
id: 'override',
label: 'Override',
component: OverrideDoc
},
{
id: 'samples',
label: 'Samples',