A supercharged Tailwind config with simple, custom composition utilities inspired by Every Layout, plus fluid typography and spacing scales 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 .gap-* to control the gap between each cluster
item.
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: .space-y-*
Vertically stacks elements with consistent spacing. Perfect for sections, form fields, or lists where vertical rhythm matters.
I've decided to use .space-y-* for simplicity,
since it does the same thing.
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-width-* 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.
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: .full-bleed
Allows content to stretch the full viewport width, breaking out of any container constraints like .wrapper. Ideal for edge-to-edge images, backgrounds, or sections that visually separate from the main layout.
This works perfect in combination with .frame-*.
If you want some breathing room around the edges, add
.w-[*vw].
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.