diff --git a/src/index.test.js b/src/index.test.js index dcc897d..d6cbf58 100644 --- a/src/index.test.js +++ b/src/index.test.js @@ -1294,3 +1294,31 @@ it('ignores common non-trailing pseudo-elements in selectors', () => { `) }) }) + +test('lead styles are inserted after paragraph styles', async () => { + let config = { + content: [{ raw: html`
` }], + } + + return run(config).then((result) => { + expect(result.css).toIncludeCss( + css` + .prose { + color: var(--tw-prose-body); + max-width: 65ch; + } + .prose :where(p):not(:where([class~='not-prose'] *)) { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + .prose :where([class~='lead']):not(:where([class~='not-prose'] *)) { + color: var(--tw-prose-lead); + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; + } + ` + ) + }) +}) diff --git a/src/styles.js b/src/styles.js index 43d2539..105053d 100644 --- a/src/styles.js +++ b/src/styles.js @@ -1237,6 +1237,8 @@ module.exports = { { color: 'var(--tw-prose-body)', maxWidth: '65ch', + // TODO: Figure out how to not need this, it's a merging issue + p: {}, '[class~="lead"]': { color: 'var(--tw-prose-lead)', },