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]

[fbraem]

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

[fbraem]

When I change animate-duration-[450ms] in duration-[450ms], I get the following error:

[plugin:vite:css] [postcss] .../src/css/primevue/common.css:54:5: The text-surface-200 class does not exist. If text-surface-200 is a custom class, make sure it is defined within a @layer directive.

[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.