Styles should not rely on base font-size

[frankmichel]

First of all, great work on everything! The Tailwind preset looks great. However, there is one major issue with it. Since it requires a base font-size of 14px to be set on the html tag, it makes all other Tailwind-styled components incompatible which do not share this same base font-size.

Tailwind itself styles its components based on the default font-size of modern browsers, which is 16px. So no base font-size is set on the html tag.

Since not only font-sizes, but all kinds of size-based styles (width, height, spacing, etc.) are relative to the base font size (since Tailwind is using rem) it makes Primevue incompatible with any other Tailwind styled html component. It breaks app designs with existing Tailwind layouts. Or Primevue components are way bigger than displayed in the documentation (and bigger than they should be).

I think it is strongly recommended to remove the 14px restriction and restyle all components without the need of any base font-size. This way Primevue will be much more compatible with other frameworks, templates and snippets.

[frankmichel]

I was able to make Primevue work with other Tailwind components which rely on a base font-size of 16px (or none - which is most browser's default).

In order to make it work, we need to convert all rem values of the Primevue styles by a factor of 0.875 (14px/16px).

This can be achieved with a custom postcss plugin and one additional css declaration.

If you have defined a base font-size of 14px for Primevue, remove it.

In the base.css (the file which contains the Primevue :root etc. styles add this at the bottom:

.p-component {
    font-size: 0.875rem;
}

In your project folder, add a postcss-primevue.js (or whatever you want to name it) and insert this code:

export default (options = {}) => {
    const { scale = 0.875 } = options;

    return {
        postcssPlugin: 'postcss-primevue',
        Once(root) {
            const filePath = root.source?.input.file;
            if (filePath && filePath.includes('primevue')) {
                root.walkDecls(decl => {
                    if (decl.value.includes('rem')) {
                        decl.value = decl.value.replace(/(\d*\.?\d+)rem/, (_, num) => `${num * scale}rem`);
                    }
                });
            }
        },
    };
};

Finally, move your postcss.config.js to vite.config.js by adding this configuration:

import postcssPrimevue from './postcss-primevue.js';
import postcssImport from 'postcss-import';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

export default defineConfig({
    css: {
        postcss: {
            plugins: [
                postcssImport(),
                tailwindcss(),
                autoprefixer(),
                postcssPrimevue({ scale: 0.875 }),
            ],
        },
    },
    ...

You can then remove the postcss config in the postcss.config.js file by simply reverting it to:

module.exports = {}

since the postcss config is included in the vite config now.

Restart vite and it should work now. Primevue styles should be scaled down by the factor of 0.875 which makes them visually compatible with other Tailwind libraries.

[xak2000]

I totally agree. This is very strange decision to "randomly" change base rem size to 14px from the default 16px.

I understand that this is not a problem if you use PrimeVue from the beginning of your project and it is the only component library you use. But if you are trying to add PrimeVue to an existing project or you just trying to use some another component library alongside PrimeVue, then things break. You cannot just change base rem size to 14px in your project because all other designs already assume the default 16px. This forces developers to download a preferred default theme (e.g. Aura) and then override each and every rem values in the semantic section (and maybe in some components too), multiplying them by 14/16.

Actually, this doesn't work well as some values are hardcoded in the theme. For example font-size: 1rem; in p-button. So, the hack with postcss plugin maybe the only solution except perhaps copying a whole theme (e.g. Aura) to the project and modifying it. But this is not very good approach. Extending theme with definePreset would be much more convenient.

I'm trying to understand the reason for this decision: change the default rem size to 14px. While it makes some use-cases harder, it doesn't make anything easier, does it? So, why not keep the default 16px and just design themes with this base size in mind?.. It would make so many developer's lives easier. :)

I understand that using all default themes with 16px is possible and formally this don't "break" anything, but components look too big. I'm almost sure the look of all 4 standard themes with 16px base rem is not the intended look. They were not designed with 16px in mind. That is why the PrimeVue site that demonstrates the components uses 14px and not the default 16px. With 14px base size all 4 themes look perfect, though.

[dlokman]

I found it much easier to keep 14px for base html size so that we won't have to make any PrimeNg changes.

The list for Tailwind theme variables is pretty small and we can just update that to account for 14px base instead of 16px base.
The list is available at https://tailwindcss.com/docs/theme#default-theme-variable-reference

Since i updated base html font size from 16px to 14px i multiply all the rem values by 16/14.

In Tailwind v4 we override the theme in styles.css file directly (there is no tailwind.config.cs)

After this change both Tailwind version 4 and PrimeNg version 19 component appear to be ok in sizes.

Try this and let me know if it works for you as well. I just tried this on a new test project.

If someone thinks this can cause any other issue, let us know as well. Thanks

---in styles.css---
@import "tailwindcss";

@theme {

--spacing: calc(0.25rem * 16/14);

--breakpoint-sm: calc(40rem * 16/14);
--breakpoint-md: calc(48rem * 16/14);
--breakpoint-lg: calc(64rem * 16/14);
--breakpoint-xl: calc(80rem * 16/14);
--breakpoint-2xl: calc(96rem * 16/14);

--container-3xs: calc(16rem * 16/14);
--container-2xs: calc(18rem * 16/14);
--container-xs: calc(20rem * 16/14);
--container-sm: calc(24rem * 16/14);
--container-md: calc(28rem * 16/14);
--container-lg: calc(32rem * 16/14);
--container-xl: calc(36rem * 16/14);
--container-2xl: calc(42rem * 16/14);
--container-3xl: calc(48rem * 16/14);
--container-4xl: calc(56rem * 16/14);
--container-5xl: calc(64rem * 16/14);
--container-6xl: calc(72rem * 16/14);
--container-7xl: calc(80rem * 16/14);

--text-xs: calc(0.75rem * 16/14);
--text-sm: calc(0.875rem * 16/14);
--text-base: calc(1rem * 16/14);
--text-lg: calc(1.125rem * 16/14);
--text-xl: calc(1.25rem * 16/14);
--text-2xl: calc(1.5rem * 16/14);
--text-3xl: calc(1.875rem * 16/14);
--text-4xl: calc(2.25rem * 16/14);
--text-5xl: calc(3rem * 16/14);
--text-6xl: calc(3.75rem * 16/14);
--text-7xl: calc(4.5rem * 16/14);
--text-8xl: calc(6rem * 16/14);
--text-9xl: calc(8rem * 16/14);

--radius-xs: calc(0.125rem * 16/14);
--radius-sm: calc(0.25rem * 16/14);
--radius-md: calc(0.375rem * 16/14);
--radius-lg: calc(0.5rem * 16/14);
--radius-xl: calc(0.75rem * 16/14);
--radius-2xl: calc(1rem * 16/14);
--radius-3xl: calc(1.5rem * 16/14);
--radius-4xl: calc(2rem * 16/14);
}

html, body {
height: 100%;
font-family: "roboto", Helvetica, Arial, sans-serif;
font-size: 14px !important; /1rem = 14px needed for PrimeNg/
}