CODEWITHSUNDEEP
vuejs3tailwind-cssprimevue
borsTiHD
borsTiHD

Reputation: 315

PrimeVue + Tailwind conflict: Button background missing

I start with a relatively fresh Vue3 + PrimeVue + Tailwind setup.
My problem is that the PrimeVue button does not display correctly when I add Tailwind.

To test this, please have a look at the following Sandbox.
As soon as the tailwind.css is commented out in the main.ts, the PrimeVue button is displayed correctly again.
And also only "primary" buttons are affected.

Can you please help me to display the PrimeVue buttons correctly together with Tailwind?

Upvotes: 3

Views: 5061

Answers (3)

Николай Неустроев
Николай Неустроев

Reputation: 41

PrimeVue docs says you should wrap the base and utilities in separate layers and make sure primevue layer comes after the base.

So in your main.css it will look like this:

@layer tailwind-base, primevue, tailwind-utilities;

@layer tailwind-base {
    @tailwind base;
}

@layer tailwind-utilities {
    @tailwind components;
    @tailwind utilities;
}

Source: https://v3.primevue.org/csslayer/#tailwind

Upvotes: 4

Sadegh Maleki
Sadegh Maleki

Reputation: 111

Interesting. Preflight is a set of base styles that Tailwind applies, and it is setting the button background color to transparent.

If you’d like to completely disable Preflight — perhaps because you’re integrating Tailwind into an existing project or because you’d like to provide your own base styles — all you need to do is set preflight to false in the corePlugins section of your tailwind.config.js file:

module.exports = {
      corePlugins: {
        preflight: false,
      }
    }

Answered in this post

Upvotes: 3

Richt222
Richt222

Reputation: 175

The Tailwind CSS seems to be setting the button background to transparent.

I moved its CSS to just before the Prime import in your example (main.ts), which fixed the missing background problem.

However, I don't know if this might have other unintended consequences.

Upvotes: 2

Related Questions