Tailwind Typography for bigger font-size adds huge margins on h2 & other elements

[deadcoder0904]

I'm creating a blog using Next.js, MDX & Tailwind. The only difference is I want to have my blog to have a bigger font-size than 16px. So I used Tailwind Typography's default CSS section & it made some elements look huge.

Here's an example (look at the gap between h1 & h2 & ol & ul):

The same post I've added to Tailwind Blog by cloning it & it looks decent:

All I've done is extend the Tailwind Typography plugin:

const fullBleed = {
	width: '100%',
	gridColumn: '1 / -1',
}

module.exports = {
	extend: {
		typography: (theme) => ({
			DEFAULT: {
				css: {
					maxWidth: 'none',
					color: theme('colors.blueGray.500'),
					'> :first-child': { marginTop: '-' },
					'> :last-child': { marginBottom: '-' },
					'&:first-child > :first-child': {
						marginTop: '0',
					},
					'&:last-child > :last-child': {
						marginBottom: '0',
					},
					h1: {
						fontSize: theme('fontSize.4xl')[0],
						fontWeight: theme('fontWeight.extrabold'),
					},
					h2: {
						fontSize: theme('fontSize.3xl')[0],
						fontWeight: theme('fontWeight.bold'),
					},
					h3: {
						fontSize: theme('fontSize.2xl')[0],
					},
					h4: {
						fontSize: theme('fontSize.xl')[0],
					},
					h5: {
						fontSize: theme('fontSize.lg')[0],
					},
					h6: {
						fontSize: theme('fontSize.base')[0],
					},
					'h1, h2, h3, h4, h5, h6': {
						fontWeight: theme('fontWeight.semibold'),
						color: theme('colors.blueGray.900'),
					},
					'h1, h2': {
						letterSpacing: '-0.025em',
					},
					'h2, h3': {
						'scroll-margin-block': `${(70 + 40) / 16}rem`,
					},
					'h3, h4, h5, h6': {
						fontWeight: theme('fontWeight.semibold'),
					},
					p: {
						fontSize: theme('fontSize.xl')[0],
						lineHeight: theme('lineHeight.9'),
						color: theme('colors.blueGray.600'),
					},
					hr: {
						borderTopWidth: theme('borderWidth.2'),
						color: theme('colors.blueGray.200'),
					},
					'ul, ol': {
						position: 'relative',
					},
					'ul > li, ol > li': {
						paddingLeft: '1.5em',
						fontSize: theme('fontSize.xl')[0],
						color: theme('colors.blueGray.600'),
						lineHeight: theme('lineHeight.9'),
						overflowWrap: 'break-word',
					},
					'ul > li::before': {
						width: '0.75em',
						height: '0.100em',
						top: 'calc(0.875em - 0.0625em)',
						left: 0,
						borderRadius: 0,
						backgroundColor: theme('colors.blueGray.400'),
					},
					'ol > li::before': {},
					a: {
						color: theme('colors.cyan.700'),
						fontWeight: theme('fontWeight.medium'),
						textDecoration: 'none',
						boxShadow: theme('boxShadow.link'),
					},
					'a code': {
						color: 'inherit',
						fontWeight: 'inherit',
					},
					strong: {
						color: theme('colors.blueGray.900'),
						fontWeight: theme('fontWeight.medium'),
					},
					'a strong': {
						color: 'inherit',
						fontWeight: 'inherit',
					},
					code: {
						fontSize: theme('fontSize.base')[0],
						fontWeight: '400',
						padding: theme('spacing.1'),
						color: theme('colors.blueGray.200'),
						backgroundColor: theme('colors.blueGray.900'),
						borderRadius: theme('borderRadius.md'),
						overflowX: 'auto',
					},
					'code::before': {
						// content: 'none',
					},
					'code::after': {
						// content: 'none',
					},
					pre: {
						backgroundColor: '-',
						color: theme('colors.white'),
						borderRadius: 0,
						marginTop: 0,
						marginBottom: 0,
					},
					table: {
						// ...fullBleed,
						fontSize: theme('fontSize.sm')[0],
						lineHeight: theme('fontSize.sm')[1].lineHeight,
						tableLayout: theme('tableLayout.fixed'),
					},
					thead: {
						color: theme('colors.blueGray.600'),
						borderBottomColor: theme('colors.blueGray.200'),
					},
					'thead th': {
						fontSize: theme('fontSize.xl')[0],
						fontWeight: theme('fontWeight.semibold'),
						lineHeight: theme('fontSize.xl')[0].lineHeight,
						color: theme('colors.blueGray.900'),
						letterSpacing: theme('letterSpacing.wider'),
						paddingTop: 0,
					},
					'tbody tr': {
						borderBottomColor: theme('colors.blueGray.200'),
					},
					'tbody td': {
						fontSize: theme('fontSize.lg')[0],
						lineHeight: theme('lineHeight.9'),
						color: theme('colors.blueGray.600'),
					},
					'tbody tr:last-child': {
						borderBottomWidth: '1px',
					},
					'tbody code': {
						fontSize: theme('fontSize.xs')[0],
					},
				},
			},
		}),
	}
}

In HTML, I have:

<div className="prose grid--wrapper">
	<MDXProvider components={MDXComponents}>{children}</MDXProvider>
</div>

I've tried removing all references of h1, h2, ..., h6 in Tailwind Typography & tried using prose prose-lg class but it still has those huge margins.

I think it's because I've set the font-size in h1 as theme('fontSize.4xl')[0] which is in rem & the margin-top & margin-bottom is in em so it increases h2's marginTop from 24px (which is for Tailwind's Blog) to 48px (which is for my Blog) & marginBottom from 30px to 60px.

I'd love to solve this. I've even made a simple Tailwind Play (you can ignore the code block) → https://play.tailwindcss.com/U9jZFPY4Sl

[simonswiss]

Hey @deadcoder0904 👋

Thanks for reaching out.

So, what happens in your situation is the collapsing margins stop collapsing because you are using CSS grid.

The huge space between your h1 and h2, as well as between your ul and ol, is happening as the margin-bottom of one element is now additional to the margin-top of the next element.

Why doesn't this happen on h2, h3 h4, I hear you ask?

Well, there was a deliberate typography decision baked in the code to remove the margin-top entirely for elements immediately following h2, h3 or h4`, as you can see on these lines of code in the Typography plugin.

So - if you want to preserve your Grid, you could add the same treatment for the elements following an h1 element, as well as ul and ol.

Besides that great article by Rachel Andrew shared above, here's a great video by Jen Simmons demonstrating how CSS Grid stops margins from collapsing:

https://www.youtube.com/watch?v=jfHNzL5h1Aw

Hope it helps! 👍

[deadcoder0904]

Damn, CSS is complex lol 😂

I watched the video & understood it.

Just added 3 LOC to make it work:

{
  "h1 + *": {
    "marginTop": "0"
  },
  "ul + *": {
    "marginTop": "0"
  },
  "ol + *": {
    "marginTop": "0"
  }
}

Looks good now → https://play.tailwindcss.com/jKpt2kC8kL

Are there any side-effects if I use this? I'm using Tailwind Typography for my blog & I'll have a couple of landing pages later for some products which I think would be custom styled. I don't think both would interfere but would love an expert opinion?

Thank you so much, Simon for always answering every question here :)

[simonswiss]

Well - the side effect is that you'll never be able to apply margin top to anything immediately following a h1, an ul or an old, but I am pretty sure you don't need to worry about it (in the context of it being inside a prose wrapper. 👍

[braydoncoyer]

Hi @simonswiss - I seem to be having this exact same issue, and I'm not using grid. I am using a flexbox column layout for my blog using MDX, but the h2 element seems to be behaving the same way it was described above. I'm using the default typography plugin, and have everything wrapped in a prose wrapper.

Any thoughts?

[simonswiss]

Hey!

Hard to tell from that screenshot, but it looks like the normal amount of space between heading tags here?

This is how it looks in the demo:

[braydoncoyer]

It just seems weird that the h2 has a crazy amount of top-margin, but other headings seem more normalized (the h1, for example). If anything, I thought there would be bottom-margin that pushes following content down the page. Instead, it's top-margin applied to the headings.

Maybe this is expected behavior and I'm just not aware. :)