Utilities

Utilities Presets

Quickly register all utility factories with the useUtilitiesPreset composable for seamless recipe integration and comprehensive utility class generation.

Overview

The useUtilitiesPreset composable registers all available utility factories with your Styleframe instance in a single function call. It's essential when using recipes that need to auto-generate utility classes from CSS property values.

Why use presets?

Recipe Integration: Enable recipes to automatically generate utility classes for any CSS property
Complete Coverage: Register 200+ utility factories across all CSS property categories
Zero Configuration: No setup required—just call the function and start building
Optional Value Creation: Use returned creator functions to define specific utility values when needed

Quick Start

styleframe.config.ts

import { styleframe } from 'styleframe';
import { useUtilitiesPreset } from '@styleframe/theme';

const s = styleframe();

// Register all utility factories at once
const utilities = useUtilitiesPreset(s);

// Define a recipe - utilities auto-generate from property values
s.recipe({
    name: 'button',
    base: {
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    variants: {
        size: {
            sm: { padding: '0.5rem 1rem' },
            md: { padding: '0.75rem 1.5rem' },
            lg: { padding: '1rem 2rem' },
        },
    },
});

export default s;

styleframe/index.css

/* Auto-generated utilities from recipe declarations */
._display\:inline-flex { display: inline-flex; }
._align-items\:center { align-items: center; }
._justify-content\:center { justify-content: center; }
._padding\:0\.5rem\ 1rem { padding: 0.5rem 1rem; }
._padding\:0\.75rem\ 1\.5rem { padding: 0.75rem 1.5rem; }
._padding\:1rem\ 2rem { padding: 1rem 2rem; }

/* Recipe classes */
.button { ... }
.button--size-sm { ... }
.button--size-md { ... }
.button--size-lg { ... }

`useUtilitiesPreset`

Registers all utility factories with the Styleframe instance and returns their creator functions. Supports configurable defaults with optional merge behavior.

Signature

function useUtilitiesPreset(
    s: Styleframe,
    config?: UtilitiesPresetConfig
): Record<string, UtilityCreator>

Configuration Options

Each utility category can be configured as:

Omitted or undefined (default): Use the preset's default values
false: Skip this utility category entirely
Record<string, string>: Use custom values
With meta.merge: true: Merge custom values with defaults

ll configuration options accept false to disable the utility or Record<string, string> to provide custom values. Omitting an option uses the preset defaults.

Option	Type	Description
`meta.merge`	`boolean`	When `true`, custom values merge with defaults instead of replacing them

Custom Names

Override the CSS class prefix for any utility by providing a names map. Keys are the default utility names (kebab-case), values are the replacement names.

Option	Type	Description
`names`	`Record<string, string>`	Map of default utility names to custom names

styleframe.config.ts

import { styleframe } from 'styleframe';
import { useUtilitiesPreset } from '@styleframe/theme';

const s = styleframe();

const utilities = useUtilitiesPreset(s, {
    names: {
        'margin': 'm',
        'padding': 'p',
        'width': 'w',
        'border-radius': 'rounded',
    },
});

export default s;

This generates class names like ._m:sm, ._p:md, ._w:full, and ._rounded:lg instead of the default ._margin:sm, ._padding:md, ._width:full, and ._border-radius:lg.

Accessibility

Option	CSS Property	Description
`forcedColorAdjust`	`forced-color-adjust`	Forced color adjustment values

Backgrounds

Option	CSS Property	Description
`backgroundAttachment`	`background-attachment`	Background attachment values (`fixed`, `local`, `scroll`)
`backgroundClip`	`background-clip`	Background clipping values (`border-box`, `padding-box`, `content-box`, `text`)
`backgroundImage`	`background-image`	Background image values (gradients, `none`)
`backgroundOrigin`	`background-origin`	Background origin values (`border-box`, `padding-box`, `content-box`)
`backgroundPosition`	`background-position`	Background position values (`center`, `top`, `bottom`, etc.)
`backgroundRepeat`	`background-repeat`	Background repeat values (`repeat`, `no-repeat`, `repeat-x`, etc.)
`backgroundSize`	`background-size`	Background size values (`auto`, `cover`, `contain`)

Effects

Option	CSS Property	Description
`backgroundBlendMode`	`background-blend-mode`	Background blend mode values (`normal`, `multiply`, `screen`, etc.)
`mixBlendMode`	`mix-blend-mode`	Mix blend mode values (`normal`, `multiply`, `screen`, etc.)

Borders

Option	CSS Property	Description
`divideStyle`	`border-style` (children)	Divide style values (`solid`, `dashed`, `dotted`, etc.)
`outlineStyle`	`outline-style`	Outline style values (`none`, `solid`, `dashed`, etc.)

Flexbox & Grid

Option	CSS Property	Description
`flex`	`flex`	Flex shorthand values (`1`, `auto`, `initial`, `none`)
`flexDirection`	`flex-direction`	Flex direction values (`row`, `row-reverse`, `column`, `column-reverse`)
`flexWrap`	`flex-wrap`	Flex wrap values (`wrap`, `wrap-reverse`, `nowrap`)
`justifyContent`	`justify-content`	Justify content values (`start`, `end`, `center`, `between`, `around`, `evenly`)
`justifyItems`	`justify-items`	Justify items values (`start`, `end`, `center`, `stretch`)
`justifySelf`	`justify-self`	Justify self values (`auto`, `start`, `end`, `center`, `stretch`)
`alignContent`	`align-content`	Align content values (`start`, `end`, `center`, `between`, `around`, `evenly`)
`alignItems`	`align-items`	Align items values (`start`, `end`, `center`, `baseline`, `stretch`)
`alignSelf`	`align-self`	Align self values (`auto`, `start`, `end`, `center`, `baseline`, `stretch`)
`placeContent`	`place-content`	Place content values (`start`, `end`, `center`, `between`, `around`, `evenly`)
`placeItems`	`place-items`	Place items values (`start`, `end`, `center`, `baseline`, `stretch`)
`placeSelf`	`place-self`	Place self values (`auto`, `start`, `end`, `center`, `stretch`)
`gridAutoFlow`	`grid-auto-flow`	Grid auto flow values (`row`, `column`, `dense`, `row-dense`, `column-dense`)

Interactivity

Option	CSS Property	Description
`appearance`	`appearance`	Appearance values (`none`, `auto`)
`colorScheme`	`color-scheme`	Color scheme values (`normal`, `light`, `dark`)
`cursor`	`cursor`	Cursor values (`auto`, `pointer`, `wait`, `text`, `move`, etc.)
`pointerEvents`	`pointer-events`	Pointer events values (`auto`, `none`)
`resize`	`resize`	Resize values (`none`, `both`, `horizontal`, `vertical`)
`scrollBehavior`	`scroll-behavior`	Scroll behavior values (`auto`, `smooth`)
`scrollSnapAlign`	`scroll-snap-align`	Scroll snap align values (`start`, `end`, `center`, `none`)
`scrollSnapStop`	`scroll-snap-stop`	Scroll snap stop values (`normal`, `always`)
`scrollSnapType`	`scroll-snap-type`	Scroll snap type values (`none`, `x`, `y`, `both`, `mandatory`, `proximity`)
`touchAction`	`touch-action`	Touch action values (`auto`, `none`, `manipulation`, `pan-x`, `pan-y`, etc.)
`userSelect`	`user-select`	User select values (`auto`, `none`, `text`, `all`)
`willChange`	`will-change`	Will change values (`auto`, `scroll-position`, `contents`, `transform`)

Layout

Option	CSS Property	Description
`aspectRatio`	`aspect-ratio`	Aspect ratio values (`auto`, `square`, `video`)
`boxDecorationBreak`	`box-decoration-break`	Box decoration break values (`clone`, `slice`)
`boxSizing`	`box-sizing`	Box sizing values (`border-box`, `content-box`)
`breakAfter`	`break-after`	Break after values (`auto`, `avoid`, `all`, `page`, `column`, etc.)
`breakBefore`	`break-before`	Break before values (`auto`, `avoid`, `all`, `page`, `column`, etc.)
`breakInside`	`break-inside`	Break inside values (`auto`, `avoid`, `avoid-page`, `avoid-column`)
`clear`	`clear`	Clear values (`start`, `end`, `left`, `right`, `both`, `none`)
`display`	`display`	Display values (`block`, `inline`, `flex`, `grid`, `none`, etc.)
`float`	`float`	Float values (`start`, `end`, `left`, `right`, `none`)
`isolation`	`isolation`	Isolation values (`isolate`, `auto`)
`objectFit`	`object-fit`	Object fit values (`contain`, `cover`, `fill`, `none`, `scale-down`)
`objectPosition`	`object-position`	Object position values (`center`, `top`, `bottom`, `left`, `right`, etc.)
`overflow`	`overflow`	Overflow values (`auto`, `hidden`, `clip`, `visible`, `scroll`)
`overscroll`	`overscroll-behavior`	Overscroll values (`auto`, `contain`, `none`)
`position`	`position`	Position values (`static`, `fixed`, `absolute`, `relative`, `sticky`)
`visibility`	`visibility`	Visibility values (`visible`, `invisible`, `collapse`)

Tables

Option	CSS Property	Description
`borderCollapse`	`border-collapse`	Border collapse values (`collapse`, `separate`)
`captionSide`	`caption-side`	Caption side values (`top`, `bottom`)
`tableLayout`	`table-layout`	Table layout values (`auto`, `fixed`)

Transforms

Option	CSS Property	Description
`backfaceVisibility`	`backface-visibility`	Backface visibility values (`visible`, `hidden`)
`perspectiveOrigin`	`perspective-origin`	Perspective origin values (`center`, `top`, `bottom`, `left`, `right`, etc.)
`transformOrigin`	`transform-origin`	Transform origin values (`center`, `top`, `bottom`, `left`, `right`, etc.)
`transformStyle`	`transform-style`	Transform style values (`flat`, `preserve-3d`)

Transitions & Animation

Option	CSS Property	Description
`animation`	`animation`	Animation preset values (`none`, `spin`, `ping`, `pulse`, `bounce`)
`transitionBehavior`	`transition-behavior`	Transition behavior values (`normal`, `allow-discrete`)
`transitionProperty`	`transition-property`	Transition property values (`none`, `all`, `colors`, `opacity`, `shadow`, `transform`)

Typography

Option	CSS Property	Description
`fontSmoothing`	`-webkit-font-smoothing`	Font smoothing values (`antialiased`, `subpixel-antialiased`)
`fontStretch`	`font-stretch`	Font stretch values (`ultra-condensed`, `condensed`, `normal`, `expanded`, etc.)
`fontVariantNumeric`	`font-variant-numeric`	Font variant numeric values (`normal`, `ordinal`, `slashed-zero`, etc.)
`hyphens`	`hyphens`	Hyphenation values (`none`, `manual`, `auto`)
`listStylePosition`	`list-style-position`	List style position values (`inside`, `outside`)
`listStyleType`	`list-style-type`	List style type values (`none`, `disc`, `decimal`, etc.)
`overflowWrap`	`overflow-wrap`	Overflow wrap values (`normal`, `break-word`)
`textAlign`	`text-align`	Text alignment values (`left`, `center`, `right`, `justify`, `start`, `end`)
`textDecorationLine`	`text-decoration-line`	Text decoration line values (`none`, `underline`, `overline`, `line-through`)
`textDecorationStyle`	`text-decoration-style`	Text decoration style values (`solid`, `double`, `dotted`, `dashed`, `wavy`)
`textOverflow`	`text-overflow`	Text overflow values (`clip`, `ellipsis`)
`textTransform`	`text-transform`	Text transform values (`none`, `uppercase`, `lowercase`, `capitalize`)
`textWrap`	`text-wrap`	Text wrap values (`wrap`, `nowrap`, `balance`, `pretty`)
`verticalAlign`	`vertical-align`	Vertical alignment values (`baseline`, `top`, `middle`, `bottom`, etc.)
`whitespace`	`white-space`	Whitespace values (`normal`, `nowrap`, `pre`, `pre-line`, `pre-wrap`, `break-spaces`)
`wordBreak`	`word-break`	Word break values (`normal`, `break-all`, `keep-all`, `break-word`)

Return Value

Returns an object containing creator functions for all registered utilities. Each creator function allows you to define specific values for that utility.

const {
    createMarginUtility,
    createPaddingUtility,
    createDisplayUtility,
    // ... 200+ more creators
} = useUtilitiesPreset(s);

Pre-generating Utility Values

When using the Styleframe Vite plugin, the scanner automatically detects utility class names in your source files and generates the corresponding CSS — so you don't need to manually define values. However, if you want to pre-generate specific utility values tied to your design tokens, you can use the returned creator functions:

import { styleframe } from 'styleframe';
import { useUtilitiesPreset, useSpacingDesignTokens } from '@styleframe/theme';

const s = styleframe();

// Create spacing tokens
const { spacingSm, spacingMd, spacingLg } = useSpacingDesignTokens(s, {
    default: '@md',
    sm: '0.5rem',
    md: '1rem',
    lg: '1.5rem',
});

// Register all utilities and get creators
const {
    createMarginUtility,
    createPaddingUtility,
    createGapUtility,
} = useUtilitiesPreset(s);

// Define specific values using your design tokens
createMarginUtility({
    sm: s.ref(spacingSm),
    md: s.ref(spacingMd),
    lg: s.ref(spacingLg),
    auto: 'auto',
});

createPaddingUtility({
    sm: s.ref(spacingSm),
    md: s.ref(spacingMd),
    lg: s.ref(spacingLg),
});

createGapUtility({
    sm: s.ref(spacingSm),
    md: s.ref(spacingMd),
    lg: s.ref(spacingLg),
});

export default s;

This generates utility classes like _margin:sm, _padding:md, _gap:lg that reference your design tokens.

Available Utilities

The preset registers utility factories for all CSS property categories. Here's a complete breakdown:

Accessibility

Creator Function	CSS Property	Class Pattern
`createForcedColorAdjustUtility`	`forced-color-adjust`	`_forced-color-adjust:*`
`createSrOnlyUtility`	(multiple)	`_sr-only:*`
`createNotSrOnlyUtility`	(multiple)	`_not-sr-only:*`

Backgrounds

Creator Function	CSS Property	Class Pattern
`createBackgroundAttachmentUtility`	`background-attachment`	`_background-attachment:*`
`createBackgroundClipUtility`	`background-clip`	`_background-clip:*`
`createBackgroundColorUtility`	`background-color`	`_background-color:*`
`createBackgroundImageUtility`	`background-image`	`_background-image:*`
`createBackgroundUtility`	`background`	`_background:*`
`createBackgroundOriginUtility`	`background-origin`	`_background-origin:*`
`createBackgroundPositionUtility`	`background-position`	`_background-position:*`
`createBackgroundRepeatUtility`	`background-repeat`	`_background-repeat:*`
`createBackgroundSizeUtility`	`background-size`	`_background-size:*`
`createGradientFromUtility`	`gradient-from`	`_gradient-from:*`
`createGradientToUtility`	`gradient-to`	`_gradient-to:*`
`createGradientViaUtility`	`gradient-via`	`_gradient-via:*`

Borders

Creator Function	CSS Property	Class Pattern
`createBorderColorUtility`	`border-color`	`_border-color:*`
`createBorderColorTopUtility`	`border-top-color`	`_border-top-color:*`
`createBorderColorRightUtility`	`border-right-color`	`_border-right-color:*`
`createBorderColorBottomUtility`	`border-bottom-color`	`_border-bottom-color:*`
`createBorderColorLeftUtility`	`border-left-color`	`_border-left-color:*`
`createBorderColorXUtility`	`border-left/right-color`	`_border-x-color:*`
`createBorderColorYUtility`	`border-top/bottom-color`	`_border-y-color:*`
`createBorderColorStartUtility`	`border-inline-start-color`	`_border-inline-start-color:*`
`createBorderColorEndUtility`	`border-inline-end-color`	`_border-inline-end-color:*`
`createBorderRadiusUtility`	`border-radius`	`_border-radius:*`
`createBorderRadiusTopUtility`	`border-top-*-radius`	`_border-radius-top:*`
`createBorderRadiusRightUtility`	`border-*-right-radius`	`_border-radius-right:*`
`createBorderRadiusBottomUtility`	`border-bottom-*-radius`	`_border-radius-bottom:*`
`createBorderRadiusLeftUtility`	`border-*-left-radius`	`_border-radius-left:*`
`createBorderRadiusTopLeftUtility`	`border-top-left-radius`	`_border-radius-top-left:*`
`createBorderRadiusTopRightUtility`	`border-top-right-radius`	`_border-radius-top-right:*`
`createBorderRadiusBottomLeftUtility`	`border-bottom-left-radius`	`_border-radius-bottom-left:*`
`createBorderRadiusBottomRightUtility`	`border-bottom-right-radius`	`_border-radius-bottom-right:*`
`createBorderRadiusStartUtility`	`border-start-*-radius`	`_border-radius-start:*`
`createBorderRadiusEndUtility`	`border-end-*-radius`	`_border-radius-end:*`
`createBorderRadiusStartStartUtility`	`border-start-start-radius`	`_border-radius-start-start:*`
`createBorderRadiusStartEndUtility`	`border-start-end-radius`	`_border-radius-start-end:*`
`createBorderRadiusEndStartUtility`	`border-end-start-radius`	`_border-radius-end-start:*`
`createBorderRadiusEndEndUtility`	`border-end-end-radius`	`_border-radius-end-end:*`
`createBorderStyleUtility`	`border-style`	`_border-style:*`
`createBorderWidthUtility`	`border-width`	`_border-width:*`
`createBorderWidthTopUtility`	`border-top-width`	`_border-width-top:*`
`createBorderWidthRightUtility`	`border-right-width`	`_border-width-right:*`
`createBorderWidthBottomUtility`	`border-bottom-width`	`_border-width-bottom:*`
`createBorderWidthLeftUtility`	`border-left-width`	`_border-width-left:*`
`createBorderWidthXUtility`	`border-left/right-width`	`_border-width-x:*`
`createBorderWidthYUtility`	`border-top/bottom-width`	`_border-width-y:*`
`createBorderWidthStartUtility`	`border-inline-start-width`	`_border-width-start:*`
`createBorderWidthEndUtility`	`border-inline-end-width`	`_border-width-end:*`
`createDivideColorUtility`	`border-color` (children)	`_divide-color:*`
`createDivideStyleUtility`	`border-style` (children)	`_divide-style:*`
`createDivideXUtility`	`border-left-width`	`_divide-x:*`
`createDivideXReverseUtility`	`divide-x-reverse`	`_divide-x-reverse:*`
`createDivideYUtility`	`border-top-width`	`_divide-y:*`
`createDivideYReverseUtility`	`divide-y-reverse`	`_divide-y-reverse:*`
`createOutlineColorUtility`	`outline-color`	`_outline-color:*`
`createOutlineOffsetUtility`	`outline-offset`	`_outline-offset:*`
`createOutlineStyleUtility`	`outline-style`	`_outline-style:*`
`createOutlineWidthUtility`	`outline-width`	`_outline-width:*`
`createRingColorUtility`	`ring-color`	`_ring-color:*`
`createRingInsetUtility`	`ring-inset`	`_ring-inset:*`
`createRingOffsetColorUtility`	`ring-offset-color`	`_ring-offset-color:*`
`createRingOffsetWidthUtility`	`ring-offset-width`	`_ring-offset-width:*`
`createRingWidthUtility`	`box-shadow` (ring)	`_ring-width:*`

Effects

Creator Function	CSS Property	Class Pattern
`createBackgroundBlendModeUtility`	`background-blend-mode`	`_background-blend-mode:*`
`createBoxShadowUtility`	`box-shadow`	`_box-shadow:*`
`createBoxShadowColorUtility`	`box-shadow-color`	`_box-shadow-color:*`
`createMixBlendModeUtility`	`mix-blend-mode`	`_mix-blend-mode:*`
`createOpacityUtility`	`opacity`	`_opacity:*`
`createTextShadowUtility`	`text-shadow`	`_text-shadow:*`
`createTextShadowColorUtility`	`text-shadow-color`	`_text-shadow-color:*`

Filters

Creator Function	CSS Property	Class Pattern
`createBackdropBlurUtility`	`backdrop-filter: blur()`	`_backdrop-blur:*`
`createBackdropBrightnessUtility`	`backdrop-filter: brightness()`	`_backdrop-brightness:*`
`createBackdropContrastUtility`	`backdrop-filter: contrast()`	`_backdrop-contrast:*`
`createBackdropGrayscaleUtility`	`backdrop-filter: grayscale()`	`_backdrop-grayscale:*`
`createBackdropHueRotateUtility`	`backdrop-filter: hue-rotate()`	`_backdrop-hue-rotate:*`
`createBackdropInvertUtility`	`backdrop-filter: invert()`	`_backdrop-invert:*`
`createBackdropOpacityUtility`	`backdrop-filter: opacity()`	`_backdrop-opacity:*`
`createBackdropSaturateUtility`	`backdrop-filter: saturate()`	`_backdrop-saturate:*`
`createBackdropSepiaUtility`	`backdrop-filter: sepia()`	`_backdrop-sepia:*`
`createBlurUtility`	`filter: blur()`	`_blur:*`
`createBrightnessUtility`	`filter: brightness()`	`_brightness:*`
`createContrastUtility`	`filter: contrast()`	`_contrast:*`
`createDropShadowUtility`	`filter: drop-shadow()`	`_drop-shadow:*`
`createGrayscaleUtility`	`filter: grayscale()`	`_grayscale:*`
`createHueRotateUtility`	`filter: hue-rotate()`	`_hue-rotate:*`
`createInvertUtility`	`filter: invert()`	`_invert:*`
`createSaturateUtility`	`filter: saturate()`	`_saturate:*`
`createSepiaUtility`	`filter: sepia()`	`_sepia:*`

Flexbox & Grid

Creator Function	CSS Property	Class Pattern
`createAlignContentUtility`	`align-content`	`_align-content:*`
`createAlignItemsUtility`	`align-items`	`_align-items:*`
`createAlignSelfUtility`	`align-self`	`_align-self:*`
`createFlexUtility`	`flex`	`_flex:*`
`createFlexBasisUtility`	`flex-basis`	`_flex-basis:*`
`createFlexDirectionUtility`	`flex-direction`	`_flex-direction:*`
`createFlexGrowUtility`	`flex-grow`	`_flex-grow:*`
`createFlexShrinkUtility`	`flex-shrink`	`_flex-shrink:*`
`createFlexWrapUtility`	`flex-wrap`	`_flex-wrap:*`
`createGapUtility`	`gap`	`_gap:*`
`createGapXUtility`	`column-gap`	`_gap-x:*`
`createGapYUtility`	`row-gap`	`_gap-y:*`
`createGridAutoColumnsUtility`	`grid-auto-columns`	`_grid-auto-columns:*`
`createGridAutoFlowUtility`	`grid-auto-flow`	`_grid-auto-flow:*`
`createGridAutoRowsUtility`	`grid-auto-rows`	`_grid-auto-rows:*`
`createGridColumnUtility`	`grid-column`	`_grid-column:*`
`createGridColumnEndUtility`	`grid-column-end`	`_grid-column-end:*`
`createGridColumnStartUtility`	`grid-column-start`	`_grid-column-start:*`
`createGridRowUtility`	`grid-row`	`_grid-row:*`
`createGridRowEndUtility`	`grid-row-end`	`_grid-row-end:*`
`createGridRowStartUtility`	`grid-row-start`	`_grid-row-start:*`
`createGridTemplateColumnsUtility`	`grid-template-columns`	`_grid-template-columns:*`
`createGridTemplateRowsUtility`	`grid-template-rows`	`_grid-template-rows:*`
`createJustifyContentUtility`	`justify-content`	`_justify-content:*`
`createJustifyItemsUtility`	`justify-items`	`_justify-items:*`
`createJustifySelfUtility`	`justify-self`	`_justify-self:*`
`createOrderUtility`	`order`	`_order:*`
`createPlaceContentUtility`	`place-content`	`_place-content:*`
`createPlaceItemsUtility`	`place-items`	`_place-items:*`
`createPlaceSelfUtility`	`place-self`	`_place-self:*`

Interactivity

Creator Function	CSS Property	Class Pattern
`createAccentColorUtility`	`accent-color`	`_accent-color:*`
`createAppearanceUtility`	`appearance`	`_appearance:*`
`createCaretColorUtility`	`caret-color`	`_caret-color:*`
`createColorSchemeUtility`	`color-scheme`	`_color-scheme:*`
`createCursorUtility`	`cursor`	`_cursor:*`
`createPointerEventsUtility`	`pointer-events`	`_pointer-events:*`
`createResizeUtility`	`resize`	`_resize:*`
`createScrollBehaviorUtility`	`scroll-behavior`	`_scroll-behavior:*`
`createScrollMarginUtility`	`scroll-margin`	`_scroll-margin:*`
`createScrollMarginTopUtility`	`scroll-margin-top`	`_scroll-margin-top:*`
`createScrollMarginRightUtility`	`scroll-margin-right`	`_scroll-margin-right:*`
`createScrollMarginBottomUtility`	`scroll-margin-bottom`	`_scroll-margin-bottom:*`
`createScrollMarginLeftUtility`	`scroll-margin-left`	`_scroll-margin-left:*`
`createScrollMarginXUtility`	`scroll-margin-left/right`	`_scroll-margin-x:*`
`createScrollMarginYUtility`	`scroll-margin-top/bottom`	`_scroll-margin-y:*`
`createScrollMarginStartUtility`	`scroll-margin-inline-start`	`_scroll-margin-start:*`
`createScrollMarginEndUtility`	`scroll-margin-inline-end`	`_scroll-margin-end:*`
`createScrollPaddingUtility`	`scroll-padding`	`_scroll-padding:*`
`createScrollPaddingTopUtility`	`scroll-padding-top`	`_scroll-padding-top:*`
`createScrollPaddingRightUtility`	`scroll-padding-right`	`_scroll-padding-right:*`
`createScrollPaddingBottomUtility`	`scroll-padding-bottom`	`_scroll-padding-bottom:*`
`createScrollPaddingLeftUtility`	`scroll-padding-left`	`_scroll-padding-left:*`
`createScrollPaddingXUtility`	`scroll-padding-left/right`	`_scroll-padding-x:*`
`createScrollPaddingYUtility`	`scroll-padding-top/bottom`	`_scroll-padding-y:*`
`createScrollPaddingStartUtility`	`scroll-padding-inline-start`	`_scroll-padding-start:*`
`createScrollPaddingEndUtility`	`scroll-padding-inline-end`	`_scroll-padding-end:*`
`createScrollSnapAlignUtility`	`scroll-snap-align`	`_scroll-snap-align:*`
`createScrollSnapStopUtility`	`scroll-snap-stop`	`_scroll-snap-stop:*`
`createScrollSnapTypeUtility`	`scroll-snap-type`	`_scroll-snap-type:*`
`createTouchActionUtility`	`touch-action`	`_touch-action:*`
`createUserSelectUtility`	`user-select`	`_user-select:*`
`createWillChangeUtility`	`will-change`	`_will-change:*`

Layout

Creator Function	CSS Property	Class Pattern
`createAspectRatioUtility`	`aspect-ratio`	`_aspect-ratio:*`
`createBottomUtility`	`bottom`	`_bottom:*`
`createBoxDecorationBreakUtility`	`box-decoration-break`	`_box-decoration-break:*`
`createBoxSizingUtility`	`box-sizing`	`_box-sizing:*`
`createBreakAfterUtility`	`break-after`	`_break-after:*`
`createBreakBeforeUtility`	`break-before`	`_break-before:*`
`createBreakInsideUtility`	`break-inside`	`_break-inside:*`
`createClearUtility`	`clear`	`_clear:*`
`createColumnsUtility`	`columns`	`_columns:*`
`createDisplayUtility`	`display`	`_display:*`
`createFloatUtility`	`float`	`_float:*`
`createInsetUtility`	`inset`	`_inset:*`
`createInsetXUtility`	`left` + `right`	`_inset-x:*`
`createInsetYUtility`	`top` + `bottom`	`_inset-y:*`
`createInsetStartUtility`	`inset-inline-start`	`_inset-start:*`
`createInsetEndUtility`	`inset-inline-end`	`_inset-end:*`
`createIsolationUtility`	`isolation`	`_isolation:*`
`createLeftUtility`	`left`	`_left:*`
`createObjectFitUtility`	`object-fit`	`_object-fit:*`
`createObjectPositionUtility`	`object-position`	`_object-position:*`
`createOverflowUtility`	`overflow`	`_overflow:*`
`createOverflowXUtility`	`overflow-x`	`_overflow-x:*`
`createOverflowYUtility`	`overflow-y`	`_overflow-y:*`
`createOverscrollUtility`	`overscroll-behavior`	`_overscroll:*`
`createOverscrollXUtility`	`overscroll-behavior-x`	`_overscroll-x:*`
`createOverscrollYUtility`	`overscroll-behavior-y`	`_overscroll-y:*`
`createPositionUtility`	`position`	`_position:*`
`createRightUtility`	`right`	`_right:*`
`createTopUtility`	`top`	`_top:*`
`createVisibilityUtility`	`visibility`	`_visibility:*`
`createZIndexUtility`	`z-index`	`_z-index:*`

Sizing

Creator Function	CSS Property	Class Pattern
`createHeightUtility`	`height`	`_height:*`
`createMaxHeightUtility`	`max-height`	`_max-height:*`
`createMaxWidthUtility`	`max-width`	`_max-width:*`
`createMinHeightUtility`	`min-height`	`_min-height:*`
`createMinWidthUtility`	`min-width`	`_min-width:*`
`createSizeUtility`	`width` + `height`	`_size:*`
`createWidthUtility`	`width`	`_width:*`

Spacing

Creator Function	CSS Property	Class Pattern
`createMarginUtility`	`margin`	`_margin:*`
`createMarginTopUtility`	`margin-top`	`_margin-top:*`
`createMarginRightUtility`	`margin-right`	`_margin-right:*`
`createMarginBottomUtility`	`margin-bottom`	`_margin-bottom:*`
`createMarginLeftUtility`	`margin-left`	`_margin-left:*`
`createMarginXUtility`	`margin-left` + `margin-right`	`_margin-x:*`
`createMarginYUtility`	`margin-top` + `margin-bottom`	`_margin-y:*`
`createMarginInlineUtility`	`margin-inline`	`_margin-inline:*`
`createMarginInlineStartUtility`	`margin-inline-start`	`_margin-inline-start:*`
`createMarginInlineEndUtility`	`margin-inline-end`	`_margin-inline-end:*`
`createMarginBlockUtility`	`margin-block`	`_margin-block:*`
`createPaddingUtility`	`padding`	`_padding:*`
`createPaddingTopUtility`	`padding-top`	`_padding-top:*`
`createPaddingRightUtility`	`padding-right`	`_padding-right:*`
`createPaddingBottomUtility`	`padding-bottom`	`_padding-bottom:*`
`createPaddingLeftUtility`	`padding-left`	`_padding-left:*`
`createPaddingXUtility`	`padding-left` + `padding-right`	`_padding-x:*`
`createPaddingYUtility`	`padding-top` + `padding-bottom`	`_padding-y:*`
`createPaddingInlineUtility`	`padding-inline`	`_padding-inline:*`
`createPaddingInlineStartUtility`	`padding-inline-start`	`_padding-inline-start:*`
`createPaddingInlineEndUtility`	`padding-inline-end`	`_padding-inline-end:*`
`createPaddingBlockUtility`	`padding-block`	`_padding-block:*`
`createSpaceXUtility`	`margin-left` (children)	`_space-x:*`
`createSpaceXReverseUtility`	`space-x-reverse`	`_space-x-reverse:*`
`createSpaceYUtility`	`margin-top` (children)	`_space-y:*`
`createSpaceYReverseUtility`	`space-y-reverse`	`_space-y-reverse:*`

SVG

Creator Function	CSS Property	Class Pattern
`createFillUtility`	`fill`	`_fill:*`
`createStrokeUtility`	`stroke`	`_stroke:*`
`createStrokeWidthUtility`	`stroke-width`	`_stroke-width:*`

Tables

Creator Function	CSS Property	Class Pattern
`createBorderCollapseUtility`	`border-collapse`	`_border-collapse:*`
`createBorderSpacingUtility`	`border-spacing`	`_border-spacing:*`
`createBorderSpacingXUtility`	`border-spacing` (horizontal)	`_border-spacing-x:*`
`createBorderSpacingYUtility`	`border-spacing` (vertical)	`_border-spacing-y:*`
`createCaptionSideUtility`	`caption-side`	`_caption-side:*`
`createTableLayoutUtility`	`table-layout`	`_table-layout:*`

Transforms

Creator Function	CSS Property	Class Pattern
`createBackfaceVisibilityUtility`	`backface-visibility`	`_backface-visibility:*`
`createPerspectiveUtility`	`perspective`	`_perspective:*`
`createPerspectiveOriginUtility`	`perspective-origin`	`_perspective-origin:*`
`createRotateUtility`	`rotate`	`_rotate:*`
`createRotateXUtility`	`rotate-x`	`_rotate-x:*`
`createRotateYUtility`	`rotate-y`	`_rotate-y:*`
`createScaleUtility`	`scale`	`_scale:*`
`createScaleXUtility`	`scale-x`	`_scale-x:*`
`createScaleYUtility`	`scale-y`	`_scale-y:*`
`createSkewXUtility`	`skew-x`	`_skew-x:*`
`createSkewYUtility`	`skew-y`	`_skew-y:*`
`createTransformOriginUtility`	`transform-origin`	`_transform-origin:*`
`createTransformStyleUtility`	`transform-style`	`_transform-style:*`
`createTranslateUtility`	`translate`	`_translate:*`
`createTranslateXUtility`	`translate-x`	`_translate-x:*`
`createTranslateYUtility`	`translate-y`	`_translate-y:*`
`createTranslateZUtility`	`translate-z`	`_translate-z:*`

Transitions & Animation

Creator Function	CSS Property	Class Pattern
`createAnimationUtility`	`animation`	`_animation:*`
`createTransitionBehaviorUtility`	`transition-behavior`	`_transition-behavior:*`
`createTransitionDelayUtility`	`transition-delay`	`_transition-delay:*`
`createTransitionDurationUtility`	`transition-duration`	`_transition-duration:*`
`createTransitionPropertyUtility`	`transition-property`	`_transition-property:*`
`createTransitionTimingFunctionUtility`	`transition-timing-function`	`_transition-timing-function:*`

Typography

Creator Function	CSS Property	Class Pattern
`createColorUtility`	`color`	`_color:*`
`createContentUtility`	`content`	`_content:*`
`createFontFamilyUtility`	`font-family`	`_font-family:*`
`createFontSizeUtility`	`font-size`	`_font-size:*`
`createFontSmoothingUtility`	`-webkit-font-smoothing`	`_font-smoothing:*`
`createFontStretchUtility`	`font-stretch`	`_font-stretch:*`
`createFontStyleUtility`	`font-style`	`_font-style:*`
`createFontVariantNumericUtility`	`font-variant-numeric`	`_font-variant-numeric:*`
`createFontWeightUtility`	`font-weight`	`_font-weight:*`
`createHyphensUtility`	`hyphens`	`_hyphens:*`
`createLetterSpacingUtility`	`letter-spacing`	`_letter-spacing:*`
`createLineClampUtility`	`-webkit-line-clamp`	`_line-clamp:*`
`createLineHeightUtility`	`line-height`	`_line-height:*`
`createListStyleImageUtility`	`list-style-image`	`_list-style-image:*`
`createListStylePositionUtility`	`list-style-position`	`_list-style-position:*`
`createListStyleTypeUtility`	`list-style-type`	`_list-style-type:*`
`createOverflowWrapUtility`	`overflow-wrap`	`_overflow-wrap:*`
`createTextAlignUtility`	`text-align`	`_text-align:*`
`createTextColorUtility`	`color`	`_text-color:*`
`createTextDecorationColorUtility`	`text-decoration-color`	`_text-decoration-color:*`
`createTextDecorationLineUtility`	`text-decoration-line`	`_text-decoration-line:*`
`createTextDecorationStyleUtility`	`text-decoration-style`	`_text-decoration-style:*`
`createTextDecorationThicknessUtility`	`text-decoration-thickness`	`_text-decoration-thickness:*`
`createTextIndentUtility`	`text-indent`	`_text-indent:*`
`createTextOverflowUtility`	`text-overflow`	`_text-overflow:*`
`createTextTransformUtility`	`text-transform`	`_text-transform:*`
`createTextUnderlineOffsetUtility`	`text-underline-offset`	`_text-underline-offset:*`
`createTextWrapUtility`	`text-wrap`	`_text-wrap:*`
`createVerticalAlignUtility`	`vertical-align`	`_vertical-align:*`
`createWhitespaceUtility`	`white-space`	`_whitespace:*`
`createWordBreakUtility`	`word-break`	`_word-break:*`

`useShorthandUtilitiesPreset`

A convenience wrapper around useUtilitiesPreset that applies TailwindCSS-style shorthand class names. Instead of ._margin:sm, you get ._m:sm.

Signature

function useShorthandUtilitiesPreset(
    s: Styleframe,
    config?: UtilitiesPresetConfig
): Record<string, UtilityCreator>

All configuration options from useUtilitiesPreset are supported. Custom names provided in config.names override the shorthand defaults.

Quick Start

styleframe.config.ts

import { styleframe } from 'styleframe';
import { useShorthandUtilitiesPreset } from '@styleframe/theme';

const s = styleframe();

// Register all utilities with Tailwind-style shorthand names
const utilities = useShorthandUtilitiesPreset(s);

export default s;

styleframe/index.css

/* Shorthand class names */
._m\:sm { margin: 0.5rem; }
._p\:md { padding: 1rem; }
._w\:full { width: 100%; }
._rounded\:lg { border-radius: 0.5rem; }
._bg\:primary { background-color: var(--color--primary); }

/* Instead of the default long-form names */
/* ._margin\:sm, ._padding\:md, ._width\:full, etc. */

Shorthand Name Mappings

The preset includes 80+ shorthand mappings across all utility categories. The full mapping is also exported as shorthandNames from @styleframe/theme for reference or extension.

Spacing

Default Name	Shorthand
`margin`	`m`
`margin-top`	`mt`
`margin-right`	`mr`
`margin-bottom`	`mb`
`margin-left`	`ml`
`margin-inline`	`mx`
`margin-block`	`my`
`margin-inline-start`	`ms`
`margin-inline-end`	`me`
`padding`	`p`
`padding-top`	`pt`
`padding-right`	`pr`
`padding-bottom`	`pb`
`padding-left`	`pl`
`padding-inline`	`px`
`padding-block`	`py`
`padding-inline-start`	`ps`
`padding-inline-end`	`pe`

Sizing

Default Name	Shorthand
`width`	`w`
`min-width`	`min-w`
`max-width`	`max-w`
`height`	`h`
`min-height`	`min-h`
`max-height`	`max-h`

Typography

Default Name	Shorthand
`font-size`	`text`
`font-weight`	`font`
`line-height`	`leading`
`letter-spacing`	`tracking`
`text-decoration-line`	`decoration`
`text-decoration-color`	`decoration-color`
`text-decoration-style`	`decoration-style`
`text-decoration-thickness`	`decoration-thickness`
`text-underline-offset`	`underline-offset`
`text-indent`	`indent`
`vertical-align`	`align`
`word-break`	`break`
`list-style-image`	`list-image`
`list-style-type`	`list`

Layout

Default Name	Shorthand
`z-index`	`z`
`inset-inline-start`	`start`
`inset-inline-end`	`end`
`aspect-ratio`	`aspect`
`isolation`	`isolate`
`box-sizing`	`box`
`box-decoration-break`	`box-decoration`

Flexbox & Grid

Default Name	Shorthand
`flex-grow`	`grow`
`flex-shrink`	`shrink`
`flex-basis`	`basis`
`justify-content`	`justify`
`align-items`	`items`
`align-self`	`self`
`grid-template-columns`	`grid-cols`
`grid-template-rows`	`grid-rows`
`grid-column`	`col`
`grid-column-start`	`col-start`
`grid-column-end`	`col-end`
`grid-row`	`row`
`grid-row-start`	`row-start`
`grid-row-end`	`row-end`
`grid-auto-flow`	`grid-flow`
`grid-auto-columns`	`auto-cols`
`grid-auto-rows`	`auto-rows`

Borders

Default Name	Shorthand
`border-width`	`border`
`border-x-width`	`border-x`
`border-y-width`	`border-y`
`border-top-width`	`border-t`
`border-right-width`	`border-r`
`border-bottom-width`	`border-b`
`border-left-width`	`border-l`
`border-inline-start-width`	`border-s`
`border-inline-end-width`	`border-e`
`border-top-color`	`border-t-color`
`border-right-color`	`border-r-color`
`border-bottom-color`	`border-b-color`
`border-left-color`	`border-l-color`
`border-inline-start-color`	`border-s-color`
`border-inline-end-color`	`border-e-color`
`border-radius`	`rounded`
`border-radius-top`	`rounded-t`
`border-radius-right`	`rounded-r`
`border-radius-bottom`	`rounded-b`
`border-radius-left`	`rounded-l`
`border-radius-start`	`rounded-s`
`border-radius-end`	`rounded-e`
`border-top-left-radius`	`rounded-tl`
`border-top-right-radius`	`rounded-tr`
`border-bottom-right-radius`	`rounded-br`
`border-bottom-left-radius`	`rounded-bl`
`border-start-start-radius`	`rounded-ss`
`border-start-end-radius`	`rounded-se`
`border-end-end-radius`	`rounded-ee`
`border-end-start-radius`	`rounded-es`
`outline-width`	`outline`

Effects

Default Name	Shorthand
`box-shadow`	`shadow`
`box-shadow-color`	`shadow-color`
`background-blend-mode`	`bg-blend`
`mix-blend-mode`	`mix-blend`

Backgrounds

Default Name	Shorthand
`background-color`	`bg`
`background-attachment`	`bg-attachment`
`background-clip`	`bg-clip`
`background-origin`	`bg-origin`
`background-position`	`bg-position`
`background-repeat`	`bg-repeat`
`background-size`	`bg-size`
`gradient-from`	`from`
`gradient-via`	`via`
`gradient-to`	`to`

Transforms

Default Name	Shorthand
`transform-origin`	`origin`
`backface-visibility`	`backface`

Transitions & Animation

Default Name	Shorthand
`transition-property`	`transition`
`transition-duration`	`duration`

Edit this pageorReport an issue

Overview

Explore Styleframe's utility composables for generating CSS utility classes. Create flexible, reusable styling primitives with full type safety.

Accessibility

Create accessibility utilities for screen reader visibility and forced color adjustments with full type safety.