Skip to content

Commit c0dea6c

Browse files
Don't apply margins to <br> elements contained in an <li> in FF (#350)
* Only fixup margins in `p` tags when inside a list item 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. * Update changelog
1 parent cacc7dc commit c0dea6c

File tree

2 files changed

+23
-21
lines changed

2 files changed

+23
-21
lines changed

Diff for: CHANGELOG.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased]
99

10-
- Nothing yet!
10+
### Fixed
11+
12+
- Don't apply margins to `<br>` elements contained in an `<li>` in FF ([#350](https://github.com/tailwindlabs/tailwindcss-typography/pull/350))
1113

1214
## [0.5.12] - 2024-03-27
1315

Diff for: src/styles.js

+20-20
Original file line numberDiff line numberDiff line change
@@ -128,16 +128,16 @@ let defaultModifiers = {
128128
marginTop: em(8, 14),
129129
marginBottom: em(8, 14),
130130
},
131-
'> ul > li > *:first-child': {
131+
'> ul > li > p:first-child': {
132132
marginTop: em(16, 14),
133133
},
134-
'> ul > li > *:last-child': {
134+
'> ul > li > p:last-child': {
135135
marginBottom: em(16, 14),
136136
},
137-
'> ol > li > *:first-child': {
137+
'> ol > li > p:first-child': {
138138
marginTop: em(16, 14),
139139
},
140-
'> ol > li > *:last-child': {
140+
'> ol > li > p:last-child': {
141141
marginBottom: em(16, 14),
142142
},
143143
'ul ul, ul ol, ol ul, ol ol': {
@@ -333,16 +333,16 @@ let defaultModifiers = {
333333
marginTop: em(12, 16),
334334
marginBottom: em(12, 16),
335335
},
336-
'> ul > li > *:first-child': {
336+
'> ul > li > p:first-child': {
337337
marginTop: em(20, 16),
338338
},
339-
'> ul > li > *:last-child': {
339+
'> ul > li > p:last-child': {
340340
marginBottom: em(20, 16),
341341
},
342-
'> ol > li > *:first-child': {
342+
'> ol > li > p:first-child': {
343343
marginTop: em(20, 16),
344344
},
345-
'> ol > li > *:last-child': {
345+
'> ol > li > p:last-child': {
346346
marginBottom: em(20, 16),
347347
},
348348
'ul ul, ul ol, ol ul, ol ol': {
@@ -538,16 +538,16 @@ let defaultModifiers = {
538538
marginTop: em(16, 18),
539539
marginBottom: em(16, 18),
540540
},
541-
'> ul > li > *:first-child': {
541+
'> ul > li > p:first-child': {
542542
marginTop: em(24, 18),
543543
},
544-
'> ul > li > *:last-child': {
544+
'> ul > li > p:last-child': {
545545
marginBottom: em(24, 18),
546546
},
547-
'> ol > li > *:first-child': {
547+
'> ol > li > p:first-child': {
548548
marginTop: em(24, 18),
549549
},
550-
'> ol > li > *:last-child': {
550+
'> ol > li > p:last-child': {
551551
marginBottom: em(24, 18),
552552
},
553553
'ul ul, ul ol, ol ul, ol ol': {
@@ -743,16 +743,16 @@ let defaultModifiers = {
743743
marginTop: em(16, 20),
744744
marginBottom: em(16, 20),
745745
},
746-
'> ul > li > *:first-child': {
746+
'> ul > li > p:first-child': {
747747
marginTop: em(24, 20),
748748
},
749-
'> ul > li > *:last-child': {
749+
'> ul > li > p:last-child': {
750750
marginBottom: em(24, 20),
751751
},
752-
'> ol > li > *:first-child': {
752+
'> ol > li > p:first-child': {
753753
marginTop: em(24, 20),
754754
},
755-
'> ol > li > *:last-child': {
755+
'> ol > li > p:last-child': {
756756
marginBottom: em(24, 20),
757757
},
758758
'ul ul, ul ol, ol ul, ol ol': {
@@ -948,16 +948,16 @@ let defaultModifiers = {
948948
marginTop: em(20, 24),
949949
marginBottom: em(20, 24),
950950
},
951-
'> ul > li > *:first-child': {
951+
'> ul > li > p:first-child': {
952952
marginTop: em(32, 24),
953953
},
954-
'> ul > li > *:last-child': {
954+
'> ul > li > p:last-child': {
955955
marginBottom: em(32, 24),
956956
},
957-
'> ol > li > *:first-child': {
957+
'> ol > li > p:first-child': {
958958
marginTop: em(32, 24),
959959
},
960-
'> ol > li > *:last-child': {
960+
'> ol > li > p:last-child': {
961961
marginBottom: em(32, 24),
962962
},
963963
'ul ul, ul ol, ol ul, ol ol': {

0 commit comments

Comments
 (0)