A subset of CSS rules for every type scale is generated even when those type scales are not used

[gregsullivan]

What version of @tailwindcss/typography are you using?

0.5.7

What version of Node.js are you using?

16.17.0

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction repository

https://github.com/gregsullivan/tailwind-typography-type-scale-issue

Describe your issue

Seven CSS rules are generated for every type scale, even when no type scales are used. For example:

.prose-sm :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}

.prose-sm :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 1.1428571em;
}

.prose-sm :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 1.1428571em;
}

.prose-sm :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
  margin-bottom: 0;
}

This continues for base, lg, xl and 2xl. The selectors for the CSS rules all include the .prose class as part of the :where pseudo-class function.

This issue isn't present on the Tailwind Typography live demo on Tailwind Play, but I haven't found a local configuration that doesn't result in the creation of the additional CSS rules.

[bradlc]

Hey @gregsullivan, thanks for reporting this. The issue should be resolved in v0.5.8 👍

[gregsullivan]

Hey @bradlc—Thanks very much for fixing this so quickly, and for all of your work on Tailwind!