The content element makes sure things like spacing, colors, and sizing look right for the 'classic' HTML content tags.
It's very helpful for rendering markdown!
Have as many paragraphs as you want.— Miles McCain
The content element automatically styles a set of core HTML tags without requiring any classes be applied directly. It makes sure that their relative spacing is nice, too — from a typographical perspective, this element is somewhat opinionated. Fortunately, its opinions are backed by typographic best practices.
The content element will automatically style the following elements, if inside a
<h6>(as heading with automatic sizing)
<blockquote>(as a neutral aside)
<table>(as a table)
In addition, the content element will apply the following spacing rules to its children (note that units are Tailwind spacing units).
- At least a margin of 3 between each element (including paragraphs)
- A margin of 12 before each h1, unless it’s the first element
- A margin of 10 before each h2, unless it’s the first element
- A margin of 8 before each h3, unless it’s the first element
- A margin of 6 before each h4, h5, h6, unless it’s the first element
- A horizontal margin of 1px before and after
- A left margin of 8 on all lists
- A margin of 5 before and after
<blockquote>s (and a margin of 1 before the
Cascading effects — The content element defines spacing and styling for core HTML elements, even if no classes are applied. While this is partly what makes it useful (after all, it makes displaying rendered markdown a breeze), it can also have cascading effects that make it difficult to build complex components inside it. Use the content class on as little content as you can to avoid these side effects. (It’s perfect to use on your body text, for example, but avoid setting it on your root
Beyond customization, the content element has no variants.
The content block is generally good for accessibility. That’s because it encourages the use of semantic HTML elements, like
<blockquote>. And, because most of a content element is just text, screenreaders can handle it perfectly.
Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a
Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!
Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).
||sets the line height|
||fonts||—||sets the body text font family|
||fonts||—||sets the display text (heading) font family|
||color||—||sets the title color|
You can also customize this element by simply overriding any of its CSS attributes, listed
here. Contextual variable defaults (e.g.,
--color-content) and global
--family-primary) are defined here.