Nested component CSS doesn't work well with tailwind

[ozooxo]

What version of Tailwind CSS are you using?

v4.1.8

What build tool (or framework if it abstracts the build tool) are you using?

Next.js 15.3.2

See https://github.com/ozooxo/tailwind-potential-bug/blob/main/yarn.lock for other dependencies.

What version of Node.js are you using?

N/A

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/ozooxo/tailwind-potential-bug/

See ozooxo/tailwind-potential-bug@87024df for the diff from the init template.

Should see the issue by yarn dev.

Describe your issue

I have

ul {
  list-style: disc;
}

li {
  color: blue;
}

and

import markdownStyles from "./markdown.css";

export default function Home() {
  return (
    <>
      <div className="text-2xl">UL items blue</div>
      <div className={markdownStyles}>
        <ul>
          <li>First item</li>
          <li>Second item</li>
        </ul>
      </div>

      <div className="text-2xl">UL items default black</div>
      <div>
        <ul>
          <li>First item</li>
          <li>Second item</li>
        </ul>
      </div>
    </>
  );
}

I expect the markdownStyles to override the preflight list-style: none; (here) so

• disk-shape bubble item
• the <li> colors to turn blue

ONLY in the first <div> block.

However, I see both <div> blocks turn blue, and none of them has the disk-shape bubble item.

(In a separated repo (I could not reproduce in this simple model), I see disk-shape bubble item, but it propagates to both lists.)

Why is it useful:

I want to keep my global styles, while for I may want to use markdown for certain part of my page (may through https://nextjs.org/docs/app/guides/mdx) so I need to revert the preflight override only in certain blocks.

is not an option for me, because I don't want to change the global setup.

I am especially interested in reverting

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

ol,
ul,
menu {
  list-style: none;
}

because those are commonly used in markdown.