Styling System
Build fully-typed CSS from TypeScript using composable helper functions, the StyleBuilder chain, responsive breakpoints, and pseudo-class support.
Overview
Nuclo's styling system generates atomic CSS classes from TypeScript. Write styles as method chains, get a stable class name, and apply it like any other attribute.
createStyleQueries()
Creates a style factory bound to a set of named breakpoints. Returns a cn() function you call with one or more StyleBuilder expressions.
StyleBuilder
All style helpers return a StyleBuilder. Every method adds a CSS property and returns the same builder, so you can chain freely. Call cn() to get a stable class name.
Style Helpers
Over 80 helper functions covering every common CSS property. Each one returns a StyleBuilder, so you can start a chain from any helper.
Layout & Spacing
display · position · width · height · margin · padding · gap · zIndex · overflow · boxSizing
Typography
fontSize · fontWeight · fontFamily · lineHeight · letterSpacing · textAlign · textTransform · textDecoration
Visual
bg · color · border · borderRadius · boxShadow · opacity · outline · backgroundImage · gradient
Interaction
cursor · pointerEvents · userSelect · transition · transform · animation · willChange
Responsive
Pass a second argument object to cn() with breakpoint keys matching those you declared in createStyleQueries(). Styles merge at each breakpoint.
Pseudo-classes
Use the same breakpoint object to apply styles on hover, focus, active, and other pseudo-states. The keys can be any valid CSS pseudo-class or selector.