Classes brought from Team A and Team B polluting the same global namespace

I am new to Tailwind CSS but there is something that confuses me.

Let's run a scenario:

Team A

• builds a UI component library using TailwindCSS (Button, Forms, Dialog, etc)
• publish NPM package where exports index.ts and theme/tailwind.css

Team B

• npm install Team A library. Imports theme/tailwind.css into their application main.ts (entry point).

At this point, their main.ts should have

import { Button } from '@team-a/ui`
import '@team-a/ui/theme/tailwind.css` // tailwind classes coming from Team A
import `./theme/main.css` // tailwind CSS global file belonging to Team B

At this point in time, in the <style> tags in the head, we will have classes brought from Team A and Team B, polluting the same global namespace.

How do you get around this issue?

There a few ways to avoid this, but if both teams uses tailwind there should not be any issue. unless you have custom CSS that for example overrides custom properties at the :root.

Regardless here a few ways to avoid clashing CSS styles.

1. use @layers,
2. Scope the CSS to apply only to a specific tag and below. This is a tricky one, usually frameworks will handle that, react with CSS modules, angular with view encapsulation, but it is possible with postcss or sass.
3. Prefix the tailwind config with each team unique string, if they build separated tailwind output CSS.