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.

[wongjn]

However, I see both <div> blocks turn blue

This is because the CSS rules in markdown.css select all <ul> and <li> elements. Instead, consider creating a utility in globals.css that scopes these styles:

Suggested changes

diff --git a/app/globals.css b/app/globals.css
index a2dc41e..7699705 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -24,3 +24,13 @@ body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+@utility markdown {
+  ul {
+    list-style: disc;
+  }
+
+  li {
+    color: blue;
+  }
+}
diff --git a/app/markdown.css b/app/markdown.css
deleted file mode 100644
index 82852bc..0000000
--- a/app/markdown.css
+++ /dev/null
@@ -1,7 +0,0 @@
-ul {
-  list-style: disc;
-}
-
-li {
-  color: blue;
-}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index a04a80a..0c0cf6d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,10 +1,8 @@
-import markdownStyles from "./markdown.css";
-
 export default function Home() {
   return (
     <>
       <div className="text-2xl">UL items blue</div>
-      <div className={markdownStyles}>
+      <div className="markdown">
         <ul>
           <li>First item</li>
           <li>Second item</li>

You could also use CSS modules, though it is not recommended:

Suggested changes

diff --git a/app/markdown.css b/app/markdown.css
deleted file mode 100644
index 82852bc..0000000
--- a/app/markdown.css
+++ /dev/null
@@ -1,7 +0,0 @@
-ul {
-  list-style: disc;
-}
-
-li {
-  color: blue;
-}
\ No newline at end of file
diff --git a/app/markdown.module.css b/app/markdown.module.css
new file mode 100644
index 0000000..7274704
--- /dev/null
+++ b/app/markdown.module.css
@@ -0,0 +1,9 @@
+.markdown {
+  ul {
+    list-style: disc;
+  }
+
+  li {
+    color: blue;
+  }
+}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index a04a80a..c07b35c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,10 +1,10 @@
-import markdownStyles from "./markdown.css";
+import styles from "./markdown.module.css";
 
 export default function Home() {
   return (
     <>
       <div className="text-2xl">UL items blue</div>
-      <div className={markdownStyles}>
+      <div className={styles.markdown}>
         <ul>
           <li>First item</li>
           <li>Second item</li>

---

none of them has the disk-shape bubble item.

They do, but they are hidden off-screen to the left. Adding some padding would show them:

diff --git a/app/markdown.css b/app/markdown.css
index 82852bc..198cf68 100644
--- a/app/markdown.css
+++ b/app/markdown.css
@@ -1,5 +1,6 @@
 ul {
   list-style: disc;
+  padding-left: 1em;
 }
 
 li {

---

I am especially interested in reverting […]

You can use the revert keyword. I'd suggest (as before), to use a utility class to scope the styles, see https://play.tailwindcss.com/lGfqp0tX92