Tailwind layers not working correctly using PrimeVue documentation

[AndresMpa]

Hey there, I've been reading this Tailwind CSS section at PrimeVue documentation and I got a couple of questions.

When I try this example it doesn't work under the configuration explained here, the plugin section says: "It is designed to work both in styled and unstyled modes", I'm trying the "styled mode" but Tailwind is not working for the example in the documentation.

Also there's a disclaimer in the presets section that says "Currently, the Tailwind CSS Presets are not compatible with v4 and will be with a future update after v4 final." But the Override section below uses them. I understand that I can use them as part of the configuration for the "CSS layer" option, am I missundertanding something?

I see that there're many options to use Tailwind CSS with PrimeVue, but I haven't found any working for my usage case on them, I have tried the documentation configration in different ways but Tailwind CSS is still not working properly.

Hope someone can give me a hand, greetings!

[LouisVA]

I am having exactly the same issue. I used primevue 3 before, with 4 I am happy they remove sass and stuff but it's very confusing on how I am now supposed to use tailwind. Tailwind css classes do nothing atm.

https://tailwind.primevue.org/ also exists, I asked on discord what exactly the diff is with primevue 4 and got no response.

[LouisVA]

@AndresMpa

I managed to fix it by asking GPT.

So first make sure tailwind is correctly installed, following https://tailwindcss.com/docs/installation was not sufficient as I use vite/vue so I followed https://tailwindcss.com/docs/guides/vite#vue as it has a few extras:

npm install -D tailwindcss
npx tailwindcss init

becomes

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Also tailwind.config.js needs to specifically mention .vue files which wasn't the case for me

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

and somewhere you need to mention

@tailwind base;
@tailwind components;
@tailwind utilities;

in a css. Since I don't use a main css, I just added it to my App.vue <style></style> as the first lines.

Now it works for me.

[SidneyDaniel]

Thank you, Louis.