Theming Prime UI Libraries with Tailwind CSS

[@ChrisBeech]

Wow, this is ideal! Hoping it lands for PrimeNg soon too. Thanks for the incredible work you and the team are doing!

[@cagataycivici]

@@ChrisBeech First thing to do after PrimeNG v18 final.

[@legrandtalk]

Yes , we wait for primeng ! Thanks !

[@legrandtalk]

​@@cagataycivicithanks, the release date is the same like prime blocks for primeng ?

[@salzkraut8176]

Oh boy. What an upgrade. Fucking finally a library that has well styled base components that can be easily restyled when you need them. Yay

[@HectorMorada]

So Nice improvement thank you brother

[@fullstacklarry]

OG Primetime! I Recently updated to v.4 after realizing that the Nuxt module that I was currently on could not be upgraded to 4. Going for unstyled mode this time and the tailwind preset featue. It is nice I like it. I like how you can handle the styles for the components in one file, comment out the ones that you don't need, and the type error support.

[@frederickvalone6729]

Nice tutorial, thanks! I have a Nuxt 4 question. If you have opted into Nuxt 4 and are using the app base directory for assets, components, composables, layouts, app.vue .etc. Where do you place the tailwind.config, and postcss.config, in the base Nuxt directory with the nuxt.config or in the app directory on the same level as app.vue?

[@aturan-fo1qt]

👍👍

[@mitjasiska]

Amazing! 🤩 Thank you!

[@NFM-nb7dl]

what abou new sakai dashboard for Angular ?

[@gordonfranke3190]

How can i get updates and bug fixes when i copy the files and adjust to my needs. I must merge the new release with my existing files. Or remember my changes. Is there any better alternative?

[@theintjengineer]

Yes, for PrimeNG, please.

[@ahsan2649]

So passthrough presets are deprecated now? Will there be more styled tailwind presets?

[@krycekaiolfi]

I hope not. Because PT is not a library dependent. And I think it is more powerful than this. Also, not everyone is using tailwind.

[@hectormorada957]

thank youu

[@sivareddyuppathi4828]

But how to add prefix like tw- any approach, insted of ading manually?

[@ragura]

Thanks for releasing this option! Just to be clear, this is meant as an option only if you want to customize the actual components for reuse, not if you just want a small variant now and then, right?

[@cagataycivici]

@@ragura yes, this alternative is handy for very heavy customization or if you want Tailwind everywhere in your app. Default theming API is also really powerful and has more built-in presets from.

[@ragura]

@@cagataycivici Thanks, so if I understand correctly, if I'm using styled mode with CSS layers to still use tailwind overrides on a per use basis (class attribute when using a component) and I don't want to customize the components completely, this option isn't necessary right?

[@cagataycivici]

@@ragura absolutely, you can use TW to change styled mode components as well with ! symbol or with CSS layers. I have a tutorial coming up as well next week on how to use TW with default theming.

[@ragura]

@@cagataycivici Perfect, thanks for the info! Looking forward to the tutorial!

[@antonijo01]

will it be compatible with tailwind v4?

[@cagataycivici]

@@antonijo01 Yes unless they remove @apply 🤓

[@KA-fj1hs]

Worst overcomplicated theming ever… Better take example of top notch proven UI libraries instead of re-inventing lol.

[@cagataycivici]

@@KA-fj1hs cheers

[@ragura]

@KA-fj1hs Thanks for all the listed examples and details about what to improve. This has been a valuable learning experience and I commend you for your effort in enlightening us. 🙄

[@salzkraut8176]

Tell me a library that is as complex while giving the user so many ways to customise the components lol? There is none. Cant get much easier

[@ragura]

@@salzkraut8176 exactly 👍