This pull request encompasses three closely related changes.
See the changes live here https://tailwind-nextjs-starter-blog-alexanderzeilmann.vercel.app/blog/github-markdown-guide

::before instead of :before

In CSS both ::before and :before work, but ::before is preferred.
Tailwind, however, accepts only the double-colon syntax, i.e. 'code:before': {content: 'none', }
has no effect at all in tailwind.config.js, but 'code::before': {content: 'none', } does.

Changes: Replace :before and :after by ::before and ::after

Rendering before the change:

Rendering after the change:

::marker additional to ::before in lists in CSS

Using the before-pseudo element to style the list-items seems to be not working in current browsers.
The new way is using the ::marker pseudo element.

Changes: Add the following in tailwind.css

.task-list-item {
  @apply list-none;
}

Rendering before the change (note the gray bullet-points):

Rendering after the change:

::marker in Tailwind

Tailwind uses the ::marker pseudo-element for styling lists.

Using

'ol li::before': {
  fontWeight: '600',
  color: theme('colors.gray.500'),
},

in tailwind.config.js does not overwrite the ::marker use by tailwind. For this we need:

'ol li::marker': {
  fontWeight: '600',
  color: theme('colors.gray.500'),
},

Changes: replace ol li:before and ul li:before by ol li::marker and ul li::marker in tailwind.config.js