primeng v18.0.0-beta.2 Text Input default size are different from V17 and docs

[guilherme9718]

Describe the bug

I was creating a new application with primeng v18 and was bothered by my inputs (text input, dropdown, buttons etc..;) components size do not match the size of v18 docs inputs. I tested multiple styles to change this default size but I did'nt succeeded.

Below I show the differece in size of TextInput in Google Chrome DevTools with a v18/v17 simple project and the docs:

On v18 with Tailwind (https://stackblitz.com/edit/stackblitz-starters-lg5zvo?file=README.md)

On v17 (https://stackblitz.com/edit/stackblitz-starters-lresfo?file=package.json,src%2Fapp%2Fapp.routes.ts)

On v18 Docs (https://v18.primeng.org/inputtext)

Can you all show me what I'm doing wrong? How can I set the default size of inputs same as the v18 docs (222 x 33 pixels)?

Environment

Windows 10 Google Chrome 129.0.6668.101 64 bits

Angular: 18.2.8 Primeng: 18.0.0-beta.2 tailwind: 3.4.14 tailwindcss-primeui: 0.3.4

app.component.html

<main class="main">
  <div class="flex flex-col align gap-8 items-center">
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
    <input pInputText />
  </div>
</main>
<router-outlet />

app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { PrimeNGConfig } from 'primeng/api';
import { Aura } from 'primeng/themes/aura';
import { InputTextModule } from 'primeng/inputtext';
import { FloatLabelModule } from 'primeng/floatlabel';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, InputTextModule, FloatLabelModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  constructor(private primengConfig: PrimeNGConfig) {
    this.primengConfig.theme.set({
        preset: Aura,
            options: {
                cssLayer: {
                    name: 'primeng',
                    order: 'tailwind-base, primeng, tailwind-utilities'
                }
            }
        });
    }
}

styles.scss

/* You can add global styles to this file, and also import other style files */
@layer tailwind-base, primeng, tailwind-utilities;

@layer tailwind-base {
@tailwind base;
}

@layer tailwind-utilities {
@tailwind components;
@tailwind utilities;
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require('tailwindcss-primeui')],
}

Reproducer

https://stackblitz.com/edit/stackblitz-starters-lg5zvo?file=README.md

Angular version

18.2.8

PrimeNG version

18.0.0-beta.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.13.1

Browser(s)

Chrome 129.0

Steps to reproduce the behavior

1. Start new angular project ng new;
2. Install primeng v18 according to docs (https://v18.primeng.org/installation);
3. Install tailwind accoding to docs (https://v18.primeng.org/tailwind);
4. In app.component.html place <input pInputText /> and import InputTextModule in app.component.ts
5. Check the default size of input;

Expected behavior

I Expected the default size of inputs be the same as the v18 docs (222 x 33 pixels). But they are 207 x 42 pixels.

[mauritsstrijker]

same, even after following each step from the documentation, inputs have different aspect ratios than the doc examples, my v17 projects are fine

[LuisPerezLec]

Hi there, you can find in the documentation information about Scale that the scale of components is based on your font-size. By default, your web browser uses 16px for font-size. And the documentation is using a font-size of 14px. So, you can add on your style.css file something like html { font-size: 14px; }

[LuisPerezLec]

same, even after following each step from the documentation, inputs have different aspect ratios than the doc examples, my v17 projects are fine

Same answer

[jicedtea]

Hi there, you can find in the documentation information about Scale that the scale of components is based on your font-size. By default, your web browser uses 16px for font-size. And the documentation is using a font-size of 14px. So, you can add on your style.css file something like html { font-size: 14px; }

PrimeNG 18 with tailwind always has larger component, text... sizes than without tailwind, regardless of whether font-size is set or not.

[mertsincan]

We made improvements in new presets. But in general, font-size may have an effect. https://github.com/primefaces/primeng/issues/16809