css

package
v4.0.0 Latest Latest
Warning

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

 Go to latest Published: Jun 29, 2026 License: MIT Imports: 9 Imported by: 0

Documentation

Overview

Package css is GoWebComponents' typed, type-safe CSS layer. The raw-CSS layer (Rule/value/prop/variant) is the foundation; the Tailwind-shaped utility engine (subpackage css/u) is a typed convenience built on top. Emission v1 is runtime <style> injection on wasm and an in-memory buffer (read back by SSR and tests) on native.

The two public entry points cross into the html package without any edits to it: New returns a Sheet (a fmt.Stringer that flows through html.ClassNames, ClassMap keys, SSR, and attribute strings) and Class returns an html.PropOption that delegates to the existing html.Class setter. 

// today
Div(html.Class("flex gap-2 hover:bg-slate-900"), …)
// typed, same shape
Div(css.Class(css.Display.Flex, css.Gap(css.Px(8)), css.Hover(css.Bg(css.Slate900))), …)

Package css authoring guide.

Layers

Layer 1 — typed raw CSS (the foundation). Typed properties and values fold into a hashed class: 

class := css.New(
    css.Display.Flex,
    css.Gap(css.Px(8)),
    css.Bg(css.Slate900),
    css.Hover(css.Bg(css.Slate800)),          // pseudo variant
    css.Media(css.MinW(768), css.FlexDir.Row), // at-rule variant
)
// class is "c-…"; the compiled CSS is emitted once through the active Sink.

Layer 2 — Tailwind-shaped utilities (subpackage css/u), built on Layer 1. Every utility resolves against the active css.Theme and returns Layer-1 rules: 

import "github.com/monstercameron/GoWebComponents/v4/css/u"
css.New(u.Flex, u.Gap(3), u.Bg(u.Slate900), u.Md(u.Hover(u.FlexRow)...)...)

Crossing into html

Two entry points cross into the html package with zero edits to it: 

// css.Class is an html.PropOption — drop it into any shorthand call site.
shorthand.Div(css.Class(css.Display.Flex, css.Gap(css.Px(8))), …)

// css.New returns a Sheet (fmt.Stringer) that flows through html.ClassNames,
// ClassMap keys, SSR, and attribute strings.
sheet := css.New(css.Display.Grid)

Dynamic values

Runtime values would mint a new class per distinct value. Use Dynamic to keep a stable class that references a custom property and set the live value inline: 

d := css.DynamicLength("--gap", "gap", state.Gap())
shorthand.Div(d.Class(), d.Style(), …)

SSR & hydration

On native (SSR) the buffer sink collects every emitted rule. Serialize it into the head with css.StyleBlock(), which renders <style data-gwc-css="…">. On wasm hydration, css.SeedFromDocument() pre-seeds the registry from that block so already-present rules are recognized as hits and not re-injected.

Extension points

  • css.DefineUtility(name, rules…) — named reusable bundles (the plugin path).
  • css.UseTheme(theme) — swap/extend the token scales the utility engine reads.
  • css.DefineVariant(selectorTemplate) — new variant selectors via an "&" template.
  • css.SetSink(sink) — custom emission targets without touching authoring.

Index

Constants

This section is empty.

Variables

View Source 
var Cursor = cursorProp{
	Auto:       decl("cursor", "auto"),
	Pointer:    decl("cursor", "pointer"),
	Default:    decl("cursor", "default"),
	Text:       decl("cursor", "text"),
	Move:       decl("cursor", "move"),
	NotAllowed: decl("cursor", "not-allowed"),
	Wait:       decl("cursor", "wait"),
	Grab:       decl("cursor", "grab"),
	Grabbing:   decl("cursor", "grabbing"),
}

Cursor is the typed namespace for the cursor property: css.Cursor.Pointer.

View Source 
var Display = displayProp{
	Block:       decl("display", "block"),
	InlineBlock: decl("display", "inline-block"),
	Inline:      decl("display", "inline"),
	Flex:        decl("display", "flex"),
	InlineFlex:  decl("display", "inline-flex"),
	Grid:        decl("display", "grid"),
	None:        decl("display", "none"),
}

Display is the typed namespace for the CSS display property: css.Display.Flex, css.Display.Grid, css.Display.None, …

View Source 
var FlexDir = flexDirProp{
	Row:    decl("flex-direction", "row"),
	RowRev: decl("flex-direction", "row-reverse"),
	Col:    decl("flex-direction", "column"),
	ColRev: decl("flex-direction", "column-reverse"),
}

FlexDir is the typed namespace for flex-direction.

View Source 
var FontVariantNumeric = fontVariantNumericProp{
	Normal:      decl("font-variant-numeric", "normal"),
	TabularNums: decl("font-variant-numeric", "tabular-nums"),
}
View Source 
var FontWeight = fontWeightProp{
	Normal:   decl("font-weight", "400"),
	Medium:   decl("font-weight", "500"),
	Semibold: decl("font-weight", "600"),
	Bold:     decl("font-weight", "700"),
}

FontWeight is the typed namespace for font-weight.

View Source 
var Items = alignProp{
	Start:   decl("align-items", "flex-start"),
	Center:  decl("align-items", "center"),
	End:     decl("align-items", "flex-end"),
	Stretch: decl("align-items", "stretch"),
}

Items is the typed namespace for align-items.

View Source 
var Justify = justifyProp{
	Start:   decl("justify-content", "flex-start"),
	Center:  decl("justify-content", "center"),
	End:     decl("justify-content", "flex-end"),
	Between: decl("justify-content", "space-between"),
	Around:  decl("justify-content", "space-around"),
}

Justify is the typed namespace for justify-content.

View Source 
var Position = positionProp{
	Static:   decl("position", "static"),
	Relative: decl("position", "relative"),
	Absolute: decl("position", "absolute"),
	Fixed:    decl("position", "fixed"),
	Sticky:   decl("position", "sticky"),
}

Position is the typed namespace for the CSS position property.

View Source 
var TextTransform = textTransformProp{
	None:       decl("text-transform", "none"),
	Uppercase:  decl("text-transform", "uppercase"),
	Lowercase:  decl("text-transform", "lowercase"),
	Capitalize: decl("text-transform", "capitalize"),
}

TextTransform is the typed namespace for text-transform.

View Source 
var UserSelect = selectProp{
	None: decl("user-select", "none"),
	Text: decl("user-select", "text"),
	All:  decl("user-select", "all"),
	Auto: decl("user-select", "auto"),
}

Select is the typed namespace for user-select: css.UserSelect.None.

Functions

func Class 

func Class(parts ...any) html.PropOption

Class is the unified PropOption entry point for Div(...)/shorthand argument lists — the typed analog of JSX's className/clsx. It accepts a mixed list of:

  • string — a literal class name (migration / third-party / utility strings)
  • Rule — a single typed rule
  • []Rule — the slice returned by variants (Hover, Media, Child, …)
  • Sheet — a pre-folded class from New
  • []Sheet — several pre-folded classes

Typed rules are folded together into one hashed class via New; strings and Sheets pass through as class names. Everything is joined into the class attribute. Mixing is the whole point: 

Div(Class("legacy-util", Display.Flex, Gap(Px(8)), Hover(Bg(Slate900)), someSheet))

Type-safety note: the compile-checked guarantees live in the rule builders (Display.Flex, Gap(Px(8)), …); the argument list is `...any` because the class attribute is an inherently stringy boundary (exactly like clsx). Unrecognized argument types are ignored.

func CriticalCSS 

func CriticalCSS() string

CriticalCSS returns the managed <style> element's text wrapped in a <style data-gwc-css> block on wasm, mirroring the native extraction name (CSS6). Returns "" when no DOM/style element exists.

func DeclareLayers 

func DeclareLayers(parseNames ...string)

DeclareLayers emits an `@layer a, b, c;` statement establishing layer order (earlier = lower precedence). Call it once at startup before other emissions so the order statement leads the stylesheet. Identical declarations dedupe. 

css.DeclareLayers("base", "components", "overrides")

func DefineVariant 

func DefineVariant(selectorTemplate string) func(...Rule) []Rule

DefineVariant returns a reusable variant function from a selector template containing a single "&" placeholder (e.g. ".group:hover &" for group-hover, or "&[data-open]" for a data-attribute state). It is the open extension point for new pseudo/combinator variants beyond the built-ins.

func EmitThemeTokens 

func EmitThemeTokens(parseTheme Theme)

EmitThemeTokens emits the theme's RootRules into :root in one call — the convenience form of css.Root(theme.RootRules()...).

func Global 

func Global(parseSelector string, parseRules ...Rule)

Global emits CSS rules under a literal, top-level selector — an element (`body`, `h3`), the universal selector (`*`), a `:root` token block, or a stable semantic class (`.nav-link`, `.bento`) that other markup or a runtime theme engine targets by name. Unlike New, the rules are NOT scoped under a generated hashed class: the selector you pass is emitted verbatim. 

css.Global("body", css.Margin(css.Px(0)), css.Font(css.SansStack))
css.Global(".nav-link", css.Display.Flex, css.Hover(css.Bg(css.Slate800)))

Variants compose against the selector exactly as they do against `&` in New: the `&` placeholder is replaced by the literal selector, so css.Hover(...) under Global(".btn", ...) emits `.btn:hover { … }` and css.Descendant(h3, ...) emits `.btn h3 { … }`.

Emission is deduped process-wide on the (selector + rules) content, flows through the same Sink as New (so SSR StyleBlock/Harvest include it and the wasm DOM sink injects it), and is hardened against <style> breakout. Calling Global repeatedly with the same selector and rules is cheap and emits once.

func Harvest 

func Harvest() string

Harvest returns the full text content of the managed <style> element so wasm callers and tests can read back what has been injected. Returns "" when no DOM or no style element exists.

func Inject 

func Inject(parseID string, parseCSS string)

Inject installs an arbitrary CSS string as a managed <style> element, keyed by id and idempotent (the first call for an id wins; later calls for the same id are no-ops). It is the runtime counterpart to Global for CSS that must be a raw string rather than typed rules — `@font-face` blocks for user-uploaded fonts, a third-party widget's stylesheet, etc. 

css.Inject("app-fonts", `@font-face{font-family:"My Font";src:url(...)}`)

On wasm it creates (once) a <style id="..."> in <head>; on native it records the CSS into the buffer sink so SSR/tests can read it back. The CSS is hardened against <style> breakout. To replace injected CSS, use a new id.

func LayerGlobal 

func LayerGlobal(parseName string, parseSelector string, parseRules ...Rule)

LayerGlobal emits global rules (element/:root/semantic-class selectors) inside a named cascade layer — the typed home for a light-theme override layer that must beat base rules by layer order rather than specificity hacks (CSS4). 

css.LayerGlobal("overrides", `[data-theme="light"] .card`, css.Bg(css.White))

func Preflight 

func Preflight()

Preflight emits a small, modern CSS reset (a Tailwind-preflight-equivalent) as global rules (CSS5). It is opt-in — call it once at startup if you want the base layer managed by the framework instead of hand-maintained inline. Rules are deduped, hardened, and flow through the same sink as the rest of css, so they appear in SSR output and inject on wasm. 

func main() { css.Preflight(); /* … */ }

To place the reset in a cascade layer (so app styles reliably win), see PreflightInLayer.

func PreflightInLayer 

func PreflightInLayer(parseLayer string)

PreflightInLayer emits the reset inside a named cascade layer (e.g. "base"), so it sits below component/override layers regardless of source order (CSS4+CSS5). 

css.DeclareLayers("base", "components", "overrides")
css.PreflightInLayer("base")

func Reset 

func Reset()

Reset clears the registry and resets the active sink to the build default. For tests — it gives each test a clean process-wide registry.

func Root 

func Root(parseRules ...Rule)

Root emits a `:root { … }` block — the canonical home for a custom-property (design-token) palette authored in typed Go: 

css.Root(css.Raw("--accent", "#4f46e5"), css.Raw("--radius", "12px"))

It is shorthand for Global(":root", rules...). Author custom properties with the existing css.Raw(property, value) escape hatch. A runtime theme engine can then override individual tokens with element.style.setProperty without regenerating any classes.

func Seed 

func Seed(parseClasses ...string)

Seed marks a class as already-present without emitting it. Client hydration uses it to pre-seed the registry from server-rendered class names so existing rules are recognized as hits and not re-injected.

func SeedFromDocument 

func SeedFromDocument()

SeedFromDocument pre-seeds the registry from a server-rendered <style data-gwc-css="..."> block's class list so already-present rules are recognized as hits and not re-injected during hydration. Safe to call when no such block exists.

func UseTheme 

func UseTheme(parseTheme Theme)

UseTheme swaps the active theme that the utility engine resolves against.

Types

type Angle 

type Angle string

Angle is a CSS angle value. Build with Deg or Turn.

func Deg 

func Deg(n float64) Angle

Deg is a degree angle: Deg(45) -> "45deg".

func Turn 

func Turn(n float64) Angle

Turn is a turn angle: Turn(0.5) -> "0.5turn".

func VarAngle 

func VarAngle(parseName string) Angle

func (Angle) String 

func (a Angle) String() string

type Color 

type Color string

Color is a CSS color value. Use the curated token constants, Hex, or RGB/RGBA. 

const (
	Transparent Color = "transparent"
	CurrentCo   Color = "currentColor"
	White       Color = "#ffffff"
	Black       Color = "#000000"

	Slate50  Color = "#f8fafc"
	Slate100 Color = "#f1f5f9"
	Slate200 Color = "#e2e8f0"
	Slate300 Color = "#cbd5e1"
	Slate400 Color = "#94a3b8"
	Slate500 Color = "#64748b"
	Slate600 Color = "#475569"
	Slate700 Color = "#334155"
	Slate800 Color = "#1e293b"
	Slate900 Color = "#0f172a"

	Sky400 Color = "#38bdf8"
	Sky500 Color = "#0ea5e9"
	Sky600 Color = "#0284c7"

	Red500   Color = "#ef4444"
	Red600   Color = "#dc2626"
	Green500 Color = "#22c55e"
	Amber500 Color = "#f59e0b"
)

Curated v1 color tokens (a Tailwind-shaped slice of the default palette).

func ColorValue 

func ColorValue(parseName string) (Color, bool)

ColorValue resolves a color token name against the active theme; ok reports whether the token exists.

func Hex 

func Hex(parseValue string) Color

Hex builds a color from a hex string, tolerating a missing leading '#': Hex("0af") and Hex("#0af") both -> "#0af". As a typed constructor it is safe-by-construction: any non-hex characters are dropped, so an untrusted string can never inject CSS or break out (e.g. Hex("</style>") -> "#e"). An empty/all- invalid input falls back to "#000000".

func RGB 

func RGB(r, g, b int) Color

RGB builds an rgb() color.

func RGBA 

func RGBA(r, g, b int, a float64) Color

RGBA builds an rgba() color; alpha is clamped to [0,1].

func Var 

func Var(parseName string) Color

Var references a CSS custom property, the bridge for runtime/dynamic values: Var("--accent") -> "var(--accent)". As a typed constructor it sanitizes the name to CSS identifier characters (letters, digits, '-', '_'), so an untrusted name can never close the var() call or inject CSS.

func (Color) String 

func (c Color) String() string

type Duration 

type Duration string

Duration is a CSS time value (transition/animation timing). Build with Ms or S.

func Ms 

func Ms(n int) Duration

Ms is a millisecond duration: Ms(120) -> "120ms".

func S 

func S(n float64) Duration

S is a second duration: S(0.2) -> "0.2s".

func VarDuration 

func VarDuration(parseName string) Duration

func (Duration) String 

func (d Duration) String() string

type Dynamic 

type Dynamic struct {
	// contains filtered or unexported fields
}

Dynamic pairs a static, hashed class that references a CSS custom property with the inline StyleVar PropOption that carries the live value. This is the static/runtime boundary: a rule built from a runtime value would mint a new class per distinct value and grow the registry unboundedly, so instead the class references var(--name) (one stable hashed class) and the per-element value is set inline. 

d := css.Dynamic("--gap", "gap", state.Gap())   // state.Gap() is a css.Length
Div(d.Class(), d.Style(), …)                     // class is stable; value is live

Construct one with DynamicLength (typed Length value) or DynamicVar (any string value); there is no NewDynamic — the type-specific factories are the intended constructors.

func DynamicLength 

func DynamicLength(parseName, parseProperty string, parseValue Length) Dynamic

DynamicLength declares a class that sets parseProperty to var(--parseName), plus the live Length value to bind inline. parseName is normalized to a "--" custom property.

func DynamicVar 

func DynamicVar(parseName, parseProperty, parseValue string) Dynamic

DynamicVar builds a Dynamic for any property/value pair.

func (Dynamic) Class 

func (d Dynamic) Class() html.PropOption

Class returns the PropOption that applies the var-referencing class.

func (Dynamic) Rule 

func (d Dynamic) Rule() Rule

Rule returns the static Layer-1 rule that references the custom property. Fold it into New alongside other rules, or use Class for a one-shot PropOption.

func (Dynamic) Style 

func (d Dynamic) Style() html.PropOption

Style returns the PropOption that sets the live custom-property value inline, keeping the class and value in sync per element.

type Easing 

type Easing string

Easing is a typed timing-function. Use the presets or CubicBezier. 

const (
	Linear    Easing = "linear"
	Ease      Easing = "ease"
	EaseIn    Easing = "ease-in"
	EaseOut   Easing = "ease-out"
	EaseInOut Easing = "ease-in-out"
)

func CubicBezier 

func CubicBezier(p1, p2, p3, p4 float64) Easing

CubicBezier builds a typed cubic-bezier easing.

type Frame 

type Frame struct {
	Offset string
	Rules  []Rule
}

Frame is a single keyframe step: an offset (e.g. "0%", "from", "100%") and the rules applied at that offset.

func At 

func At(offset string, rules ...Rule) Frame

At builds a keyframe Frame at the given offset.

type Length 

type Length string

Length is a CSS length/size value that carries its unit in the value text, not the type. Build one with Px, Rem, Em, Percent, or the Raw escape hatch. 

const Auto Length = "auto"

Auto is the keyword length "auto". 

const Full Length = "100%"

Full is "100%". 

const Zero Length = "0"

Zero is "0".

func BreakpointValue 

func BreakpointValue(parseName string) (Length, bool)

BreakpointValue resolves a responsive breakpoint name to its min-width.

func Ems 

func Ems(n float64) Length

Ems is an em length: Ems(1.5) -> "1.5em".

func FontSizeValue 

func FontSizeValue(parseName string) (Length, bool)

FontSizeValue resolves a type-scale name against the active theme.

func Percent 

func Percent(n float64) Length

Percent is a percentage length: Percent(50) -> "50%".

func Px 

func Px(n int) Length

Px is an integer pixel length: Px(8) -> "8px".

func RadiusValue 

func RadiusValue(parseName string) (Length, bool)

RadiusValue resolves a rounding name against the active theme.

func RawLength 

func RawLength(parseValue string) Length

RawLength is the escape hatch for any length string not covered by a unit constructor (e.g. "calc(100% - 8px)", "min(10px, 1rem)").

func Rem 

func Rem(n float64) Length

Rem is a rem length: Rem(0.5) -> "0.5rem".

func SpacingValue 

func SpacingValue(parseIndex int) Length

SpacingValue resolves a spacing-scale index against the active theme, falling back to Tailwind's n*0.25rem formula for indices outside the curated map.

func VarLength 

func VarLength(parseName string) Length

VarLength / VarDuration / VarAngle / VarNumber are the typed siblings of Var for custom properties used in non-color positions, so a CSS variable flows into W/FontSize/Gap (Length), Transition/Animation (Duration), Rotate (Angle), or LineHeight/Opacity (Number) with full type safety instead of falling through to Raw(...). Same sanitizing as Var.

func Vh 

func Vh(n float64) Length

Vh / Vw are viewport-relative lengths.

func Vw 

func Vw(n float64) Length

func (Length) String 

func (l Length) String() string

type MediaQuery 

type MediaQuery string

Media is a media-query at-rule wrapper. Build the query with MinW/MaxW or pass a raw query string via RawMedia. 

const Dark MediaQuery = "(prefers-color-scheme:dark)"

Dark is the prefers-color-scheme:dark media query.

func MaxW 

func MaxW(px int) MediaQuery

MaxW is a max-width media query.

func MinW 

func MinW(px int) MediaQuery

MinW is a min-width media query.

func RawMedia 

func RawMedia(parseQuery string) MediaQuery

RawMedia is the escape hatch for an arbitrary media feature query.

type NthArg 

type NthArg string

NthArg is a typed argument to NthChild/NthOfType: Odd, Even, or AnB(a,b). 

const (
	Odd  NthArg = "odd"
	Even NthArg = "even"
)

func AnB 

func AnB(a, b int) NthArg

AnB builds an An+B nth-child argument: AnB(3,1) -> "3n+1".

func Nth 

func Nth(n int) NthArg

Nth builds a literal nth argument from an index: Nth(2) -> "2".

type Number 

type Number string

Number is a unitless CSS number (line-height, flex-grow, opacity factors, scale factors). Build with Num.

func Num 

func Num(n float64) Number

Num is a unitless number: Num(1.5) -> "1.5".

func VarNumber 

func VarNumber(parseName string) Number

func (Number) String 

func (n Number) String() string

type Rule 

type Rule struct {
	// contains filtered or unexported fields
}

Rule is one typed CSS declaration (or a small group of declarations) optionally wrapped in a variant scope (a pseudo-selector and/or one or more at-rules).

Rules are opaque values: build them with the typed property constructors (css.Gap, css.Bg, the css.Display namespace, …), wrap them with variants (css.Hover, css.Media, …), and fold a set of them into a single hashed class with css.New. A Rule carries no class identity of its own — identity is minted at New time from the canonical serialization of the folded rule-set.

func Active 

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

Active scopes rules to :active.

func Adjacent 

func Adjacent(target Selector, rules ...Rule) []Rule

Adjacent scopes rules to the next sibling: & + target.

func After 

func After(rules ...Rule) []Rule

func Animation 

func Animation(duration Duration, timing Easing) Rule

Animation sets the animation shorthand timing for a Keyframes rule. Compose it alongside the Keyframes rule in the same New(...) call. It takes a typed Duration and Easing (matching Transition), so a unit-less or mistyped value is a compile error: Animation(Ms(200), Linear).

func Before 

func Before(rules ...Rule) []Rule

Before / After scope to the ::before / ::after pseudo-elements. A content declaration defaults to "" when absent so the pseudo-element renders.

func Bg 

func Bg(c Color) Rule

Bg sets background-color.

func Border 

func Border(width Length, c Color) Rule

Border sets a solid border of the given width and color.

func Child 

func Child(target Selector, rules ...Rule) []Rule

Child scopes rules to a direct child: & > target.

func DataTheme 

func DataTheme(parseName string, parseRules ...Rule) []Rule

DataTheme is a convenience for Within(`[data-theme="<name>"]`, rules...) — the common ancestor-attribute theming case. (Named DataTheme to avoid colliding with the Theme token-config type.) 

css.New(css.Bg(css.Slate900), css.DataTheme("light", css.Bg(css.White)))

func DefineUtility 

func DefineUtility(parseName string, rules ...Rule) []Rule

DefineUtility registers a named, reusable bundle of rules — the plugin path for user-defined utilities that compose with the built-ins. It returns the bundle so it can be used inline immediately, and stores it under name for later lookup via Utility. 

card := css.DefineUtility("card",
    css.Padding(css.Px(16)), css.Rounded(css.Px(8)), css.Bg(css.White))
Div(css.Class(card...), …)

func Descendant 

func Descendant(target Selector, rules ...Rule) []Rule

Descendant scopes rules to any descendant: & target.

func Disabled 

func Disabled(rules ...Rule) []Rule

Disabled scopes rules to the :disabled pseudo-class. It uses the bare pseudo-class name like the other variants (Hover, Focus, Active, …).

func FirstChild 

func FirstChild(rules ...Rule) []Rule

FirstChild scopes rules to the :first-child structural pseudo-class.

func Focus 

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

Focus scopes rules to the :focus state.

func FocusVisible 

func FocusVisible(rules ...Rule) []Rule

FocusVisible scopes rules to :focus-visible.

func FontSize 

func FontSize(v Length) Rule

FontSize sets font-size.

func Gap 

func Gap(v Length) Rule

Gap sets the flex/grid gap.

func H 

func H(v Length) Rule

func Has 

func Has(target Selector, rules ...Rule) []Rule

Has scopes rules to :has(selector).

func Hover 

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

Hover scopes rules to the :hover state.

func Is 

func Is(targets []Selector, rules ...Rule) []Rule

Is scopes rules to :is(a, b, …).

func Keyframes 

func Keyframes(parseName string, frames ...Frame) Rule

Keyframes registers an @keyframes animation built from frames and returns a Rule that both carries the (deduped, content-named) @keyframes block and sets animation-name to it, so applying the rule animates the element. duration and timing are applied via the returned rule's shorthand.

func LastChild 

func LastChild(rules ...Rule) []Rule

LastChild scopes rules to the :last-child structural pseudo-class.

func LineHeight 

func LineHeight(n Number) Rule

LineHeight sets line-height from a typed Number (unitless) or Length.

func LineHeightLen 

func LineHeightLen(v Length) Rule

LineHeightLen sets line-height from a typed Length.

func Margin 

func Margin(v Length) Rule

Margin sets uniform margin; MarginX/Y set the axis pairs.

func MarginX 

func MarginX(v Length) Rule

func MarginY 

func MarginY(v Length) Rule

func MarkImportant 

func MarkImportant(parseRule Rule) Rule

MarkImportant returns a copy of the rule with "!important" appended to every declaration value (idempotent). It is the typed analog of Tailwind's "!" modifier.

func MaxHeight 

func MaxHeight(v Length) Rule

func MaxWidth 

func MaxWidth(v Length) Rule

func Media 

func Media(query MediaQuery, rules ...Rule) []Rule

Media scopes rules inside an @media at-rule.

func MinHeight 

func MinHeight(v Length) Rule

func MinWidth 

func MinWidth(v Length) Rule

func Not 

func Not(target Selector, rules ...Rule) []Rule

Not scopes rules to :not(selector).

func NthChild 

func NthChild(arg NthArg, rules ...Rule) []Rule

NthChild scopes rules to :nth-child(arg).

func NthOfType 

func NthOfType(arg NthArg, rules ...Rule) []Rule

NthOfType scopes rules to :nth-of-type(arg).

func Opacity deprecated 

func Opacity(n float64) Rule

Opacity sets the opacity (0..1).

Deprecated: prefer the typed OpacityNum(Num(n)) — it matches the typed-value convention used by the rest of the prop constructors. Opacity(float64) remains for convenience.

func OpacityNum 

func OpacityNum(n Number) Rule

OpacityNum sets opacity from a typed Number.

func Outline 

func Outline(width Length, c Color) Rule

Outline builds a solid outline of the given width and color.

func OutlineOffset 

func OutlineOffset(v Length) Rule

OutlineOffset sets outline-offset from a typed Length.

func Padding 

func Padding(v Length) Rule

Padding sets uniform padding; PaddingX/Y set the axis pairs.

func PaddingX 

func PaddingX(v Length) Rule

func PaddingY 

func PaddingY(v Length) Rule

func Property deprecated 

func Property(parseName, parseValue string) Rule

Property is the legacy string escape hatch.

Deprecated: use Raw instead — it is the single, intentionally-named declaration escape hatch so raw usage stays greppable / lint-gateable.

func Raw 

func Raw(parseProperty, parseValue string) Rule

Raw is the explicit declaration escape hatch for any property/value not covered by a typed constructor: css.Raw("backdrop-filter", "blur(4px)"). Intentionally named so it is greppable / lint-gateable; prefer a typed constructor.

func Rounded 

func Rounded(v Length) Rule

Rounded sets border-radius.

func Rules 

func Rules(parts ...any) []Rule

Rules flattens a mix of single Rules and rule slices (the []Rule returned by variant helpers) into a flat []Rule, so authoring can freely intermix them: 

css.New(css.Rules(
    css.Display.Flex,
    css.Hover(css.Bg(css.Slate800)),   // []Rule
    css.Gap(css.Px(8)),
)...)

func Shadow 

func Shadow(token ShadowToken) Rule

Shadow sets box-shadow from a typed token.

func Sibling 

func Sibling(target Selector, rules ...Rule) []Rule

Sibling scopes rules to any following sibling: & ~ target.

func TextColor 

func TextColor(c Color) Rule

TextColor sets the text color.

func Tracking 

func Tracking(v Length) Rule

Tracking sets letter-spacing from a typed Length: css.Tracking(css.Ems(0.18)).

func Transform 

func Transform(fns ...TransformFn) Rule

Transform builds the transform property from one or more typed transform fns.

func Transition 

func Transition(property TransitionProperty, duration Duration, easing Easing) Rule

Transition builds a typed transition shorthand: property, duration, easing.

func Utility 

func Utility(parseName string) (rules []Rule, ok bool)

Utility looks up a previously defined utility bundle; ok reports existence.

func W 

func W(v Length) Rule

W / H / MinWidth / MaxWidth size a box (W=width, H=height).

func WhenDisabled deprecated 

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

WhenDisabled scopes rules to :disabled.

Deprecated: use Disabled, which matches the bare pseudo-class naming of the other variants.

func Within 

func Within(parseAncestor string, parseRules ...Rule) []Rule

Within scopes rules to apply only when an ancestor matches selector — the `<ancestor> &` form that powers attribute-state theming (`[data-theme="light"] &`, `html[data-density="compact"] &`). It is the ancestor-state counterpart to the self-state variants (Hover/Focus/…): 

css.New(css.Within(`[data-theme="light"]`, css.Bg(css.White), css.Color(css.Slate900)))

emits `[data-theme="light"] .c-xxx { … }`.

type Selector 

type Selector string

Selector is a typed CSS selector fragment used as the target of a combinator (Child/Descendant/…) or a functional pseudo-class (Not/Has/Is). Build one with the typed constructors — never a free string — so composition stays checkable.

func AttrEq 

func AttrEq(parseName, parseValue string) Selector

AttrEq targets an attribute-equals selector: css.AttrEq("type","submit") -> `[type="submit"]`.

func AttrSel 

func AttrSel(parseName string) Selector

AttrSel targets an attribute-presence selector: css.AttrSel("data-open") -> "[data-open]".

func ClassSel 

func ClassSel(parseName string) Selector

ClassSel targets a literal class name (interop with existing string classes): css.ClassSel("title") -> ".title".

func El 

func El(parseTag string) Selector

El targets an HTML element by tag name: css.El("h3") -> "h3".

func Sel 

func Sel(parseFragment string) Selector

Sel is the explicit selector-template escape hatch for a fragment the typed builders don't cover. The fragment is appended after the class anchor; use "&" only via DefineVariant for parent-context selectors. Greppable on purpose.

func SheetRef 

func SheetRef(parseSheet Sheet) Selector

SheetRef targets another generated class, composing one Sheet against another with full type-safety: css.SheetRef(titleSheet) -> ".c-abc".

func (Selector) String 

func (s Selector) String() string

type ShadowToken 

type ShadowToken string

ShadowToken is a typed box-shadow value. Use the preset tokens or RawShadow. 

const (
	ShadowNone ShadowToken = "none"
	ShadowSm   ShadowToken = "0 1px 2px 0 rgba(0,0,0,0.05)"
	ShadowMd   ShadowToken = "0 4px 6px -1px rgba(0,0,0,0.1)"
	ShadowLg   ShadowToken = "0 10px 15px -3px rgba(0,0,0,0.1)"
	ShadowXl   ShadowToken = "0 20px 25px -5px rgba(0,0,0,0.1)"
	Shadow2xl  ShadowToken = "0 25px 50px -12px rgba(0,0,0,0.25)"
)

func (ShadowToken) String 

func (parseToken ShadowToken) String() string

String returns the box-shadow value, matching the other typed CSS value types.

type Sheet 

type Sheet string

Sheet is a generated class name (or space-separated names). It satisfies fmt.Stringer, so it already flows through html.ClassNames(...), appendClassFragments, ClassMap keys, SSR, and attribute strings.

func Layer 

func Layer(parseName string, parseRules ...Rule) Sheet

Layer folds rules into a hashed class emitted inside the named cascade layer (`@layer <name> { .c-xxx { … } }`), giving declared override precedence instead of registration-order accident (CSS4). Declare the layer order once with DeclareLayers so later layers reliably win. 

css.DeclareLayers("base", "components", "overrides")
btn := css.Layer("components", css.Display.Flex, css.Padding(css.Px(8)))

func New 

func New(rules ...Rule) Sheet

New folds a rule-set into a single content-hashed class, registers it (deduped process-wide), and emits its compiled CSS through the active Sink exactly once. It is safe and cheap to call inside render loops: N identical New(...) calls produce one registry entry and one injected rule.

Variant helpers (css.Hover, css.Media, …) return []Rule; spread them into New with the ... operator, or pass them through the rules... variadic directly — New accepts both single Rules and rule slices via the Rules helper.

func (Sheet) String 

func (s Sheet) String() string

String implements fmt.Stringer.

type Sink 

type Sink interface {
	Emit(parseClass string, parseCSS string)
}

Sink is the documented emission seam. New(...) calls Emit exactly once per newly-registered class (the dedup happens before the sink is touched), so a Sink never sees the same class twice within one process. The runtime wasm sink appends to a managed <style> element; the native sink buffers for SSR/tests; a build-time extraction pass would be a third implementation.

func SetSink 

func SetSink(parseSink Sink) Sink

SetSink swaps the active emission sink and returns the previous one. Mainly for tests and for wiring a custom emission target. Passing nil restores the build's default sink.

type Theme 

type Theme struct {
	// Spacing maps a scale index (Tailwind's 0,1,2,3,…) to a Length. The default
	// follows Tailwind: index n -> n*0.25rem.
	Spacing map[int]Length
	// Colors maps a token name ("slate-900") to a Color.
	Colors map[string]Color
	// FontSizes maps a type-scale name ("sm","base","lg") to a Length.
	FontSizes map[string]Length
	// Breakpoints maps a responsive name ("sm","md","lg","xl","2xl") to its
	// min-width Length and drives the responsive variants.
	Breakpoints map[string]Length
	// Radii maps a rounding name ("sm","md","lg","full") to a Length.
	Radii map[string]Length
}

Theme is the typed analog of tailwind.config.js: the named scales the Layer-2 utility engine resolves against. Swap or extend it with UseTheme; utilities and responsive variants read the active theme.

func ActiveTheme 

func ActiveTheme() Theme

ActiveTheme returns a snapshot reference to the active theme.

func DefaultTheme 

func DefaultTheme() Theme

DefaultTheme returns Tailwind's default scales (the curated v1 subset).

func (Theme) RootRules 

func (parseTheme Theme) RootRules() []Rule

RootRules returns the theme's scales as typed custom-property declarations (CSS2): --color-<name>, --space-<index>, --text-<name>, --radius-<name>. It is the bridge between the typed Theme (which the utility engine resolves at class-generation time) and a live CSS-variable palette: emit these into :root and reference them with Var, then a runtime element.style.setProperty reskins every reference without regenerating classes. 

css.Root(css.DefaultTheme().RootRules()...)               // :root palette
css.New(css.DataTheme("light", lightTheme.RootRules()...)) // a scoped theme

Breakpoints are intentionally omitted — they drive @media queries, where var() is not reliably supported.

type TransformFn 

type TransformFn string

TransformFn is a single typed transform function (Scale, Rotate, …). Compose several in one Transform call.

func Rotate 

func Rotate(a Angle) TransformFn

Rotate builds rotate() from a typed Angle.

func Scale 

func Scale(n float64) TransformFn

Scale builds a uniform scale(): css.Scale(0.94).

func ScaleXY 

func ScaleXY(x, y float64) TransformFn

ScaleXY builds scale(x, y).

func TranslateX 

func TranslateX(v Length) TransformFn

TranslateX / TranslateY build translate functions from typed Lengths.

func TranslateY 

func TranslateY(v Length) TransformFn

type TransitionProperty 

type TransitionProperty string

TransitionProperty names a property for Transition. The All/Colors/Transform/ Opacity presets cover the common cases; Prop wraps an arbitrary property name. 

const (
	PropAll       TransitionProperty = "all"
	PropColors    TransitionProperty = "color, background-color, border-color, fill, stroke"
	PropOpacity   TransitionProperty = "opacity"
	PropTransform TransitionProperty = "transform"
	PropShadow    TransitionProperty = "box-shadow"
)

func Prop 

func Prop(parseName string) TransitionProperty

Prop names an arbitrary transition property (typed wrapper, not a free arg).

Source Files

View all Source files

Directories

Path Synopsis
u
Package u is the Tailwind-shaped typed utility engine layered over the css Layer-1 foundation.
 Package u is the Tailwind-shaped typed utility engine layered over the css Layer-1 foundation.

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.