u

package
v5.0.1 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Jul 28, 2026 License: MIT Imports: 3 Imported by: 0

Documentation

Overview

Package u is the Tailwind-shaped typed utility engine layered over the css Layer-1 foundation. Every utility is a typed Go symbol (no class-string parser), so the whole surface is autocompletable and compile-checked. Each utility resolves its argument against the active css.Theme and returns Layer-1 css.Rule(s); emission, dedup, and SSR reuse the Layer-1 registry/sink unchanged.

This is the curated core (spacing/color/type/flex/border/effects + the responsive/state variants). The design's full-parity surface is generated from a spec table over the theme; the core lands first and the long tail is incremental table entries.

Index

Constants

View Source 
const (
	ShadowNone = css.ShadowNone
	ShadowSm   = css.ShadowSm
	ShadowMd   = css.ShadowMd
	ShadowLg   = css.ShadowLg
	ShadowXl   = css.ShadowXl
	Shadow2xl  = css.Shadow2xl

	PropAll       = css.PropAll
	PropColors    = css.PropColors
	PropOpacity   = css.PropOpacity
	PropTransform = css.PropTransform
	PropShadow    = css.PropShadow

	Linear    = css.Linear
	Ease      = css.Ease
	EaseIn    = css.EaseIn
	EaseOut   = css.EaseOut
	EaseInOut = css.EaseInOut

	LineSolid  = css.LineSolid
	LineDashed = css.LineDashed
	LineDotted = css.LineDotted
	LineDouble = css.LineDouble
	LineNone   = css.LineNone
	LineHidden = css.LineHidden

	TrackAuto       = css.TrackAuto
	TrackMinContent = css.TrackMinContent
	TrackMaxContent = css.TrackMaxContent
	GridAuto        = css.GridAuto

	NoImage = css.NoImage
	// Circle / Ellipse: shadowed by the html/shorthand SVG elements — use css.Circle /
	// css.Ellipse. CircleAt / EllipseAt above are unambiguous and stay bare.
	ToTop         = css.ToTop
	ToBottom      = css.ToBottom
	ToLeft        = css.ToLeft
	ToRight       = css.ToRight
	ToTopLeft     = css.ToTopLeft
	ToTopRight    = css.ToTopRight
	ToBottomLeft  = css.ToBottomLeft
	ToBottomRight = css.ToBottomRight
	BgCover       = css.BgCover
	BgContain     = css.BgContain
	BgAuto        = css.BgAuto

	SansStack  = css.SansStack
	SerifStack = css.SerifStack
	MonoStack  = css.MonoStack
)
View Source 
const (
	White    = css.White
	Black    = css.Black
	Slate100 = css.Slate100
	Slate500 = css.Slate500
	Slate800 = css.Slate800
	Slate900 = css.Slate900
	Sky500   = css.Sky500
	Red500   = css.Red500
)

Color tokens re-exported for ergonomic u.Slate900 style call sites.

Variables

View Source 
var (
	Class         = css.Class
	New           = css.New
	Rules         = css.Rules
	DefineUtility = css.DefineUtility
	Utility       = css.Utility
	DefineVariant = css.DefineVariant
	UseTheme      = css.UseTheme
	DefaultTheme  = css.DefaultTheme
	Reset         = css.Reset
	Harvest       = css.Harvest // available on both build lanes
	Seed          = css.Seed
	SetSink       = css.SetSink
	MarkImportant = css.MarkImportant
)
View Source 
var (
	Px        = css.Px // length: Px(8) -> "8px"
	Rem       = css.Rem
	Ems       = css.Ems
	Percent   = css.Percent
	Vh        = css.Vh
	Vw        = css.Vw
	RawLength = css.RawLength
	Num       = css.Num
	Ms        = css.Ms
	S         = css.S
	Deg       = css.Deg
	Turn      = css.Turn
	Hex       = css.Hex
	RGB       = css.RGB
	RGBA      = css.RGBA
	CSSVar    = css.Var
	FontSize  = css.FontSize
	MinWidth  = css.MinWidth
	MaxWidth  = css.MaxWidth
	MinHeight = css.MinHeight
	MaxHeight = css.MaxHeight

	Ch       = css.Ch       // character-width length: Ch(68) -> "68ch"
	Clamp    = css.Clamp    // clamp(min, preferred, max)
	MinLen   = css.MinLen   // min(a, b, …)
	MaxLen   = css.MaxLen   // max(a, b, …)
	ColorMix = css.ColorMix // color-mix(in oklab, a pct%, b)
)
View Source 
var (
	Raw = css.Raw
	Sel = css.Sel
)

Raw and Sel are the documented escape hatches for the typed utility surface. The curated utilities cover the common surface, not every CSS property; when none fits, drop to a raw declaration rather than reaching outside the engine. Raw(property, value) emits one declaration and Sel(selector, rules...) emits an arbitrary selector — both fold, dedup, content-hash, and emit through the SAME Layer-1 registry/sink as every typed utility, so a raw style still gets a stable class name and SSR reuse (it is not an unmanaged inline style). Reach for these only for the long tail; prefer a typed utility whenever one exists so the style stays autocompletable and compile-checked. 

// no typed aspect-ratio utility → use the raw escape hatch, still registry-managed:
css.New(u.Pad(u.Spacing4), u.Raw("aspect-ratio", "16 / 9"))
View Source 
var (
	Media        = css.Media
	MinW         = css.MinW
	MaxW         = css.MaxW
	RawMedia     = css.RawMedia
	FocusVisible = css.FocusVisible
	Before       = css.Before
	After        = css.After
	Keyframes    = css.Keyframes
	At           = css.At
	Animation    = css.Animation

	Child      = css.Child
	Descendant = css.Descendant
	Adjacent   = css.Adjacent
	Sibling    = css.Sibling
	Not        = css.Not
	Has        = css.Has
	Is         = css.Is
	NthChild   = css.NthChild
	NthOfType  = css.NthOfType
	AnB        = css.AnB
	Nth        = css.Nth
)
View Source 
var (
	El       = css.El
	SheetRef = css.SheetRef
	ClassSel = css.ClassSel
	AttrSel  = css.AttrSel
	AttrEq   = css.AttrEq
)
View Source 
var (
	Cursor             = css.Cursor
	UserSelect         = css.UserSelect
	TextTransform      = css.TextTransform
	FontVariantNumeric = css.FontVariantNumeric

	// Box & scrolling.
	Overflow            = css.Overflow
	OverflowX           = css.OverflowX
	OverflowY           = css.OverflowY
	OverscrollBehavior  = css.OverscrollBehavior
	OverscrollBehaviorX = css.OverscrollBehaviorX
	OverscrollBehaviorY = css.OverscrollBehaviorY
	PointerEvents       = css.PointerEvents
	Appearance          = css.Appearance
	ColorScheme         = css.ColorScheme

	// Flex / grid item alignment.
	FlexWrap     = css.FlexWrap
	AlignSelf    = css.AlignSelf
	JustifySelf  = css.JustifySelf
	AlignContent = css.AlignContent
	JustifyItems = css.JustifyItems

	// Borders & tables.
	BorderStyle    = css.BorderStyle
	BorderCollapse = css.BorderCollapse
	TableLayout    = css.TableLayout

	// Typography.
	TextAlign            = css.TextAlign
	VerticalAlign        = css.VerticalAlign
	WhiteSpace           = css.WhiteSpace
	TextWrap             = css.TextWrap
	OverflowWrap         = css.OverflowWrap
	TextDecoration       = css.TextDecoration
	TextDecorationStyle  = css.TextDecorationStyle
	FontStyle            = css.FontStyle
	FontVariantLigatures = css.FontVariantLigatures

	// Backgrounds.
	BgRepeat   = css.BgRepeat
	BgClip     = css.BgClip
	BgOrigin   = css.BgOrigin
	MaskRepeat = css.MaskRepeat
)
View Source 
var (
	Shadow        = css.Shadow
	Transition    = css.Transition
	Prop          = css.Prop
	Transform     = css.Transform
	Scale         = css.Scale
	ScaleXY       = css.ScaleXY
	Rotate        = css.Rotate
	TranslateX    = css.TranslateX
	TranslateY    = css.TranslateY
	Outline       = css.Outline
	OutlineOffset = css.OutlineOffset
	Tracking      = css.Tracking
	LineHeight    = css.LineHeight
	LineHeightLen = css.LineHeightLen
	CubicBezier   = css.CubicBezier

	TransitionProps     = css.TransitionProps
	TransitionLonghands = css.TransitionLonghands
	TransitionDuration  = css.TransitionDuration
	RawShadow           = css.RawShadow
	Shadows             = css.Shadows
	ShadowOf            = css.ShadowOf
	ShadowInset         = css.ShadowInset
	OutlineStyle        = css.OutlineStyle

	// Side-specific borders and corner radii. (u.Border(c) stays the 1px-solid
	// scale-flavored form; these are the Layer-1 width+color constructors.)
	BorderTop     = css.BorderTop
	BorderRight   = css.BorderRight
	BorderBottom  = css.BorderBottom
	BorderLeft    = css.BorderLeft
	BorderX       = css.BorderX
	BorderY       = css.BorderY
	BorderColor   = css.BorderColor
	BorderWidth   = css.BorderWidth
	BorderSpacing = css.BorderSpacing
	// RoundedTopV/… carry the V suffix because u.Rounded already takes a theme
	// Radius token; these take a Layer-1 Length, matching the GapV convention.
	RoundedTopV    = css.RoundedTop
	RoundedBottomV = css.RoundedBottom
	RoundedLeftV   = css.RoundedLeft
	RoundedRightV  = css.RoundedRight

	// Inset offsets & stacking.
	Top              = css.Top
	Right            = css.Right
	Bottom           = css.Bottom
	Left             = css.Left
	Inset            = css.Inset
	InsetX           = css.InsetX
	InsetY           = css.InsetY
	ZIndex           = css.ZIndex
	ScrollPadding    = css.ScrollPadding
	ScrollPaddingTop = css.ScrollPaddingTop

	// Flex item longhands. (u.Flex is Display.Flex, so the css.Flex shorthand is
	// re-exported as FlexOf to keep both reachable.)
	FlexOf     = css.Flex
	FlexGrow   = css.FlexGrow
	FlexShrink = css.FlexShrink
	FlexBasis  = css.FlexBasis
	Order      = css.Order
	RowGap     = css.RowGap
	ColumnGap  = css.ColumnGap

	// Grid.
	GridCols        = css.GridCols
	GridRows        = css.GridRows
	GridAutoRows    = css.GridAutoRows
	GridAutoColumns = css.GridAutoColumns
	GridAreas       = css.GridAreas
	GridArea        = css.GridArea
	GridColumn      = css.GridColumn
	GridRow         = css.GridRow
	Fr              = css.Fr
	TrackLen        = css.TrackLen
	MinMax          = css.MinMax
	FitContent      = css.FitContent
	// Repeat: shadowed by html/shorthand.Repeat (node repetition) — use css.Repeat.
	RepeatFit    = css.RepeatFit
	RepeatFill   = css.RepeatFill
	GridLineAt   = css.GridLineAt
	GridSpan     = css.GridSpan
	GridLineName = css.GridLineName
	GridRange    = css.GridRange

	// Backgrounds & gradients.
	BgImage    = css.BgImage
	BgSize     = css.BgSize
	BgSizeXY   = css.BgSizeXY
	BgPosition = css.BgPosition
	// LinearGradient / RadialGradient: shadowed by the html/shorthand SVG elements of
	// the same name — use css.LinearGradient / css.RadialGradient. The *To and
	// Repeating* forms below carry no such clash and stay bare.
	LinearGradientTo        = css.LinearGradientTo
	RepeatingLinearGradient = css.RepeatingLinearGradient
	RepeatingRadialGradient = css.RepeatingRadialGradient
	ConicGradient           = css.ConicGradient
	CircleAt                = css.CircleAt
	EllipseAt               = css.EllipseAt
	CircleSizedAt           = css.CircleSizedAt
	URLImage                = css.URLImage
	RawImage                = css.RawImage
	// Stop: shadowed by html/shorthand.Stop (the SVG <stop>) — use css.Stop.
	StopAt    = css.StopAt
	StopSpan  = css.StopSpan
	ColorHint = css.ColorHint
	MaskImage = css.MaskImage
	MaskSize  = css.MaskSize

	// Typography constructors.
	Font                    = css.Font
	FontStackOf             = css.FontStackOf
	VarFontStack            = css.VarFontStack
	RawFontStack            = css.RawFontStack
	TextDecorationThickness = css.TextDecorationThickness
	TextUnderlineOffset     = css.TextUnderlineOffset
	TextDecorationColor     = css.TextDecorationColor
	TextOverflowEllipsis    = css.TextOverflowEllipsis
	TextIndent              = css.TextIndent
	WordSpacing             = css.WordSpacing

	// Custom-property declarations (the typed replacement for Raw("--x", …)).
	Custom          = css.Custom
	CustomColor     = css.CustomColor
	CustomLength    = css.CustomLength
	CustomNumber    = css.CustomNumber
	CustomDuration  = css.CustomDuration
	CustomAngle     = css.CustomAngle
	CustomFontStack = css.CustomFontStack
	CustomShadow    = css.CustomShadow
)
View Source 
var (
	Block       = css.Display.Block
	InlineBlock = css.Display.InlineBlock
	Inline      = css.Display.Inline
	Flex        = css.Display.Flex
	InlineFlex  = css.Display.InlineFlex
	Grid        = css.Display.Grid
	Hide        = css.Display.None

	FlexRow = css.FlexDir.Row
	FlexCol = css.FlexDir.Col

	ItemsStart   = css.Items.Start
	ItemsCenter  = css.Items.Center
	ItemsEnd     = css.Items.End
	ItemsStretch = css.Items.Stretch

	JustifyStart   = css.Justify.Start
	JustifyCenter  = css.Justify.Center
	JustifyEnd     = css.Justify.End
	JustifyBetween = css.Justify.Between
	JustifyAround  = css.Justify.Around

	Relative = css.Position.Relative
	Absolute = css.Position.Absolute
	Fixed    = css.Position.Fixed
	Sticky   = css.Position.Sticky

	FontNormal   = css.FontWeight.Normal
	FontMedium   = css.FontWeight.Medium
	FontSemibold = css.FontWeight.Semibold
	FontBold     = css.FontWeight.Bold
)
View Source 
var (
	WFull = css.W(css.Full)
	HFull = css.H(css.Full)
	WAuto = css.W(css.Auto)
)

Functions

func Active 

func Active(rules ...css.Rule) []css.Rule

func Bg 

func Bg(c css.Color) css.Rule

Bg / Text set background/text color from a Layer-1 color token.

func BgC 

func BgC(c ColorToken) css.Rule

BgC / TextC / BorderC set background / text / border color from a typed theme color token: u.BgC(u.ColorSlate900). A typo is a compile error (the constant does not exist) and the token set autocompletes — the canonical, type-safe path. For a custom theme, `gwc css gen` generates the matching u.ColorToken constants.

func BgToken deprecated 

func BgToken(name string) css.Rule

BgToken / TextToken resolve a theme color token name ("slate-900"); an unknown token resolves to transparent so a typo fails visibly rather than silently inheriting.

Deprecated: prefer the typed u.BgC(u.ColorSlate900) / u.TextC(...), where a typo is a compile error instead of a runtime transparent fallback. These string forms remain for arbitrary/runtime-computed token names.

func Border 

func Border(c css.Color) css.Rule

Border sets a 1px solid border in the given color.

func BorderC 

func BorderC(c ColorToken) css.Rule

func ContrastLess 

func ContrastLess(rules ...css.Rule) []css.Rule

func ContrastMore 

func ContrastMore(rules ...css.Rule) []css.Rule

ContrastMore / ContrastLess are the prefers-contrast variants.

func Dark 

func Dark(rules ...css.Rule) []css.Rule

Dark / Light are the prefers-color-scheme variants.

func Fg 

func Fg(c css.Color) css.Rule

func Focus 

func Focus(rules ...css.Rule) []css.Rule

func ForcedColors 

func ForcedColors(rules ...css.Rule) []css.Rule

ForcedColors is the Windows-High-Contrast / forced-colors variant. Inside it the UA owns the palette, so the useful work is restoring structure (borders on boxes that were distinguished only by background color).

func Gap 

func Gap(index Spacing) css.Rule

Gap takes a typed spacing-scale index; GapV takes an arbitrary Layer-1 length.

func GapV 

func GapV(v css.Length) css.Rule

func GroupHover 

func GroupHover(rules ...css.Rule) []css.Rule

Group/Peer variants via parent/sibling state selectors. Mark the parent with the "group"/"peer" class (plain html.Class("group")).

func H 

func H(index Spacing) css.Rule

func Hover 

func Hover(rules ...css.Rule) []css.Rule

State variants.

func Important 

func Important(rules ...css.Rule) []css.Rule

Important appends !important to every declaration in the given rules. Use sparingly — it is the typed analog of Tailwind's "!" modifier.

func Lg 

func Lg(rules ...css.Rule) []css.Rule

func Light 

func Light(rules ...css.Rule) []css.Rule

func M 

func M(index Spacing) css.Rule

func Md 

func Md(rules ...css.Rule) []css.Rule

func MotionOK 

func MotionOK(rules ...css.Rule) []css.Rule

MotionOK is the inverse of ReducedMotion — gate decorative motion ON with this rather than gating it off with ReducedMotion, so the no-preference default is calm.

func MtN 

func MtN(index Spacing) css.Rule

MtN is a negative top margin (-mt-n): MtN(u.Spacing4) -> margin-top: -1rem.

func Mx 

func Mx(index Spacing) css.Rule

func My 

func My(index Spacing) css.Rule

func Opacity 

func Opacity(pct int) css.Rule

Opacity sets opacity from a 0..100 percentage index (Tailwind's opacity-50).

func Pad 

func Pad(index Spacing) css.Rule

func PadX 

func PadX(index Spacing) css.Rule

func PadY 

func PadY(index Spacing) css.Rule

func PeerFocus 

func PeerFocus(rules ...css.Rule) []css.Rule

func Print 

func Print(rules ...css.Rule) []css.Rule

Print scopes rules to paged output.

func ReducedMotion 

func ReducedMotion(rules ...css.Rule) []css.Rule

The accessibility preference variants. They exist as named functions for the same reason the css.MediaQuery constants do: a misspelled RawMedia query compiles, emits, and never matches, so the accommodation silently does not exist. A misspelled function name does not compile. 

css.New(u.Transition(u.PropColors, u.Ms(120), u.Ease),
        u.ReducedMotion(u.TransitionDuration(u.Ms(0)))...)

func Rounded 

func Rounded(r Radius) css.Rule

Rounded resolves a typed radius key: u.Rounded(u.RadiusLg).

func Sm 

func Sm(rules ...css.Rule) []css.Rule

Responsive variants resolve their breakpoint min-width from the active theme.

func TextC 

func TextC(c ColorToken) css.Rule

func TextSize 

func TextSize(scale TextScale) css.Rule

TextSize resolves a typed type-scale key: u.TextSize(u.TextLg).

func TextToken deprecated 

func TextToken(name string) css.Rule

Deprecated: prefer the typed u.TextC(u.ColorSlate900). See BgToken.

func W 

func W(index Spacing) css.Rule

W/H take a typed spacing-scale index; WFull/HFull are 100%.

func WhenDisabled 

func WhenDisabled(rules ...css.Rule) []css.Rule

func Xl 

func Xl(rules ...css.Rule) []css.Rule

func Xl2 

func Xl2(rules ...css.Rule) []css.Rule

Types

type Angle 

type Angle = css.Angle

type BgSizeValue 

type BgSizeValue = css.BgSizeValue

type Color 

type Color = css.Color
const (
	Transparent  Color = css.Transparent
	CurrentColor Color = css.CurrentCo
	Slate50      Color = css.Slate50
	Slate200     Color = css.Slate200
	Slate300     Color = css.Slate300
	Slate400     Color = css.Slate400
	Slate600     Color = css.Slate600
	Slate700     Color = css.Slate700
	Sky400       Color = css.Sky400
	Sky600       Color = css.Sky600
	Red600       Color = css.Red600
	Green500     Color = css.Green500
	Amber500     Color = css.Amber500
)

type ColorStop 

type ColorStop = css.ColorStop

type ColorToken 

type ColorToken string

ColorToken is a typed theme color-token key, so a color reference autocompletes and a typo is a compile error instead of a silent transparent fallback. The constants below cover css.DefaultTheme; a custom theme's tokens are generated into the application package by `gwc css gen` (same shape, also u.ColorToken). 

const (
	ColorTransparent ColorToken = "transparent"
	ColorCurrent     ColorToken = "current"
	ColorWhite       ColorToken = "white"
	ColorBlack       ColorToken = "black"
	ColorSlate50     ColorToken = "slate-50"
	ColorSlate100    ColorToken = "slate-100"
	ColorSlate200    ColorToken = "slate-200"
	ColorSlate300    ColorToken = "slate-300"
	ColorSlate400    ColorToken = "slate-400"
	ColorSlate500    ColorToken = "slate-500"
	ColorSlate600    ColorToken = "slate-600"
	ColorSlate700    ColorToken = "slate-700"
	ColorSlate800    ColorToken = "slate-800"
	ColorSlate900    ColorToken = "slate-900"
	ColorSky400      ColorToken = "sky-400"
	ColorSky500      ColorToken = "sky-500"
	ColorSky600      ColorToken = "sky-600"
	ColorRed500      ColorToken = "red-500"
	ColorRed600      ColorToken = "red-600"
	ColorGreen500    ColorToken = "green-500"
	ColorAmber500    ColorToken = "amber-500"
)

type Direction 

type Direction = css.GradientDirection

type Duration 

type Duration = css.Duration

type Easing 

type Easing = css.Easing

type FontStack 

type FontStack = css.FontStack

type Frame 

type Frame = css.Frame

type Image 

type Image = css.Image

type Length 

type Length = css.Length
const (
	Auto Length = css.Auto
	Full Length = css.Full
	Zero Length = css.Zero
)

type LineStyle 

type LineStyle = css.LineStyle

type MediaQ 

type MediaQ = css.MediaQuery

type NthArg 

type NthArg = css.NthArg
const (
	Odd  NthArg = css.Odd
	Even NthArg = css.Even
)

type Number 

type Number = css.Number

type Placement 

type Placement = css.GridPlacement

Track is intentionally NOT re-exported: html/shorthand.Track is the <track> element, and this file's whole premise is that u dot-imports cleanly alongside shorthand. Use css.Track for the grid-track type.

type Radius 

type Radius string

Radius is a typed border-radius scale key. 

const (
	RadiusNone Radius = "none"
	RadiusSm   Radius = "sm"
	RadiusMd   Radius = "md"
	RadiusLg   Radius = "lg"
	RadiusXl   Radius = "xl"
	RadiusFull Radius = "full"
)

type Rule 

type Rule = css.Rule

type Selector 

type Selector = css.Selector

type ShadowToken 

type ShadowToken = css.ShadowToken

type Shape 

type Shape = css.GradientShape

type Sheet 

type Sheet = css.Sheet

type Sink 

type Sink = css.Sink

type Spacing 

type Spacing int

Spacing is a typed spacing-scale index. Built-in steps are provided as constants; any int is still valid (Tailwind's n*0.25rem formula), so arbitrary indices need no escape hatch. 

const (
	Spacing0  Spacing = 0
	Spacing1  Spacing = 1
	Spacing2  Spacing = 2
	Spacing3  Spacing = 3
	Spacing4  Spacing = 4
	Spacing5  Spacing = 5
	Spacing6  Spacing = 6
	Spacing8  Spacing = 8
	Spacing10 Spacing = 10
	Spacing12 Spacing = 12
	Spacing16 Spacing = 16
	Spacing20 Spacing = 20
	Spacing24 Spacing = 24
)

type TextScale 

type TextScale string

TextScale is a typed font-size scale key. 

const (
	TextXs   TextScale = "xs"
	TextSm   TextScale = "sm"
	TextBase TextScale = "base"
	TextLg   TextScale = "lg"
	TextXl   TextScale = "xl"
	Text2xl  TextScale = "2xl"
	Text3xl  TextScale = "3xl"
	Text4xl  TextScale = "4xl"
)

type Theme 

type Theme = css.Theme

type TransProp 

type TransProp = css.TransitionProperty

Source Files

View all Source files

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.