Tailwind 4 support

[martinszeltins]

Describe the bug

Tailwind 4 has been released. It does not use postcss anymore but Vite plugin and does not use .js file for config but all config goes in .css file. The instructions on PrimeVue Tailwind are wrong now with Tailwind 4. Lots of things have changed in Tailwind 4, including classes, layers, variables etc. Also the instructions on tailwind.primevue.org is out of date now.

https://tailwind.primevue.org/nuxt/

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://tailwind.primevue.org/nuxt/

Environment

n/a

Vue version

3.5.13

PrimeVue version

4.2.5

Node version

20

Browser(s)

No response

Steps to reproduce the behavior

n/a

Expected behavior

n/a

[desert-dionysus]

According to upgrade guide, you can still use a js config file https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file. The automated upgrade process will destroy your existing tailwind.config.js, but one can easily revert the deletion in git. Unfortunately, restoring the tailwind.config.js and including it as described does not appear to fix missing primeicons, otherwise it appears to work.

[martinszeltins]

According to upgrade guide, you can still use a js config file. The automated upgrade process will destroy your existing tailwind.config.js, but one can easily revert the deletion in git.

The tailwind.config.js is now depracated and you shouldn't be using it. You should instead use a .css file for all your config.

[janderegg]

I'm also having problems to get Primevue work with Tailwind 4.
Installation of Tailwind 4 / Nuxt worked like described here: https://tailwindcss.com/docs/installation/framework-guides/nuxt

Then I've followed the instructions on https://tailwind.primevue.org/nuxt/ (based on Tailwind 3, I know):
npm install primevue
npm install --save-dev @primevue/nuxt-module
npm i tailwindcss-primeui

I've then tried to do the config in main.css (because tailwind.config.js isn't needed any longer):

@import './primevue/tailwind.css' layer(components);
@plugin 'tailwindcss-primeui';

But always get a Error on the page:
[vite-node] [plugin:@tailwindcss/vite:generate:serve] [VITE_ERROR] /assets/css/main.css

And in the console I get this after spinning up with npm run dev:
ERROR Pre-transform error: Cannot apply unknown utility class: shadow-[inset_0_2px_0_0_theme(colors.primary)]

Any help would be appreciated

[martinszeltins]

help would be appreciated

@janderegg PrimeVue doesn't work with Tailwind 4 yet

[janderegg]

I've got a Tailwind 4 version working using the official upgrade tool:
npx @tailwindcss/upgrade@next

First, I've got this error:

ERROR Cannot start nuxt: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

Fixed that by installing @tailwindcss/postcss:
npm install tailwindcss @tailwindcss/postcss postcss

[aparajita]

I've got a Tailwind 3 version working using the official upgrade tool: npx @tailwindcss/upgrade@next

Do you mean Tailwind 4 version?

[janderegg]

of course, yes. changed it.

[martinszeltins]

I've got a Tailwind 4 version working using the official upgrade tool: npx @tailwindcss/upgrade@next

First, I've got this error:

ERROR Cannot start nuxt: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

Fixed that by installing @tailwindcss/postcss: npm install tailwindcss @tailwindcss/postcss postcss

You should be using the Vite plugin not postcss

[OscarRaizer]

Primevue works successfully with tailwind v4.
I upgraded according to their upgrade guide https://tailwindcss.com/docs/upgrade-guide, uninstalled Postcss, installed the new vite plugin https://tailwindcss.com/blog/tailwindcss-v4#first-party-vite-plugin .
After that the primevue styles didn't work but I changed the config a bit and everything is ok.
cssLayer: { name: 'primevue', order: 'base, primevue, utilities',

My styles file:

@import 'tailwindcss';

@import 'primeicons/primeicons.css';

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: currentColor;
  }
}

@layer primevue {
  .p-inputtext {
    @apply border-gray-300;
  }

  .p-datepicker-input {
    @apply text-center;
  }
}

[martinszeltins]

@OscarRaizer These styles do not look right with Tailwind 4 - https://tailwind.primevue.org/nuxt/#styles

[OscarRaizer]

@martinszeltins Maybe, idk. It works for me. i dont use nuxt

[connorabbas]

Everything should work if you follow the Tailwind v4 upgrade guide, tailwindcss-primeui will continue to work as well.

As mentioned by @martinszeltins, if you are using Vite you should remove all postcss config and packages from your project and use the new Vite plugin instead.

The following should be updated to reflect the new changes in Tailwind v4:

1. PrimeVue Tailwind CSS Docs
2. Tailwind version of PrimeVue
3. primefaces/primevue-tailwind

Here are some projects I have successfully upgraded for those who might need a reference:

• https://github.com/connorabbas/laravel-inertia-primevue/tree/feature/ssr
• https://github.com/connorabbas/primevue-spa-laravel-api

[cajund]

This seemed to work for me:

I have a fresh new VueJS project created with Vite (saying no to everything):

$ npm create vue@latest

After npm install I then:

$ npm i tailwindcss-primeui

There's no tailwind.config.js file as noted on https://primevue.org/tailwind/, so I move on:

$ npm install primevue

# /src/main.js
import PrimeVue from 'primevue/config';
app.use(PrimeVue, {
    theme: 'none'
});

Download the .zip from https://github.com/primefaces/primevue-tailwind/releases and move/extract to /src/assets/primeview

I skip the postcss stuff, and then continue at:

https://github.com/primefaces/primevue-tailwind/releases

And add the following to /src/assets/main.css

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

and I get this error (also noting the 'postcss' in there):

[vite] Internal server error: [postcss] Missing "./base" specifier in "tailwindcss" package

This seems to diverge from (or omit) what the Tailwind page says (https://tailwindcss.com/docs/installation/using-vite). So I then do:

$ npm install tailwindcss @tailwindcss/vite

# vite.config.js
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

Updating the CSS to only have:

# /src/assets/min.css
@import "tailwindcss";

At this point, there are no errors and directives seem to work well. I am having some issues with the scoped styles and @apply but will take this as progress...

Cheers!

[aparajita]

I am having some issues with the scoped styles and @apply

You have to use @reference

https://tailwindcss.com/docs/functions-and-directives#reference-directive

[Smef]

EDIT: Here's a link to the article with instructions for PrimeVue and Tailwind 4

I've updates the integration to work with Tailwind 4 by making the following changes:

1. Follow the regular upgrade instruction for Tailwind 3 to 4, such as removing postcss and installing the new vite dependency.

2. Make PrimeVue-specific changes:

Change the cssLayer.order in app.ts from tailwind-base, primevue, tailwind-utilities to base, primevue,

.use(PrimeVue, {
                theme: {
                    preset: customTheme,
                    options: {
                        cssLayer: {
                            name: "primevue",
                            order: "base, primevue",
                        },
                        darkModeSelector: ".dark",
                    },
                },
            })

import tailwindcss and the tailwindcss-primeui plugin at the top of your main app.css

@import "tailwindcss";
@plugin "tailwindcss-primeui";

[jzs11]

Hi, my project is using Primevue + SCSS and Tailwind. When using the Tailwind upgrade tool, did you face any error? I'd like to compare if we faced similar issues.

I have followed the instructions for PrimeVue and Tailwind 4 but still does not work for me.

[Smef]

Make sure you run that command from the root of your project and not just from your home folder. Running that command was a pretty smooth process when I did it.

[jzs11]

I am running the upgrade cli under the project's root folder. Styles are in public folder.

And here is my App.scss

[Smef]

This isn't actually related to PrimeVue, and is and issue you're running into with the Tailwind upgrade process. Questions about their utility should probably be posted in the Tailwind repo.

That being said, it looks like the migration tool doesn't support .scss: tailwindlabs/tailwindcss#15716

[jzs11]

Hi! Great to confirm that https://gearboxgo.com/articles/web-application-development/primevue-with-tailwind-40 works well for me. Thanks @Smef!

For anyone looking to migrate their SCSS project to Tailwind 4, here's the process I followed:

• Convert your SCSS files to CSS using a SASS/SCSS compiler (In my case with PrimeVue and Tailwind, I only had 2 style files to convert)
• Remove all SCSS styles from your project and link to the converted CSS files instead
• Follow the migration guide in Smef's link

[jzs11]

After successfully implementing styles in Tailwind 4, you can effectively convert those working styles back to SCSS. This hybrid styling strategy gives you the best of both worlds! (maybe...not so pretty..but at least it works)

[maxih4]

EDIT: Here's a link to the article with instructions for PrimeVue and Tailwind 4

I've updates the integration to work with Tailwind 4 by making the following changes:

1. Follow the regular upgrade instruction for Tailwind 3 to 4, such as removing postcss and installing the new vite dependency.
2. Make PrimeVue-specific changes:

Change the cssLayer.order in app.ts from tailwind-base, primevue, tailwind-utilities to base, primevue,

.use(PrimeVue, {
theme: {
preset: customTheme,
options: {
cssLayer: {
name: "primevue",
order: "base, primevue",
},
darkModeSelector: ".dark",
},
},
})
import tailwindcss and the tailwindcss-primeui plugin at the top of your main app.css

@import "tailwindcss";
@plugin "tailwindcss-primeui";

I did it exactly like that, but I dont see any styling from the tailwind primevue css files. Do I have to load them in somewhere?

[martinszeltins]

@maxih4 PrimeVue doesn't support Tailwind 4 yet.

[ropoko]

I got it working by doing the following:

• installed tailwind v4, @tailwindcss/vite and tailwindcss-primeui
• downloaded zip file for primevue styles

on my main.css file

@import "tailwindcss";
@plugin "tailwindcss-primeui";
@import "./primevue/tailwind.css"; /* styles downloaded from the zip file */

on the app.js file

app.use(PrimeVue, {
  theme: {
    preset: 'none',
    options: {
      cssLayer: {
        name: "primevue",
        order: "base, primevue",
      },

      darkModeSelector: ".dark",
    },
  },
})

• add the plugin on vite.config.js

thanks @Smef and @connorabbas