Ordered lists start from 2

[simonacca]

What version of @tailwindcss/typography are you using?

v0.4.0

What version of Node.js are you using?

none

What browser are you using?

Google Chrome 85.0.4183.121

What operating system are you using?

Ubuntu 20.10

Reproduction repository

https://www.youtube.com/watch?v=-6BsiVyC1kM

[simonacca]

As you can see in the snapshot from here, the first element of an ordered list is marked as "2." when it should be "1."

[adamwathan]

Hmm I can't reproduce in any browser on macOS, wonder if this is somehow specific to Ubuntu or something else?

[simonacca]

Interesting, will try different browser/os combo and report back

[simonacca]

What I learned so far:

• can't reproduce in chrome/edge on windows
• can't reproduce on firefox 80.0.1 on ubuntu 20.10

Also, the issue is fixed in chrome by adding counter-reset: list-item; to ol.

[pmh722]

I can reproduce on Ubuntu. Bug appears in Chromium but not Firefox. Tailwind Typography version 0.4.1

The counter-reset fix worked for me. Thanks @simonacca !

[pmh722]

I can reproduce on Ubuntu. Bug appears in Chromium but not Firefox. Tailwind Typography version 0.4.1

The counter-reset fix worked for me. Thanks @simonacca !

HOWEVER, counter-reset causes the list to start at 0 on Safari....

[farishubton]

+1, same here.

Device: Vivo 1808 Build/O11019
Google Chrome Version: 70.0.3538.110
OS: Android 8.1.0

[reinink]

Hey! We recently did a major update to the typography plugin, and one of the bigger changes was simplifying the ordered list implementation. We're no longer using pseudo elements to render the counter, but instead are just relying on the default browser list marker implementation.

Before:

tailwindcss-typography/src/styles.js

Lines 60 to 65 in 5bb0e07

	'ol > li::before': {
	content: 'counter(list-item, var(--list-counter-style, decimal)) "."',
	position: 'absolute',
	fontWeight: '400',
	color: theme('colors.gray.500', defaultTheme.colors.gray[500]),
	},

After:

tailwindcss-typography/src/styles.js

Lines 1305 to 1307 in 94b5a5b

	'ol > li::marker': {
	fontWeight: '400',
	color: 'var(--tw-prose-counters)',

I suspect that this will resolve this issue, so I'm going to close this. Please report back if that's not the case 👍