Skip to content

Select: .p-select class does not exist at first launch #8219

@florianjea

Description

@florianjea

Describe the bug

I have a styling issue with my Select. When I deploy a new build or open the local server (yarn dev) in a new incognito mode window, the style of the “p-select” class cannot be found in the styles when I inspect the page. The Select looks like this:

At first launch After a refresh
Image Image

What's strange is that the other components have absolutely no issue with their styles. Only Select.

Pull Request Link

No response

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template

Environment

Stack:

  • vue.js: 3.5.22
  • primevue: 4.4.1
  • primeuix/themes: 1.2.5
  • tailwindcss: 4.1.15
  • tailwindcss-primeui: 0.6.1
  • tailwindcss/vite: 4.1.15
  • vite: 7.1.11

Style.css:
@import 'tailwindcss' important;
@import 'tailwindcss-primeui';

PrimeVue options:
{ theme: { preset: MyPreset, options: { darkModeSelector: '.dark-theme', cssLayer: { name: 'primevue', order: 'theme, base, primevue', }, }, }

Vue version

3.5.22

PrimeVue version

4.4.1

Node version

22.17.0

Browser(s)

No response

Steps to reproduce the behavior

  • Deploy a new build to your server and launch the app
    or
  • Use vite and start server. Open in a new incognito mode window with the url localhost:5173

Expected behavior

At first launch Expected behavior
Image Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: Needs TriageIssue will be reviewed by Core Team and a relevant label will be added as soon as possible

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions