A supercharged Tailwind config with simple, custom composition utilities inspired by Every Layout, plus fluid typography created with Utopia. Includes sensible global styles I find myself adding to nearly every project, along with a growing collection of general-purpose utilities.
Git RepoClass: .cluster
Groups items together with equal spacing, allowing them to wrap naturally when space is limited. Great for button groups, tag lists, or inline navigation.
Use .cluster-* to control the space between each
item. By default, the spacing is 1rem.
Use any flexbox aligmnent value to configure how the items
align. The defualt is .items-center.
Class: .repel
Pushes two elements apart to opposite ends of a container while keeping them vertically aligned. Great for headers, footers, or any layout where you want one item on the left and another on the right.
Use any flexbox aligmnent value to configure how the items
align. The defualt is .items-center.
Class: .stack
Vertically stacks elements with consistent spacing. Perfect for sections, form fields, or lists where vertical rhythm matters.
By default, the spacing is 1em (equal to the
element's font size). Control the spacing with
.stack-*, using values from the default or custom
spacing values set in the theme.
To adjust spacing for a single child, use
.stack-child-* on that element. For example,
applying .stack-child-12 to the third child in a
.stack will give it a 48px top margin,
without affecting the rest.
To remove elements from being affected by a stack context, wrap
them in a div with the class of .stack-ignore.
Class: .switcher
Displays up to four items in a horizontal row when space allows, and switches to a vertical stack on smaller widths. Useful for responsive navigation, feature grids, or grouped controls.
Use .switcher-* to control how large the container
needs to be to allow items to sit inline with each other. This
accepts any value based on the container widths set in the
theme.
Use .switcher-gap-* to control the space between
each item.
Class: .frame-*
Maintains a fixed aspect ratio for its content (images, videos, embeds) while allowing it to scale responsively without distortion. This accepts any value based on the aspect ratios set in the theme.
Class: .reel
Creates a horizontal scrolling container for items that don't fit in a single row, with optional snap points for smooth navigation. Perfect for carousels, product lists, or galleries on smaller screens.
Add .reel-snap-* to snap on each item on scroll.
Accepts both start and center.
Class: .bleed-*
Allows content to stretch to the viewport edge, breaking out of any container constraints like .wrapper. Ideal for edge-to-edge images, backgrounds, or sections that visually separate from the main layout.
.bleed-full makes content span the entire viewport
width. If you want some breathing room around the edges, add
.w-[*vw].
.bleed-left or .bleed-right push
content out to one side only, creating asymmetrical breakouts.
These utilities work perfect in combination with
.frame-*.
Class: .stretch-link
Expands an inline link to cover its entire parent container, making the whole area clickable while preserving the link's visual styling. Perfect for cards or list items where you want easy, user-friendly click targets.
Make sure to add .relative to the parent element to
prevent the link from stretching outside the parent element.
Card title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, deleniti.
Card linkClass: .skip-link
Provides a hidden, keyboard-accessible link that lets users quickly jump past repetitive or lengthy content to the main section. Essential for improving navigation for keyboard and screen reader users.
Try tabbing to the top of this page to see the skip link in action.