Why do I need to import @repo/ui/styles.css in global.css when Tailwind is already imported?

[eric-hjh]

Summary

Hi, I'm setting up a monorepo using Turborepo with Tailwind CSS v4, and I have a question about how shared styles are handled in a packages/ui setup.

In the monorepo, I have a shared UI package at packages/ui, which includes a file:
packages/ui/src/styles.css, containing the following:

@import "tailwindcss";

Then, just like in the examples, after building the .css and in the global.css file of the app(ex. apps/web) that consumes @repo/ui, I’m importing it like this:

@import "tailwindcss";
@import "@repo/tailwind-config";
@import "@repo/ui/styles.css";

Here’s where I’m confused:

Since @repo/ui/styles.css already includes @import "tailwindcss";, and I’ve already set up Tailwind in the consuming app, doesn’t that mean Tailwind gets imported twice?

If I remove @import "@repo/ui/styles.css"; from the global.css of the app, Tailwind doesn’t seem to work at all for components from @repo/ui.

So I’m wondering — why is it necessary to import @repo/ui/styles.css even though the app already has Tailwind set up?

Is this expected behavior? Or am I misunderstanding how Tailwind's CSS layers and PostCSS processing work in a Turborepo?

Thanks in advance!

Additional information

No response

Example

https://github.com/vercel/turborepo/tree/main/examples/with-tailwind