Problems in upgrading to tailwind from v4.1.1

[bhaidar]

Dears,

I've upgraded today my project to use latest of primevue v4.1.1

All went well!

Next, I tried to use tailwind by following the steps here: https://tailwind.primevue.org/vite

I have the following setup in my app:

1. One backend code (Laravel)
2. Multiple frontend apps, one of them admin located at /resources/admin
3. I load tailwind.{app}.config.js dynamically based on the app I am in

My files are as follows:

• Under admin/css I have both app.css and tailwind.css
• app.css contains the CSS Variables (as mentioned in the page referenced above)
• tailwind.css contains the following

tailwind.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "./../scripts/plugins/primevue/css/tailwind.css";
@import "tailwindcss/utilities";

@config "./../../../tailwind.admin.config.js";

The tailwind.css file reference in the imports above, it imports all css for primevue.

I've installed the added the primevue-tailwindcss plugin too.

For the post-css I followed exactly the same configuration steps in the link above.

When I run the app, I get the following error:

[plugin:vite:css] [postcss] /var/www/html/resources/admin/scripts/plugins/primevue/css/common.css:28:5:
The `animate-duration-[450ms]` class does not exist. If `animate-duration-[450ms]` is a custom class, 
make sure it is defined within a `@layer` directive.

/var/www/html/resources/admin/scripts/plugins/primevue/css/common.css:28:4
26 |  
27 |  .p-toggleable-content-leave-active {
28 |      @apply overflow-hidden transition-[max-height] animate-duration-[450ms] ease-[cubic-bezier(0,1,0,1)];
   |      ^
29 |  }
30 |

[bhaidar]

Hey @tugcekucukoglu would you be able to check this one? I appreciate it. Thanks

[hackrui]

remove 'tailwind.config.js' file 'animate' plugin
plugins: [primeui,animate]

plugins: [primeui]

[QuantumLove]

This fixed it. Do you know why it clashes?

[QuantumLove]

It clashes exactly on stuff like this:

Do we need to add a namespace to the clashing @apply stuff in the primevue css so that it knows which plugin to use?

I find it odd because everything animated defines is prefixed by animated

[fbraem]

I encounter the same problem when upgrading a monorepo with a ui package that uses primevue with tailwindcss.

[fbraem]

After extending tailwind with colors primary and surface, I get the following error:

.../src/css/primevue/inputtext.css:2:5: The enabled:focus:border-primary class does not exist. If enabled:focus:border-primary is a custom class, make sure it is defined within a @layer directive.

[fbraem]

After adding tailwindcss-primeui to the app and added as plugin to the tailwindcss config file of the app, it looks that the errors are gone. So we need to install tailwindcss-primeui for all applications that uses our ui package.

[dcb99]

After adding tailwindcss-primeui to the app and added as plugin to the tailwindcss config file of the app, it looks that the errors are gone. So we need to install tailwindcss-primeui for all applications that uses our ui package.

Adding that to your app is part of the installation step in the documentation, so it shouldn't be surprising that this solved the problem for at least one person. However, this randomly started happening to me earlier this week and I have followed the documentation steps to the letter .

[fbraem]

I have one ui package where everything related to primevue is defined. That package uses tailwind-primeui. The applications that are in the same monorepo that uses this ui package, must also use tailwind-primeui. That was not clear at least to me.

[Thiritin]

It tries to access something called border-primary, make sure that you have a base color defined for your primary color, otherwise the class border-primary does not exist. only border-primary-500 etc.

So set it like this instead.

[awarsewa]

In case you are using tailwindcss-primeui in a Typescript project, change

const primeui = require('tailwindcss-primeui')

or anything else you tried to

import primeui from 'tailwindcss-primeui'

and plug it into plugins:

export default { 
  ...
  plugins: [primeui]
}

That's what helped in my case

[bhaidar]

Thank you all for your amazing replies! I haven't had the chance to check the tailwind version again as I got caught with many features to implement. However, I will do so soon and get back to you. Many thanks again

[QuantumLove]

I am having the same problem, I tried to debug it and all I can tell is that Tailwind is not processing the directives. I tried putting the styles inside am @layer but then they are not applied to to the code 😢

Here the description of my issue: https://discord.com/channels/787967399105134612/787968875135762452/1321077734100697192