Update wording
parent
00c0434fe6
commit
0b1f286ee8
|
@ -2,13 +2,14 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>
|
<p>
|
||||||
The <a href="https://www.npmjs.com/package/primeclt" target="_blank" rel="noopener noreferrer">primeclt</a> is a command line utility by PrimeTek to assist project setup and migration. The <i>pf2tw</i> command is created for smooth
|
The <a href="https://www.npmjs.com/package/primeclt" target="_blank" rel="noopener noreferrer">primeclt</a> is a command line utility by PrimeTek to assist project setup and migration. The <i>pf2tw</i> command is created for smooth
|
||||||
migration between PrimeFlex to Tailwind CSS. As a prequisite, the <i>tailwindcss-primeui</i> is required to provide the matching classes that do not exist in core Tailwind CSS such as semantic colors and animations.
|
migration between PrimeFlex to Tailwind CSS. As a prequisite, the <i>tailwindcss-primeui</i> is required to provide the matching classes that do not exist in core Tailwind CSS such as semantic colors and animations. For flawless
|
||||||
|
migration, it is highly suggested to use PrimeVue v4 as the requirement of the tailwindcss plugin.
|
||||||
</p>
|
</p>
|
||||||
<p>Install PrimeCLT.</p>
|
<p>Install PrimeCLT.</p>
|
||||||
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
|
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
|
||||||
<p>Run the <i>pf2wt</i> in a directory that contains files to be migrated.</p>
|
<p>Run the <i>pf2wt</i> in a directory that contains files to be migrated.</p>
|
||||||
<DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
|
<DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
|
||||||
<p>There are a couple of minor limitations that are not migrated. PrimeVue v3 is not supported as the plugin is compatible with PrimeVue v4 only. In addition, following classes are not migrated as they have no counterparts.</p>
|
<p>There are a couple of utility classes that are not migrated as they have no counterparts, use flexbox utilities instead as replacements.</p>
|
||||||
<ul class="leading-loose">
|
<ul class="leading-loose">
|
||||||
<li>formgrid</li>
|
<li>formgrid</li>
|
||||||
<li>formgroup</li>
|
<li>formgroup</li>
|
||||||
|
|
|
@ -2,8 +2,9 @@
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>
|
<p>
|
||||||
The <a href="https://www.npmjs.com/package/tailwindcss-primeui" target="_blank" rel="noopener noreferrer">tailwindcss-primeui</a> is an official plugin by PrimeTek to provide first class integration between a Prime UI library like
|
The <a href="https://www.npmjs.com/package/tailwindcss-primeui" target="_blank" rel="noopener noreferrer">tailwindcss-primeui</a> is an official plugin by PrimeTek to provide first class integration between a Prime UI library like
|
||||||
PrimeVue and Tailwind CSS. In styled mode, the semantic colors such as primary and surfaces are provided as Tailwind utilities e.g. <i>bg-primary</i>, <i>text-surface-500</i>, <i>text-muted-color</i>.
|
PrimeVue and Tailwind CSS. It is designed to work both in styled and unstyled modes. For example, in styled mode the semantic colors such as primary and surfaces are provided as Tailwind utilities e.g. <i>bg-primary</i>,
|
||||||
|
<i>text-surface-500</i>, <i>text-muted-color</i> by deriving their values from the design tokens. This integration is not compatible with PrimeVue v3 and requires PrimeVue v4.
|
||||||
</p>
|
</p>
|
||||||
<p>View the <NuxtLink to="/tailwind/">Tailwind</NuxtLink> section for more details about the installation and the features.</p>
|
<p>View the <NuxtLink to="/tailwind/">Tailwind</NuxtLink> section for more details about how to use Tailwind CSS with PrimeVue efficiently.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>
|
<p>
|
||||||
Tailwind CSS in particular is a popular choice, we have even build <a href="https://tailwind.primevue.org">Tailwind CSS presets</a> for the unstyled mode to be able to use the utility classes to style the PrimeVue components. During this
|
Tailwind CSS in particular is a popular choice, we have even built the <a href="https://tailwind.primevue.org">Tailwind CSS presets</a> spin-off project for the unstyled mode to be able to use the utility classes to style the PrimeVue
|
||||||
work, we've realized that the value added by PrimeFlex such as providing the PrimeVue theming as utility classes can be implemented as a Tailwind plugin. As part of PrimeVue v4, a tailwind-primeui plugin has been created for the seamless
|
components. During this work, we've realized that the value added by PrimeFlex such as providing the PrimeVue theming as utility classes can be implemented as a Tailwind plugin. As part of PrimeVue v4, a tailwind-primeui plugin has been
|
||||||
integration, the website templating demos have been migrated from PrimeFlex to Tailwind and a converter tool called <i>pf2tw</i> has been created. In summary, PrimeTek officially suggests Tailwind CSS as the replacement for PrimeFlex.
|
created for the seamless integration, the website templating demos have been migrated from PrimeFlex to Tailwind and a converter tool called <i>pf2tw</i> has been created. In summary, PrimeTek officially suggests Tailwind CSS as the
|
||||||
|
replacement for PrimeFlex.
|
||||||
</p>
|
</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
</template>
|
</template>
|
||||||
|
|
Loading…
Reference in New Issue