From fbca4ce50be9db1b7460efad2ddc8516e00795ca Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 23 Apr 2024 15:50:54 -0400
Subject: [PATCH 1/2] Only fixup margins in `p` tags when inside a list item
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The intent of these selectors are to only target `p` tags but we are targeting `*:first-child` and `*:last-child`. This has a side effect of causing `<br>` elements inside the list item to gain a margin _only in Firefox_. Other browsers treat the `<br>` element as properly inline and as such don’t apply margins but FF does not seem to.
---
 src/styles.js | 40 ++++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/styles.js b/src/styles.js
index a2f1820..d9bf899 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -128,16 +128,16 @@ let defaultModifiers = {
           marginTop: em(8, 14),
           marginBottom: em(8, 14),
         },
-        '> ul > li > *:first-child': {
+        '> ul > li > p:first-child': {
           marginTop: em(16, 14),
         },
-        '> ul > li > *:last-child': {
+        '> ul > li > p:last-child': {
           marginBottom: em(16, 14),
         },
-        '> ol > li > *:first-child': {
+        '> ol > li > p:first-child': {
           marginTop: em(16, 14),
         },
-        '> ol > li > *:last-child': {
+        '> ol > li > p:last-child': {
           marginBottom: em(16, 14),
         },
         'ul ul, ul ol, ol ul, ol ol': {
@@ -333,16 +333,16 @@ let defaultModifiers = {
           marginTop: em(12, 16),
           marginBottom: em(12, 16),
         },
-        '> ul > li > *:first-child': {
+        '> ul > li > p:first-child': {
           marginTop: em(20, 16),
         },
-        '> ul > li > *:last-child': {
+        '> ul > li > p:last-child': {
           marginBottom: em(20, 16),
         },
-        '> ol > li > *:first-child': {
+        '> ol > li > p:first-child': {
           marginTop: em(20, 16),
         },
-        '> ol > li > *:last-child': {
+        '> ol > li > p:last-child': {
           marginBottom: em(20, 16),
         },
         'ul ul, ul ol, ol ul, ol ol': {
@@ -538,16 +538,16 @@ let defaultModifiers = {
           marginTop: em(16, 18),
           marginBottom: em(16, 18),
         },
-        '> ul > li > *:first-child': {
+        '> ul > li > p:first-child': {
           marginTop: em(24, 18),
         },
-        '> ul > li > *:last-child': {
+        '> ul > li > p:last-child': {
           marginBottom: em(24, 18),
         },
-        '> ol > li > *:first-child': {
+        '> ol > li > p:first-child': {
           marginTop: em(24, 18),
         },
-        '> ol > li > *:last-child': {
+        '> ol > li > p:last-child': {
           marginBottom: em(24, 18),
         },
         'ul ul, ul ol, ol ul, ol ol': {
@@ -743,16 +743,16 @@ let defaultModifiers = {
           marginTop: em(16, 20),
           marginBottom: em(16, 20),
         },
-        '> ul > li > *:first-child': {
+        '> ul > li > p:first-child': {
           marginTop: em(24, 20),
         },
-        '> ul > li > *:last-child': {
+        '> ul > li > p:last-child': {
           marginBottom: em(24, 20),
         },
-        '> ol > li > *:first-child': {
+        '> ol > li > p:first-child': {
           marginTop: em(24, 20),
         },
-        '> ol > li > *:last-child': {
+        '> ol > li > p:last-child': {
           marginBottom: em(24, 20),
         },
         'ul ul, ul ol, ol ul, ol ol': {
@@ -948,16 +948,16 @@ let defaultModifiers = {
           marginTop: em(20, 24),
           marginBottom: em(20, 24),
         },
-        '> ul > li > *:first-child': {
+        '> ul > li > p:first-child': {
           marginTop: em(32, 24),
         },
-        '> ul > li > *:last-child': {
+        '> ul > li > p:last-child': {
           marginBottom: em(32, 24),
         },
-        '> ol > li > *:first-child': {
+        '> ol > li > p:first-child': {
           marginTop: em(32, 24),
         },
-        '> ol > li > *:last-child': {
+        '> ol > li > p:last-child': {
           marginBottom: em(32, 24),
         },
         'ul ul, ul ol, ol ul, ol ol': {

From 944f3b0cb31d29d19c718e116f25f25aff8f0f55 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 23 Apr 2024 16:00:15 -0400
Subject: [PATCH 2/2] Update changelog

---
 CHANGELOG.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 17620a3..76cf509 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Don't apply margins to `<br>` elements contained in an `<li>` in FF ([#350](https://github.com/tailwindlabs/tailwindcss-typography/pull/350))
 
 ## [0.5.12] - 2024-03-27