IconField: icons do not appear inside the visual input area in Tailwind

[jambudipa]

Describe the bug

I am unable to create a Stackblitz because the imports of primereact/inputicon and primereact/iconfield do not appear to work. I think I need help with that initially!

When using IconField, like this:

return (
  <IconField iconPosition="left">
    <InputIcon>
      <FontAwesomeIcon
        icon={faMagnifyingGlass}
        size={'lg'}
        color={'var(--color-highlight-350)'}
      />
    </InputIcon>
    <InputText v-model="value1" placeholder="Search" />
  </IconField>
);

...the icon is rendered outside the box.

Reproducer

No response

System Information

System:
OS: macOS 15.0
CPU: (20) arm64 Apple M1 Ultra
Memory: 974.88 MB / 64.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v20.11.1/bin/yarn
npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
pnpm: 9.4.0 - /opt/homebrew/bin/pnpm
Browsers:
Chrome: 127.0.6533.100
Safari: 18.0

Steps to reproduce the behavior

...this will be easier when I can get Stackblitz to work

Expected behavior

Icon appears inside the input area

[melloware]

@jambudipa this should get you started: https://stackblitz.com/edit/1tubmv?file=src%2FApp.tsx

[github-actions]

Please fork the Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

[jambudipa]

Thank you for that @melloware

I have discovered the problem. It appears there is no tailwind passthrough config for the IconField component. Thus these components are not rendering as per the demo.

Essentially, I copied the tailwind passthrough config from the repo and tweaked it for my own styling:

<PrimeReactProvider value={{ unstyled: true, pt: Tailwind }}>
  <RouterProvider router={router} />
</PrimeReactProvider>

Perhaps this is entirely the wrong approach? Or perhaps the config for this / these components was overlooked for tailwind?

[melloware]

It sounds like a bug and that it needs to be added to the default TailWind config.

[jambudipa]

Aha ok, thanks. Is there anything I need to do?

[melloware]

well you can submit a PR if you figure out what Tailwind styles need to be applied?

[jambudipa]

Ok, well I will take a look, try to reproduce the styles of the demo.

[gcko]

Hey @jambudipa @melloware , I created a PR that should fix the lack of Tailwind styling.

The main issue I found is that IconField works by wrapping other components. This means that context from the parent component needs to be passed in some way so that children can properly render their styling.

@melloware Please look at the method I have implemented and confirm if it works. I am not sure if PrimeReact already has an internal library that handles this case, if it does please LMK and I will refactor.