Override

The additional classes defined with the pt property of a particular component are merged to the global configuration. The first panel in example below does not apply any overrides but the second one changes the font of the title. By default, the classes of a defined section e.g. title replace the section with the same name. This behavior can be customized per case with the ptOptions that is covered in the next section.

<Panel header="Global" class="mb-4">Content</Panel>
<Panel header="Overriden" :pt="{ title: 'text-xl font-bold font-mono text-primary-500' }">Content</Panel>

Merge customization is not an option that you'd need to use frequently however understanding how it works would help in scenarios where a certain component needs to be customized. The merge strategy is configured using the ptOptions of a component. Currently it contains two options; mergeSections and mergeProps. Default values are true for sections and false for props. To explain all four combinations, let's use a global configuration and a local one to compare the outputs.

//global preset
app.use(PrimeVue, { 
    pt: {
        panel: {
            header: 'bg-gray-50 text-gray-900 p-4 border',
            content: 'border p-4 text-gray-900',
            footer: 'p-4 border'
        }
    } 
});

<!-- local preset -->
<Panel header="Overriden" :pt="{ header: 'text-xl text-primary-500', content: 'p-8' }">Content</Panel>

With the default values, component would use the following values. Since mergeProps is false, the sections with the same name (header, content) are overriden. There is no footer in the local component so the global footer section is used because mergeSections is true.

// Default ptOptions as { mergeSections: true, mergeProps: false }
panel: {
    header: 'text-xl text-primary-500',
    content: 'p-8',
    footer: 'p-4 border'
}

The other 3 combinations would result in the values below.

// ptOptions as { mergeSections: true, mergeProps: true }
panel: {
    header: 'bg-gray-50 text-gray-900 p-4 border text-xl text-primary-500',
    content: 'border p-4 text-gray-900 p-8',
    footer: 'p-4 border'
}

// ptOptions as { mergeSections: false, mergeProps: false }
// this basically ignores the global config
panel: {
    header: 'text-xl text-primary-500',
    content: 'p-8'
    //no footer
}

// ptOptions as { mergeSections: false, mergeProps: true }
panel: {
    header: 'bg-gray-50 text-gray-900 p-4 border text-xl text-primary-500',
    content: 'border p-4 text-gray-900 p-8'
    //no footer
}

Tailwind provides a ! prefix to mark a utility as important, as an edge case when mergeProps is enabled the utility classes of the local configuration may not be used due to CSS specifity. In these particular cases prefixing the class with ! would be a solution. The two input fields in the following example tries to change the background color of the default configuration, first one fails because .bg-blue-500 is defined before the background class (bg-surface-0) of the preset by Tailwind code generation.