Fixed #6822 - Better compat with CSS libraires like Tailwind, Bootstrap

apps/showcase/assets/styles/layout/_core.scss

@@ -2,6 +2,7 @@ html {
     font-size: 14px;
     font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+    line-height: normal;
 }
 
 .material {
@@ -33,7 +34,12 @@ a {
     color: var(--selection-text-color);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     margin-block: 1.5rem 1rem;
     margin-inline: 0;
     font-family: inherit;
@@ -86,13 +92,6 @@ button {
     font-feature-settings: inherit;
 }
 
-*,
-::before,
-::after {
-    border-width: 0;
-    border-style: solid;
-}
-
 textarea {
     resize: none;
 }

apps/showcase/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue

@@ -21,7 +21,7 @@
                 tableStyle="min-width: 50rem"
             >
                 <template #groupheader="slotProps">
-                    <img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle" class="ml-2" />
+                    <img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle; display: inline-block" class="ml-2" />
                     <span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
                 </template>
                 <Column field="representative.name" header="Representative"></Column>
@@ -64,7 +64,7 @@ export default {
         expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
         sortMode="single" sortField="representative.name" :sortOrder="1">
     <template #groupheader="slotProps">
-        <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" class="ml-2" />
+        <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle; display: inline-block" class="ml-2" />
         <span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
     </template>
     <Column field="representative.name" header="Representative"></Column>
@@ -96,7 +96,7 @@ export default {
                 expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
                 sortMode="single" sortField="representative.name" :sortOrder="1">
             <template #groupheader="slotProps">
-                <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" class="ml-2" />
+                <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle; display: inline-block" class="ml-2" />
                 <span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
             </template>
             <Column field="representative.name" header="Representative"></Column>
@@ -186,7 +186,7 @@ export default {
                 expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
                 sortMode="single" sortField="representative.name" :sortOrder="1">
             <template #groupheader="slotProps">
-                <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" class="ml-2" />
+                <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle; display: inline-block" class="ml-2" />
                 <span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
             </template>
             <Column field="representative.name" header="Representative"></Column>

apps/showcase/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue

@@ -33,7 +33,6 @@
                         <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
                     </template>
                 </Column>
-                <Column field="date" header="Date" style="min-width: 100px"></Column>
             </DataTable>
         </div>
     </DeferredDemo>
@@ -79,7 +78,6 @@ export default {
             <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
         </template>
     </Column>
-    <Column field="date" header="Date" style="min-width: 100px"></Column>
 </DataTable>
 `,
                 options: `
@@ -114,7 +112,6 @@ export default {
                     <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
                 </template>
             </Column>
-            <Column field="date" header="Date" style="min-width: 100px"></Column>
         </DataTable>
     </div>
 </template>
@@ -186,7 +183,6 @@ export default {
                     <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
                 </template>
             </Column>
-            <Column field="date" header="Date" style="min-width: 100px"></Column>
         </DataTable>
     </div>
 </template>

apps/showcase/tailwind.config.js

@@ -2,9 +2,6 @@
 const primeui = require('tailwindcss-primeui');
 
 module.exports = {
-    corePlugins: {
-        preflight: false
-    },
     darkMode: ['selector', '[class="p-dark"]'],
     content: ['./pages/**/*.vue', './layouts/**/*.vue', './components/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './error.vue'],
     plugins: [primeui],

package.json

@@ -31,6 +31,7 @@
         "build:showcase": "pnpm --filter showcase build",
         "build:apidoc": "pnpm --filter themes build:tokens && pnpm --filter showcase build:apidoc",
         "dev": "pnpm --filter showcase dev",
+        "preview": "pnpm --filter showcase preview",
         "hot:dev": "DEV_ENV=hot pnpm --filter showcase dev",
         "module:dev": "pnpm --filter @primevue/nuxt-module dev",
         "security:check": "pnpm audit --prod --audit-level high",

packages/core/src/base/style/BaseStyle.js

@@ -3,7 +3,9 @@ import { isNotEmpty, minifyCSS, resolve } from '@primeuix/utils/object';
 import { useStyle } from '@primevue/core/usestyle';
 
 const theme = ({ dt }) => `
-* {
+*,
+::before,
+::after {
     box-sizing: border-box;
 }
 

packages/primevue/src/datatable/style/DataTableStyle.js

@@ -7,6 +7,7 @@ const theme = ({ dt }) => `
 
 .p-datatable-table {
     border-spacing: 0;
+    border-collapse: separate;
     width: 100%;
 }
 

packages/primevue/src/datepicker/style/DatePickerStyle.js

@@ -68,6 +68,7 @@ const theme = ({ dt }) => `
     inset-inline-end: ${dt('form.field.padding.x')};
     margin-block-start: calc(-1 * (${dt('icon.size')} / 2));
     color: ${dt('datepicker.input.icon.color')};
+    line-height: 1;
 }
 
 .p-datepicker-fluid {

packages/primevue/src/treetable/style/TreeTableStyle.js

@@ -7,6 +7,7 @@ const theme = ({ dt }) => `
 
 .p-treetable-table {
     border-spacing: 0;
+    border-collapse: separate;
     width: 100%;
 }
 

packages/themes/src/presets/material/checkbox/index.js

@@ -90,21 +90,21 @@ export default {
 }
 
 .p-checkbox {
+    --p-md-check-icon-t: 10px;
+    --p-md-check-icon-w: 6px;
+    --p-md-check-icon-h: 12px;
+}
+
+.p-checkbox-sm {
     --p-md-check-icon-t: 8px;
     --p-md-check-icon-w: 4px;
     --p-md-check-icon-h: 10px;
 }
 
-.p-checkbox-sm {
-    --p-md-check-icon-t: 6px;
-    --p-md-check-icon-w: 2px;
-    --p-md-check-icon-h: 8px;
-}
-
 .p-checkbox-lg {
-    --p-md-check-icon-t: 10px;
+    --p-md-check-icon-t: 12px;
-    --p-md-check-icon-w: 6px;
+    --p-md-check-icon-w: 8px;
-    --p-md-check-icon-h: 14px;
+    --p-md-check-icon-h: 16px;
 }
 
 @keyframes p-md-check {