CSS Utilities Cheat Sheet

This starter template comes included with a number of helpful CSS classes (no JavaScript) to streamline your developer workflow.

Components🔗

Defined in @layer components, these are some CSS classes you can use to add some minimal styling for commonly used components.

🪗 .accordion🔗

Attaching this class to a <details> tag will add a plus "+" icon to the right edge of the <summary> that spins into an "X" when opened.

Additionally, add the .anim-fade-to-b class to a child element to add a fading animation when opened.

<details className="accordion">
	<summary>Title</summary>

	<div className="anim-fade-to-b">
		...
	</div>
</details>

🎠 .carousel🔗

Attaching this class to an element will turn it into a container with its child elements as slider items with scroll-snapping.

Use .gap-* for spacing and a --size value to override the default width of min(var(--size, 300px), 80vw).

Use Tailwind responsive modifiers to change the layout at certain breakpoints.

{/* carousel on mobile; 3-column grid on desktop */}
<ul className="
	max-md:carousel max-md:full-bleed [--size:250px]
	grid grid-cols-3 gap-4
">
	<li>{/* item 1 */}</li>
	<li>{/* item 2 */}</li>
	...
</ul>

📜 .richtext🔗

Add to any element to style with H1-6 headings, bulleted and numbered lists, and ample spacing for increased readability.

Typically used with the <PortableText> component.

<div className="richtext">
	<PortableText value={content} />
</div>

Utilities🔗

Defined in @layer utilities, these are a some utility classes to add some special styling and effects to your elements.

.full-bleed🔗

Need to expand an element beyond its containing element and stretch across the entire viewport width?

Recommended to use with .carousel on mobile to have slider items to scroll from the edge of the screen.

.no-scrollbar🔗

Removes the native browser scrollbar for elements with overflowing content.

.overflow-fade🔗

Adds a fading mask on the left and right edges of an element. Use --offset to override the default size of 4rem.

.sticky-below-header🔗

Like the Tailwind .sticky, but makes an element stick just below the bottom edge of the site header.

The distance updates automatically using a resize observer, updating the --header-height CSS value.

Use --offset to increase the spacing from this edge.

.anim-fade-*🔗

A set of fade and fade-to-X direction animations. More details found in the animations blog post.

.anim-fade {}
.anim-fade-to-l {}
.anim-fade-to-r {}
.anim-fade-to-t {}
.anim-fade-to-b {}