Box
This component provides a flexible container with customizable size, padding, and prose styling through its integration with Tailwind Typography classes.
To center a box that uses the prose styling offered by Tailwind CSS and restricts its line length to 65
characters, the specific CSS classes [&>.prose]:mx-auto [&>.prose]:text-center have been applied.
Padding `xs`
- Size: `regular` (default)
This box is a child of a BoxGrid that utilizes the gap-y-4 class to
introduce a gap between adjacent boxes.
Please avoid using gap-* or gap-x-* classes, as they may result in an unexpected layout.
Padding `sm`
- Size: `breakout`
Padding `md` (default)
- Size: `regular` (default)
- Prose: `prose`
The default line length is set to 65 characters, for better readability. This limitation promotes a consistent and aesthetically pleasing layout throughout the document. It's worth noting that this entire paragraph is intentionally crafted to be 341 characters long, demonstrating how the text is laid out with this specific feature enabled.
Padding `lg`
- Size: `full-width`
- Prose: `prose-w-full`
In this case, the line length limit has been removed, and the line length is limited by the width of its parent container. This text has been crafted to be 245 characters long, demonstrating how the previous 65-character limit no longer applies.
Inner Box
- Padding `xs`
- Prose: `not-prose`
Inner Box
- Padding `sm`
- Prose inherited by its parent box