diff --git a/components/landing/HeroSection.vue b/components/landing/HeroSection.vue index efa297b3b..9acb97cff 100644 --- a/components/landing/HeroSection.vue +++ b/components/landing/HeroSection.vue @@ -7,8 +7,8 @@ target="_blank" rel="noopener noreferrer" style="border-radius: 50px" - class="bg-yellow-300 border-1 border-yellow-400 text-yellow-900 py-1 px-3 xl:align-self-start font-semibold text-lg transition-colors transition-duration-300 hover:border-yellow-600" - >🎉 Introducing the Tailwind CSS Presets 🎉 Introducing the Tailwind Presets
@@ -141,6 +141,12 @@
menuButton: {
width: 'auto',
root: 'p-2'
+ },
+ menu: {
+ root: {
+ style: 'width: 10rem; min-width: auto',
+ },
+ action: 'p-2'
}
}"
/>
diff --git a/doc/passthrough/UsePassThroughDoc.vue b/doc/passthrough/UsePassThroughDoc.vue
index 0862b2637..88a92c574 100644
--- a/doc/passthrough/UsePassThroughDoc.vue
+++ b/doc/passthrough/UsePassThroughDoc.vue
@@ -1,8 +1,7 @@
- An existing pass through configuration is customized with the usePassThrough utility. The first parameter is the object to customize, the second parameter is the customizations and the final parameter is the behavior of merging.
- One of the example use cases is customizing existing unstyled themes like Tailwind.
+ An existing pass through configuration is customized with the usePassThrough utility. The first parameter is the object to customize, the second parameter is the customizations and the final parameter is the merge strategy.
@@ -22,15 +21,15 @@ export default {
return {
code1: {
basic: `
-import {createApp} from "vue";
+import { createApp } from "vue";
import PrimeVue from "primevue/config";
import { usePassThrough } from "primevue/passthrough";
-import Tailwind from "primevue/passthrough/tailwind";
+import BasePreset from "./basepreset";
const app = createApp(App);
-const CustomTailwind = usePassThrough(
- Tailwind,
+const CustomPreset = usePassThrough(
+ BasePreset,
{
panel: {
title: {
@@ -44,13 +43,13 @@ const CustomTailwind = usePassThrough(
}
);
-app.use(PrimeVue, { unstyled: true, pt: CustomTailwind });
+app.use(PrimeVue, { unstyled: true, pt: CustomPreset });
`
},
code2: {
basic: `
-const CustomTailwind = usePassThrough(
- Tailwind,
+const CustomPreset = usePassThrough(
+ BasePreset,
{
panel: {
header: 'my_panel_header'
@@ -66,8 +65,8 @@ const CustomTailwind = usePassThrough(
},
code3: {
basic: `
-const CustomTailwind = usePassThrough(
- Tailwind,
+const CustomPreset = usePassThrough(
+ BasePreset,
{
panel: {
header: 'my_panel_header'
@@ -83,8 +82,8 @@ const CustomTailwind = usePassThrough(
},
code4: {
basic: `
-const CustomTailwind = usePassThrough(
- Tailwind,
+const CustomPreset = usePassThrough(
+ BasePreset,
{
panel: {
header: 'my_panel_header'
@@ -99,8 +98,9 @@ const CustomTailwind = usePassThrough(
`
},
code5: {
- basic: `const CustomTailwind = usePassThrough(
- Tailwind,
+ basic: `
+const CustomPreset = usePassThrough(
+ BasePreset,
{
panel: {
header: 'my_panel_header'