Nested list styles are applied to inline-block elements inside list

[estevanmaito]

I've changed the default code style to the common approach of making it an inline-block and adding space around it. But inside lists I get this result:

This is the code to reproduce.

typography: {
  default: {
    css: {
      'h1 > a, h2 > a, h3 > a, h4 > a': {
        textDecoration: 'none',
      },
      code: {
        backgroundColor: defaultTheme.colors.gray[200],
        borderRadius: defaultTheme.borderRadius.default,
        paddingLeft: defaultTheme.spacing[1],
        paddingRight: defaultTheme.spacing[1],
        display: 'inline-block',
        lineHeight: defaultTheme.lineHeight['snug'],
      },
      'code::before': {
        content: 'none',
      },
      'code::after': {
        content: 'none',
      },
      'pre code::before': {
        content: 'none',
      },
      'pre code::after': {
        content: 'none',
      },
    },
  },
}

*Note that the last two rules are related to a bug in Firefox, fixed in #41

I think this is the cause https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js#L259

        '> ul > li > *:first-child': {
          marginTop: em(20, 16),
        },
        '> ul > li > *:last-child': {
          marginBottom: em(20, 16),
        },
        '> ol > li > *:first-child': {
          marginTop: em(20, 16),
        },
        '> ol > li > *:last-child': {
          marginBottom: em(20, 16),
        },

[estevanmaito]

Digging into the demo, I think these styles are actually used for paragraphs inside lists, and not nested lists.

But, the only reason for this issue to not be visible there, is that all nested lists use <strong> as its first element. So those styles are being added, but they have no effect because strong is inline.

If you use normal text, the code above (eg. '> ul > li > *:first-child') will overwrite the nested lists styles and apply inconsistent styles.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

I don't think this is an issue anymore. If it is still an issue using newer versions, please re-open a new issue. Here is a working example: https://play.tailwindcss.com/hcUelBtpL8