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.