Same classnames are being overwritten multiple times in the styles tab in devtools

[newaritra]

A single class name is being reused and rewritten multiple times. Is this expected behaviour or is this an anomaly?
I am developing the project in Next.js 14 and followed the doc guide to setup tailwind and theming is setup with the css variables.

This is the component and it's styles tab
<div class="custom-class-flex min-h-[70px] justify-between py-2"> {children} </div>

[wongjn]

This seems like an anomaly. It seems like you may be including Tailwind multiple times in your project.

[newaritra]

Yep that was the issue. Had an inkling about it but this comment made me double check that. Thank you ☺️

What I did that was wrong:

1. Created CSS sub-files for each page like page-one.css, page-two,css with the entire @tailwind and @layer base/components/utilities directives in them.
2. Imported these files inside the globals.css file to make them available in the entire project.

The solution:

1. Remove the @tailwind and @layer directives from the CSS sub-files apart from globals.css
2. Import the CSS files INSIDE the @layer directive(s) inside the globals.css file