How Should I use Tailwindcss 4 styles on .vue files?

[farad-tech]

I installed tailwindcss by vite installation manual, .css file tailwindcss styles are applying correctly but not working when I try to use style classes in a .vue file.

this is working :

body {
  @apply
    font-[Iransans]
    bg-[url('/background.png')]
    lg:bg-[url('/background-lg.png')]
    lg:bg-top
    bg-no-repeat
    bg-cover;
}

but this one is not working:

<script setup></script>

<template>
    <header class="bg-red-500">
        test
    </header>
</template>

what is the problem?

[wongjn]

Consider providing a git repo that reproduces the issue and we can take a closer look for you.

[farad-tech]

Sure
please check this repo:
https://github.com/farad-tech/tailwindcss-problem

[wongjn]

Seems to be working for me:

[farad-tech]

I've just reset PrimeVue configuration, and problem solved.

[rozsazoltan]

Related: From v4 the reset style cannot be overridden by TailwindCSS classes

Since you didn't place the body under any layer either, if you've declared an unlayered style anywhere for * or header, TailwindCSS classes won't be able to override it, because unlayered styles are stronger than layered ones. It's recommended to place custom styles under @layer base.

In addition to visual inspection, always check the result in DevTools. The key questions in such cases are:

• Was the bg-red-500 class correctly generated at all?
• If not, why not? (Usually due to installation or source issues)
  • Since you have working TailwindCSS code, it's likely not an installation issue.
• If it was generated, what is overriding it? Why isn't it being applied to the element?
  • This is typically a layer priority issue, especially for those who are not yet familiar with how to properly use layers in CSS.

[farad-tech]

I'm using PrimeVue UI too. Is it possible that these styles have been overridden?

[rozsazoltan]

PrimeVue doesn't apply any default styling to the div, so I don't think that's the issue. However, the problem is not reproducible in the shared repo.

[farad-tech]

I've just reset PrimeVue configuration, and problem solved. I can't figure out why this happened.