How to amend some of the css classes on components with Taliwind Unstyled?

[bhaidar]

Hi,

I am trying to use the PrimeVue components like Dropdown and Input*** components. At the same time, I want to change some of the CSS classes.

For example, in the InputNumber or InputText, I want to make the background bg-gray-50. I cant get this to work:

Stackblitz sample

Also, is there a way I could apply those changes globally without having to change it on every component?

Thanks

[tugcekucukoglu]

These changes could be applied globally. mergeSections and mergeProps options control how to use the Tailwind theme object. For example;

import Tailwind from 'primevue/passthrough/tailwind';
import { usePassThrough } from 'primevue/passthrough';

app.use(PrimeVue, {
  pt: usePassThrough(
    Tailwind,
    {
      inputtext: { root: { class: '***' } },
    },
    { mergeSections: true, mergeProps: true }
  ),
});

[bhaidar]

Thanks a lot for your feedback.

I've updated the code and seems still not working properly.

I appreciate if you can have a quick look :-)

https://stackblitz.com/edit/2aemb1

[cagataycivici]

It is applied but bg-white overrides it. In general, after receiving community feedback we're not suggesting usePassThrough anymore and use a copy paste approach of the default preset instead, I've forked your stackblitz. With copy-paste, you have full control over the classes, with usePassThrough it is like trying to override CSS classes, dealing with mergeSection, mergeProps.

Copy-Paste is the way to go, new upcoming docs and the new Tailwind Demos will promote this one instead.

[bhaidar]

Oh great! Thanks a lot.

This means, I always have to specify all the classes at once, even if I want to change one class. Correct?

[johndegey]

Hello @cagataycivici,

I'm just in the process of validating PrimeVue + Tailwind as a replacement for Vuetify.
I really appreciate the separation of the presentation layer, it's a great move.

I've been playing with usePassThrough, using two pass, one with mergeProp = true and the second with false.
I did not found that very easy and was wondering how to use twMerge in this context... before finding your sugestion here.

Could you tell me what we need to copy/paste ?
Is it passthrough/tailwind/index.js ? Or just the index part of this file ?
It is not quite clear for me what to do exactly...

Thansk for your help

PS: really appreciate your video too ;)

[deepfriedmind]

I've forked your stackblitz

@cagataycivici I'm getting a 404 on that URL.

[bhaidar]

@deepfriedmind same here!