Css (tw.tw.css.Css)

Core Concepts

Core CSS system setup and construction tools for building stylesheets.

CSS Selectors

Structured representation of CSS selectors for targeting HTML elements.

See https://www.w3.org/TR/selectors-4/ CSS Selectors Level 4.

module Selector : sig ... end

CSS selectors: core types and helpers.

CSS Rules and Stylesheets

Core building blocks for CSS rules and stylesheet construction.

See https://www.w3.org/TR/css-syntax-3/ CSS Syntax Module Level 3.

type declaration

Abstract type for CSS declarations (property-value pairs).

type statement

The type for CSS statements.

val rule : 
  selector:Selector.t ->
  ?nested:statement list ->
  declaration list ->
  statement

rule ~selector declarations creates a CSS rule statement with the given selector and declarations.

val statement_selector : statement -> Selector.t option

statement_selector stmt returns Some selector if the statement is a rule, None otherwise.

val statement_declarations : statement -> declaration list option

statement_declarations stmt returns Some declarations if the statement is a rule, None otherwise.

val as_rule : 
  statement ->
  (Selector.t * declaration list * statement list) option

as_rule stmt returns Some (selector, declarations, nested) if the statement is a rule, None otherwise.

val as_layer : statement -> (string option * statement list) option

as_layer stmt returns Some (name, statements) if the statement is a layer, None otherwise.

val as_media : statement -> (Media.t * statement list) option

as_media stmt returns Some (condition, statements) if the statement is a media query, None otherwise.

val as_container : 
  statement ->
  (string option * Container.t * statement list) option

as_container stmt returns Some (name, condition, statements) if the statement is a container query, None otherwise.

val as_supports : statement -> (Supports.t * statement list) option

as_supports stmt returns Some (condition, statements) if the statement is a supports query, None otherwise.

val is_nested_media : statement -> bool

is_nested_media stmt returns true if the statement is a media query containing bare declarations (CSS nesting style), false otherwise.

val as_declarations : statement -> declaration list option

as_declarations stmt returns Some decls if the statement is a bare declarations block (used in CSS nesting), None otherwise.

val map : 
  (Selector.t -> declaration list -> statement) ->
  statement list ->
  statement list

map f stmts applies f to all rules in stmts, recursively descending into nested containers (media, supports, layers, etc.).

Rules are transformed while non-rule statements are preserved
Traversal is depth-first, processing nested containers recursively
Transformation is applied to all rules at all nesting levels
Non-rule statements (at-rules without rule content) maintain their relative order.

val sort : 
  ((Selector.t * declaration list) -> (Selector.t * declaration list) -> int) ->
  statement list ->
  statement list

sort cmp stmts sorts rules within stmts using the comparison function cmp, recursively descending into nested containers.

Sort is stable: equal elements maintain their relative order
Non-rule statements are preserved in their original positions
Sorting occurs independently within each container level
Nested containers (media, supports, layers) have their rules sorted recursively.

type property_info =

| Property_info : {
1. name : string;
2. syntax : 'a Variables.syntax;
3. inherits : bool;
4. initial_value : 'a option;
} -> property_info

Existential type for property information that preserves type safety

val as_property : statement -> property_info option

as_property stmt returns Some (Property_info {...}) if the statement is a @property declaration, None otherwise. The existential type preserves the relationship between syntax type and initial value type.

type keyframe = Stylesheet.keyframe

Type for keyframe selectors and their declarations

val keyframes : string -> keyframe list -> statement

keyframes name frames creates a @keyframes rule.

Example:

  keyframes "pulse"
    [
      {
        keyframe_selector = "50%";
        keyframe_declarations = [ opacity (Float 0.5) ];
      };
    ]

produces @keyframes pulse { 50% { opacity: 0.5 } }.

val as_keyframes : statement -> (string * keyframe list) option

as_keyframes stmt returns Some (name, frames) if the statement is a @keyframes animation, None otherwise.

val as_font_face : statement -> Stylesheet.font_face_descriptor list option

as_font_face stmt returns Some descriptors if the statement is a @font-face rule, None otherwise.

At-Rules

At-rules are CSS statements that instruct CSS how to behave. They begin with an at sign (@) followed by an identifier and include everything up to the next semicolon or CSS block.

See https://www.w3.org/TR/css-conditional-3/ CSS Conditional Rules Module Level 3 and https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule MDN At-rules.

Stylesheet Construction

Tools for building complete CSS stylesheets from rules and declarations.

type t

The type for CSS stylesheets.

val empty : t

empty is an empty stylesheet.

val concat : t list -> t

concat stylesheets concatenates multiple stylesheets into one.

val v : statement list -> t

v statements creates a stylesheet from a list of statements.

val rule_statements : t -> statement list

rule_statements t returns the top-level rule statements from the stylesheet.

val statements : t -> statement list

statements t returns all top-level statements from the stylesheet.

val fold : ('a -> statement -> 'a) -> 'a -> t -> 'a

fold f acc css folds over all statements in css, recursively descending into nested structures (layers, media queries, containers, and supports rules). The function f is called for each statement in depth-first order.

Example: Collect all selectors from all rules (including nested ones):

  let selectors =
    Css.fold
      (fun acc stmt ->
        match Css.as_rule stmt with
        | Some (sel, _, _) -> Css.Selector.to_string sel :: acc
        | None -> acc)
      [] css

val media_queries : t -> (Media.t * statement list) list

media_queries t returns media queries and their rule statements.

val layers : t -> string list

layers t returns the layer names from the stylesheet.

AST Introspection Helpers

val layer_block : string -> t -> statement list option

layer_block name sheet extracts the statements from the named layer @layer name in the stylesheet. Returns None if the layer is not found.

val rules_from_statements : 
  statement list ->
  (Selector.t * declaration list) list

rules_from_statements stmts extracts all CSS rules (selector + declarations) from a list of statements, filtering out at-rules and other non-rule statements.

val custom_prop_names : declaration list -> string list

custom_prop_names decls extracts all custom property names from a list of declarations.

val custom_props_from_rules : 
  (Selector.t * declaration list) list ->
  string list

custom_props_from_rules rules extracts all custom property names from the declarations in the rules.

val custom_props : ?layer:string -> t -> string list

custom_props ?layer sheet recursively extracts all custom property names from the stylesheet. If layer is provided, only properties from that layer are extracted. Traverses nested @supports, @media, and other conditional blocks.

val media : condition:Media.t -> statement list -> statement

media ~condition statements creates a @media statement with the given condition.

val media_nested : condition:Media.t -> declaration list -> statement

media_nested ~condition declarations creates a @media statement for CSS nesting, containing bare declarations (no selector). Used inside rules where the selector is inherited from the parent.

val declarations : declaration list -> statement

declarations decls creates a bare declarations block (used in CSS nesting).

val layer : ?name:string -> statement list -> statement

layer ?name statements creates a @layer statement with the given statements.

val layer_decl : string list -> statement

layer_decl names creates a @layer declaration statement that declares layer names without any content (e.g., @layer theme, base, components, utilities;).

val layer_of : ?name:string -> t -> t

layer_of ?name stylesheet wraps an entire stylesheet in @layer, preserving @supports and other at-rules within it.

val container : 
  ?name:string ->
  condition:Container.t ->
  statement list ->
  statement

container ?name ~condition statements creates a @container statement with the given statements.

val supports : condition:Supports.t -> statement list -> statement

supports ~condition statements creates a @supports statement with the given condition.

val starting_style : statement list -> statement

starting_style statements creates a @starting-style statement with the given statements. Used for CSS entry animations.

val starting_style_nested : declaration list -> statement

starting_style_nested declarations creates a @starting-style statement for CSS nesting, containing bare declarations (no selector). Used inside rules where the selector is inherited from the parent.

Declarations

Core value types and declaration building blocks.

Custom Properties (Variables)

type 'a var

The type of CSS variable holding values of type 'a.

val var_name : 'a var -> string

var_name v is v's variable name (without --).

val var_layer : 'a var -> string option

var_layer v is the optional layer where v is defined.

val with_fallback : 'a var -> 'a -> 'a var

with_fallback var_ref fallback_value creates a new variable reference with the same variable name but a different fallback value. This is useful when you need to reference a variable from another module with a specific fallback, without creating a declaration.

type any_var =

| V : 'a var -> any_var
(*
The type of CSS variables.
*)

val vars_of_rules : statement list -> any_var list

vars_of_rules statements extracts all CSS variables referenced in rule statements' declarations, returning them sorted and deduplicated.

val vars_of_declarations : declaration list -> any_var list

vars_of_declarations decls extracts all CSS variables referenced in the declarations list.

val vars_of_stylesheet : t -> any_var list

vars_of_stylesheet stylesheet extracts all CSS variables referenced in the entire stylesheet, returning them sorted and deduplicated.

val any_var_name : any_var -> string

any_var_name v is the name of a CSS variable (with -- prefix).

val custom_declarations : ?layer:string -> declaration list -> declaration list

custom_declarations ?layer decls is only the custom property declarations from decls. If layer is provided, only declarations from that layer are returned.

Core Types & Calculations

Fundamental types for CSS values, variables, and calculations that underpin the entire CSS system.

See https://www.w3.org/TR/css-variables-1/ CSS Custom Properties for Cascading Variables Module Level 1 and https://www.w3.org/TR/css-values-3/ CSS Values and Units Module Level 3.

type calc_op =

| Add
| Sub
| Mul
| Div

CSS calc operations.

type 'a calc =

| Var of 'a var
(*
CSS variable
*)
| Val of 'a
| Num of float
(*
Unitless number
*)
| Expr of 'a calc * calc_op * 'a calc
| Nested of 'a calc
(*
Explicitly nested calc()
*)

CSS calc values.

type 'a fallback =

| Empty
(*
Empty fallback: var(--name,)
*)
| None
(*
No fallback: var(--name)
*)
| Fallback of 'a
(*
Value fallback: var(--name, value)
*)
| Var_fallback of string
(*
Nested var fallback: var(--name, var(--fallback))
*)

CSS Values & Units

Core value types used across CSS properties.

See https://www.w3.org/TR/css-values-4/ CSS Values and Units Module Level 4.

type length =

| Px of float
| Cm of float
| Mm of float
| Q of float
| In of float
| Pt of float
| Pc of float
| Rem of float
| Em of float
| Ex of float
| Cap of float
| Ic of float
| Rlh of float
| Pct of float
| Vw of float
| Vh of float
| Vmin of float
| Vmax of float
| Vi of float
| Vb of float
| Dvh of float
| Dvw of float
| Dvmin of float
| Dvmax of float
| Lvh of float
| Lvw of float
| Lvmin of float
| Lvmax of float
| Svh of float
| Svw of float
| Svmin of float
| Svmax of float
| Ch of float
(*
Character units
*)
| Lh of float
(*
Line height units
*)
| Auto
| None
(*
none keyword (e.g., for max-width)
*)
| Zero
| Inherit
| Initial
| Unset
| Revert
| Revert_layer
| Fit_content
(*
fit-content keyword
*)
| Content
(*
content keyword
*)
| Max_content
(*
max-content keyword
*)
| Min_content
(*
min-content keyword
*)
| From_font
(*
from-font keyword for text-decoration-thickness
*)
| Clamp of string
(*
clamp() function
*)
| Min of string
(*
min() function
*)
| Max of string
(*
max() function
*)
| Minmax of string
(*
minmax() function for grid
*)
| Var of length var
(*
CSS variable reference
*)
| Calc of length calc
(*
Calculated expressions
*)

CSS length values.

Supports absolute, relative, viewport (including dynamic/large/small), character-based units, keywords, and calculated expressions.

module Calc : sig ... end

Builder functions for calc() expressions.

type _ property

GADT for typed CSS properties.

type color_space =

| Srgb
| Srgb_linear
| Display_p3
| A98_rgb
| Prophoto_rgb
| Rec2020
| Lab
| Oklab
| Xyz
| Xyz_d50
| Xyz_d65
| Lch
| Oklch
| Hsl
| Hwb

CSS color spaces for color-mix()

type color_name =

| Red
| Blue
| Green
| White
| Black
| Yellow
| Cyan
| Magenta
| Gray
| Grey
| Orange
| Purple
| Pink
| Silver
| Maroon
| Fuchsia
| Lime
| Olive
| Navy
| Teal
| Aqua
| Alice_blue
| Antique_white
| Aquamarine
| Azure
| Beige
| Bisque
| Blanched_almond
| Blue_violet
| Brown
| Burlywood
| Cadet_blue
| Chartreuse
| Chocolate
| Coral
| Cornflower_blue
| Cornsilk
| Crimson
| Dark_blue
| Dark_cyan
| Dark_goldenrod
| Dark_gray
| Dark_green
| Dark_grey
| Dark_khaki
| Dark_magenta
| Dark_olive_green
| Dark_orange
| Dark_orchid
| Dark_red
| Dark_salmon
| Dark_sea_green
| Dark_slate_blue
| Dark_slate_gray
| Dark_slate_grey
| Dark_turquoise
| Dark_violet
| Deep_pink
| Deep_sky_blue
| Dim_gray
| Dim_grey
| Dodger_blue
| Firebrick
| Floral_white
| Forest_green
| Gainsboro
| Ghost_white
| Gold
| Goldenrod
| Green_yellow
| Honeydew
| Hot_pink
| Indian_red
| Indigo
| Ivory
| Khaki
| Lavender
| Lavender_blush
| Lawn_green
| Lemon_chiffon
| Light_blue
| Light_coral
| Light_cyan
| Light_goldenrod_yellow
| Light_gray
| Light_green
| Light_grey
| Light_pink
| Light_salmon
| Light_sea_green
| Light_sky_blue
| Light_slate_gray
| Light_slate_grey
| Light_steel_blue
| Light_yellow
| Lime_green
| Linen
| Medium_aquamarine
| Medium_blue
| Medium_orchid
| Medium_purple
| Medium_sea_green
| Medium_slate_blue
| Medium_spring_green
| Medium_turquoise
| Medium_violet_red
| Midnight_blue
| Mint_cream
| Misty_rose
| Moccasin
| Navajo_white
| Old_lace
| Olive_drab
| Orange_red
| Orchid
| Pale_goldenrod
| Pale_green
| Pale_turquoise
| Pale_violet_red
| Papaya_whip
| Peach_puff
| Peru
| Plum
| Powder_blue
| Rebecca_purple
| Rosy_brown
| Royal_blue
| Saddle_brown
| Salmon
| Sandy_brown
| Sea_green
| Sea_shell
| Sienna
| Sky_blue
| Slate_blue
| Slate_gray
| Slate_grey
| Snow
| Spring_green
| Steel_blue
| Tan
| Thistle
| Tomato
| Turquoise
| Violet
| Wheat
| White_smoke
| Yellow_green

CSS named colors as defined in the CSS Color Module specification.

type channel =

| Int of int
| Num of float
| Pct of float
| Var of channel var

CSS channel values (for RGB)

type rgb =

| Channels of {
1. r : channel;
2. g : channel;
3. b : channel;
}
| Var of rgb var

type alpha =

| None
| Num of float
| Pct of float
| Var of alpha var

CSS alpha values (for HSL/HWB/etc)

type hue =

| Unitless of float
| Angle of Values.angle
| Var of hue var

CSS hue values (for HSL/HWB)

type component =

| Num of float
| Pct of float
| Angle of hue
| Var of component var
| Calc of component calc

CSS color component values

type percentage =

| Pct of float
| Var of percentage var
| Calc of percentage calc

CSS percentage values

type length_percentage =

| Length of length
| Pct of float
| Var of length_percentage var
| Calc of length_percentage calc

type number_percentage =

| Num of float
| Pct of float
| Var of number_percentage var
| Calc of number_percentage calc

CSS number or percentage values (for properties like scale, brightness)

type hue_interpolation =

| Shorter
| Longer
| Increasing
| Decreasing
| Default

CSS hue interpolation options

type system_color =

| AccentColor
(*
Background of accented user interface controls
*)
| AccentColorText
(*
Text of accented user interface controls
*)
| ActiveText
(*
Text of active links
*)
| ButtonBorder
(*
Base border color of controls
*)
| ButtonFace
(*
Background color of controls
*)
| ButtonText
(*
Text color of controls
*)
| Canvas
(*
Background of application content or documents
*)
| CanvasText
(*
Text color in application content or documents
*)
| Field
(*
Background of input fields
*)
| FieldText
(*
Text in input fields
*)
| GrayText
(*
Text color for disabled items
*)
| Highlight
(*
Background of selected items
*)
| HighlightText
(*
Text color of selected items
*)
| LinkText
(*
Text of non-active, non-visited links
*)
| Mark
(*
Background of specially marked text
*)
| MarkText
(*
Text that has been specially marked
*)
| SelectedItem
(*
Background of selected items (e.g., selected checkbox)
*)
| SelectedItemText
(*
Text of selected items
*)
| VisitedText
(*
Text of visited links
*)
| Webkit_focus_ring_color
(*
WebKit-specific focus ring color
*)

CSS system colors - case-insensitive keywords that map to OS/browser colors. These are semantic colors that adapt to user preferences and system settings.

type color =

| Hex of {
1. hash : bool;
2. value : string;
}
(*
hash indicates if # was present
*)
| Rgb of rgb
| Rgba of {
1. rgb : rgb;
2. a : alpha;
}
| Hsl of {
1. h : hue;
2. s : percentage;
3. l : percentage;
4. a : alpha;
}
| Hwb of {
1. h : hue;
2. w : percentage;
3. b : percentage;
4. a : alpha;
}
| Color of {
1. space : color_space;
2. components : component list;
3. alpha : alpha;
}
| Oklch of {
1. l : percentage;
2. c : float;
3. h : hue;
4. alpha : alpha;
}
(*
OKLCH color space
*)
| Oklab of {
1. l : percentage;
2. a : float;
3. b : float;
4. alpha : alpha;
}
(*
Oklab color space
*)
| Lch of {
1. l : percentage;
2. c : float;
3. h : hue;
4. alpha : alpha;
}
(*
LCH color space
*)
| Named of color_name
(*
Named colors like Red, Blue, etc.
*)
| System of system_color
(*
CSS system colors like ButtonText, Canvas, etc.
*)
| Var of color var
| Current
| Transparent
| Inherit
| Initial
| Unset
| Revert
| Revert_layer
| Mix of {
1. in_space : color_space option;
2. hue : hue_interpolation;
3. color1 : color;
4. percent1 : percentage option;
5. color2 : color;
6. percent2 : percentage option;
}

CSS color values.

val hex : string -> color

hex s is a hexadecimal color. Accepts with or without leading #. Examples: hex "#3b82f6", hex "ffffff".

val rgb : ?alpha:float -> int -> int -> int -> color

rgb ?alpha r g b is an RGB color (0–255 components) with optional alpha.

val hsl : float -> float -> float -> color

hsl h s l is an HSL color with h in degrees, s and l in percentages (0-100).

val hsla : float -> float -> float -> float -> color

hsla h s l a is an HSLA color with alpha in 0., 1..

val hwb : float -> float -> float -> color

hwb h w b is an HWB color with h in degrees, w and b in percentages (0-100).

val hwba : float -> float -> float -> float -> color

hwba h w b a is an HWB color with alpha in 0., 1..

val oklch : float -> float -> float -> color

oklch l c h is an OKLCH color. L in percentage (0-100), h in degrees.

val oklcha : float -> float -> float -> float -> color

oklcha l c h a is an OKLCH color with alpha in 0., 1..

val oklab : float -> float -> float -> color

oklab l a b is an OKLAB color. L in percentage (0-100).

val oklaba : float -> float -> float -> float -> color

oklaba l a b alpha is an OKLAB color with alpha in 0., 1..

val lch : float -> float -> float -> color

lch l c h is an LCH color. L in percentage (0-100), h in degrees.

val lcha : float -> float -> float -> float -> color

lcha l c h a is an LCH color with alpha in 0., 1..

val color_name : color_name -> color

color_name n is a named color as defined in the CSS Color specification.

val current_color : color

current_color is the CSS currentcolor value.

val transparent : color

transparent is the CSS transparent value.

val color_mix : 
  ?in_space:color_space ->
  ?hue:hue_interpolation ->
  ?percent1:int ->
  ?percent2:int ->
  color ->
  color ->
  color

color_mix ?in_space ?percent1 ?percent2 c1 c2 is a color-mix value. Defaults: in_space = Srgb, percent1 = None, percent2 = None.

type angle =

| Deg of float
| Rad of float
| Turn of float
| Grad of float
| Var of angle var
(*
CSS variable reference
*)

CSS angle values

type aspect_ratio =

| Auto
| Ratio of float * float
| Inherit

CSS aspect-ratio values

type blend_mode =

| Normal
| Multiply
| Screen
| Overlay
| Darken
| Lighten
| Color_dodge
| Color_burn
| Hard_light
| Soft_light
| Difference
| Exclusion
| Hue
| Saturation
| Color
| Luminosity
| Plus_darker
| Plus_lighter
| Var of blend_mode var

CSS blend-mode values

type font_feature_settings =

| Normal
| Feature_list of string
| Inherit
| String of string
| Var of font_feature_settings var

CSS font-feature-settings values

type font_variation_settings =

| Normal
| Axis_list of string
| Inherit
| String of string
| Var of font_variation_settings var

CSS font-variation-settings values

val important : declaration -> declaration

important decl is decl marked as !important.

val declaration_is_important : declaration -> bool

declaration_is_important decl returns true if decl has the !important flag.

val declaration_name : declaration -> string

declaration_name decl returns the property name of decl.

val declaration_value : ?minify:bool -> ?inline:bool -> declaration -> string

declaration_value ~minify ~inline decl returns the value of decl as a string. If minify is true (default: false), the output is minified. If inline is true (default: false), variables are resolved to their default values.

val string_of_declaration : ?minify:bool -> declaration -> string

string_of_declaration ~minify decl converts a declaration to its string representation. If minify is true (default: false), the output is minified.

Property Categories

CSS properties organized by functionality and usage patterns.

Box Model & Sizing

The CSS Box Model defines how element dimensions are calculated and how space is distributed around content. This includes width/height properties, padding, margins, and box sizing behavior.

see https://www.w3.org/TR/css-box-3/
CSS Box Model Module Level 3

see https://www.w3.org/TR/css-sizing-3/
CSS Intrinsic & Extrinsic Sizing Module Level 3

type box_sizing =

| Border_box
| Content_box
| Inherit

CSS box sizing values.

type field_sizing =

| Content
| Fixed
| Inherit

CSS field sizing values.

type caption_side =

| Top
| Bottom
| Inherit

CSS caption side values.

val width : length -> declaration

width len is the width property.

val height : length -> declaration

height len is the height property.

val min_width : length -> declaration

min_width len is the min-width property.

val max_width : length -> declaration

max_width len is the max-width property.

val min_height : length -> declaration

min_height len is the min-height property.

val max_height : length -> declaration

max_height len is the max-height property.

val padding : length list -> declaration

padding values is the padding shorthand property. Accepts 1-4 values.

val padding_top : length -> declaration

padding_top len is the padding-top property.

val padding_right : length -> declaration

padding_right len is the padding-right property.

val padding_bottom : length -> declaration

padding_bottom len is the padding-bottom property.

val padding_left : length -> declaration

padding_left len is the padding-left property.

val margin : length list -> declaration

margin values is the margin shorthand property. Accepts 1-4 values.

val margin_top : length -> declaration

margin_top len is the margin-top property.

val margin_right : length -> declaration

margin_right len is the margin-right property.

val margin_bottom : length -> declaration

margin_bottom len is the margin-bottom property.

val margin_left : length -> declaration

margin_left len is the margin-left property.

val box_sizing : box_sizing -> declaration

box_sizing sizing is the box-sizing property.

val field_sizing : field_sizing -> declaration

field_sizing sizing is the field-sizing property.

val caption_side : caption_side -> declaration

caption_side side is the caption-side property.

val aspect_ratio : aspect_ratio -> declaration

aspect_ratio ratio is the aspect-ratio property.

Logical Properties

CSS Logical Properties provide writing-mode-relative property equivalents for physical properties. These adapt to different writing directions and text orientations.

see https://www.w3.org/TR/css-logical-1/
CSS Logical Properties and Values Level 1

type border_width =

| Thin
| Medium
| Thick
| Px of float
| Rem of float
| Em of float
| Ch of float
| Vh of float
| Vw of float
| Vmin of float
| Vmax of float
| Pct of float
| Zero
| Auto
| Max_content
| Min_content
| Fit_content
| From_font
| Calc of border_width calc
| Var of border_width var
| Inherit

val border_inline_start_width : border_width -> declaration

border_inline_start_width len is the border-inline-start-width property.

val border_inline_end_width : border_width -> declaration

border_inline_end_width len is the border-inline-end-width property.

val border_inline_start_color : color -> declaration

border_inline_start_color c is the border-inline-start-color property.

val border_inline_end_color : color -> declaration

border_inline_end_color c is the border-inline-end-color property.

val padding_inline_start : length -> declaration

padding_inline_start len is the padding-inline-start property.

val padding_inline_end : length -> declaration

padding_inline_end len is the padding-inline-end property.

val padding_inline : length -> declaration

padding_inline len is the padding-inline shorthand property.

val padding_block : length -> declaration

padding_block len is the padding-block shorthand property.

val margin_inline : length -> declaration

margin_inline len is the margin-inline property with a length value.

val margin_inline_start : length -> declaration

margin_inline_start len is the margin-inline-start property.

val margin_inline_end : length -> declaration

margin_inline_end len is the margin-inline-end property.

val margin_block : length -> declaration

margin_block len is the margin-block property with a length value.

val margin_block_start : length -> declaration

margin_block_start len is the margin-block-start property.

val margin_block_end : length -> declaration

margin_block_end len is the margin-block-end property.

Display & Positioning

Controls how elements are displayed and positioned in the document flow. This includes the display model, positioning schemes, and stacking context.

see https://www.w3.org/TR/css-display-3/
CSS Display Module Level 3

see https://www.w3.org/TR/css-position-3/
CSS Positioned Layout Module Level 3

type display =

| Block
| Inline
| Inline_block
| Flex
| Inline_flex
| Grid
| Inline_grid
| None
| Flow_root
| Table
| Table_row
| Table_cell
| Table_caption
| Table_column
| Table_column_group
| Table_footer_group
| Table_header_group
| Table_row_group
| Inline_table
| List_item
| Contents
| Webkit_box
| Inherit
| Initial
| Unset

CSS display values.

type position =

| Static
| Relative
| Absolute
| Fixed
| Sticky

CSS position values.

type visibility =

| Visible
| Hidden
| Collapse

CSS visibility values.

type z_index =

| Auto
| Index of int

CSS z-index values.

type overflow =

| Visible
| Hidden
| Scroll
| Auto
| Clip

CSS overflow values.

val display : display -> declaration

display d is the display property.

val position : position -> declaration

position p is the position property.

val inset : length -> declaration

inset len is the inset property for positioned elements.

val inset_inline : length -> declaration

inset_inline len is the inset-inline logical property.

val inset_inline_start : length -> declaration

inset_inline_start len is the inset-inline-start logical property.

val inset_inline_end : length -> declaration

inset_inline_end len is the inset-inline-end logical property.

val inset_block : length -> declaration

inset_block len is the inset-block logical property.

val inset_block_start : length -> declaration

inset_block_start len is the inset-block-start logical property.

val inset_block_end : length -> declaration

inset_block_end len is the inset-block-end logical property.

val top : length -> declaration

top len is the top property for positioned elements.

val right : length -> declaration

right len is the right property for positioned elements.

val bottom : length -> declaration

bottom len is the bottom property for positioned elements.

val left : length -> declaration

left len is the left property for positioned elements.

val z_index : z_index -> declaration

z_index z is the z-index property.

val z_index_auto : declaration

z_index_auto is the z-index property set to auto.

type isolation =

| Auto
| Isolate
| Inherit

CSS isolation values

val isolation : isolation -> declaration

isolation iso is the isolation property for stacking context control.

val visibility : visibility -> declaration

visibility v is the visibility property.

type float_side =

| None
| Left
| Right
| Inline_start
| Inline_end
| Inherit

CSS float side values.

val float : float_side -> declaration

float side is the float property.

type clear =

| None
| Left
| Right
| Both
| Inline_start
| Inline_end

CSS clear values.

val clear : clear -> declaration

clear clr is the clear property.

val overflow : overflow -> declaration

overflow ov is the overflow property.

val overflow_x : overflow -> declaration

overflow_x ov is the overflow-x property.

val overflow_y : overflow -> declaration

overflow_y ov is the overflow-y property.

type content =

| String of string
| None
| Normal
| Open_quote
| Close_quote
| Var of content var

CSS content values

val content : content -> declaration

content c is the content property.

type object_fit =

| Fill
| Contain
| Cover
| None
| Scale_down
| Inherit

CSS object-fit values

val object_fit : object_fit -> declaration

object_fit fit is the object-fit property.

type position_value =

| Center
| Left_top
| Left_center
| Left_bottom
| Right_top
| Right_center
| Right_bottom
| Center_top
| Center_bottom
| XY of length * length
| Inherit
| Initial
| Edge_offset_axis of string * length * string
| Edge_offset_edge_offset of string * length * string * length

val object_position : position_value -> declaration

object_position pos is the object-position property.

type text_overflow =

| Clip
| Ellipsis
| String of string
| Inherit

CSS text-overflow values

val text_overflow : text_overflow -> declaration

text_overflow ov is the text-overflow property.

type text_wrap =

| Wrap
| No_wrap
| Balance
| Pretty
| Inherit

CSS text-wrap values

val text_wrap : text_wrap -> declaration

text_wrap wrap is the text-wrap property.

type backface_visibility =

| Visible
| Hidden
| Inherit

CSS backface-visibility values

val backface_visibility : backface_visibility -> declaration

backface_visibility vis is the backface-visibility property (3D transforms).

type content_visibility =

| Visible
(*
Content is visible and rendered
*)
| Hidden
(*
Content is hidden from rendering
*)
| Auto
(*
Browser determines visibility based on relevance
*)
| Inherit
(*
Inherit from parent
*)
| Var of content_visibility var
(*
CSS variable reference
*)

CSS content-visibility values.

val content_visibility : content_visibility -> declaration

content_visibility vis is the content-visibility property.

type quotes =

| Auto
(*
Browser default based on language
*)
| None
(*
No quotation marks
*)
| Pairs of (string * string) list
(*
One or more open/close quote pairs
*)
| Inherit
| Initial
| Unset
| Revert
| Revert_layer
| Var of quotes var

CSS quotes property values - defines quotation marks for q and blockquote.

val quotes : quotes -> declaration

quotes q is the quotes property.

type list_style_position =

| Inside
| Outside
| Inherit

CSS list-style-position values

val list_style_position : list_style_position -> declaration

list_style_position pos is the list-style-position property.

Colors & Backgrounds

Properties for controlling foreground colors, background colors, images, and related visual styling for element backgrounds.

see https://www.w3.org/TR/css-color-4/
CSS Color Module Level 4

see https://www.w3.org/TR/css-backgrounds-3/
CSS Backgrounds and Borders Module Level 3

type forced_color_adjust =

| Auto
| None
| Inherit

CSS forced-color-adjust values.

type background_repeat =

| Repeat
| Space
| Round
| No_repeat
| Repeat_x
| Repeat_y
| Repeat_repeat
| Repeat_space
| Repeat_round
| Repeat_no_repeat
| Space_repeat
| Space_space
| Space_round
| Space_no_repeat
| Round_repeat
| Round_space
| Round_round
| Round_no_repeat
| No_repeat_repeat
| No_repeat_space
| No_repeat_round
| No_repeat_no_repeat
| Inherit
| Initial
| Unset

CSS background-repeat values.

type background_size =

| Auto
| Cover
| Contain
| Px of float
| Rem of float
| Em of float
| Pct of float
| Vw of float
| Vh of float
| Size of length * length
| Inherit
| Initial
| Unset

CSS background-size values.

type background_attachment =

| Scroll
| Fixed
| Local
| Inherit

CSS background-attachment values.

type color_interpolation =

| In_oklab
| In_oklch
| In_srgb
| In_hsl
| In_lab
| In_lch

Color interpolation for gradients

type gradient_direction =

| To_top
| To_top_right
| To_right
| To_bottom_right
| To_bottom
| To_bottom_left
| To_left
| To_top_left
| Angle of angle
| With_interpolation of gradient_direction * color_interpolation
| Var of gradient_direction var

Gradient direction values

type gradient_stop =

| Var of gradient_stop var
(*
Single complex variable like var(--complex, fallback)
*)
| Color_percentage of color * percentage option * percentage option
(*
Color with optional percentage positions
*)
| Color_length of color * length option * length option
(*
Color with optional length positions
*)
| Length of length
(*
Interpolation hint with length, e.g., "50px"
*)
| List of gradient_stop list
(*
Multiple gradient stops - used for var fallbacks
*)
| Percentage of percentage
(*
Interpolation hint with percentage, e.g., "50%"
*)
| Direction of gradient_direction
(*
Gradient direction for stops, e.g., "to right" or Var
*)

Gradient stop values

type background_image =

| Url of string
| Linear_gradient of gradient_direction * gradient_stop list
| Linear_gradient_var of gradient_stop var
(*
Linear gradient using a single variable for all stops including position. Outputs: linear-gradient(var(--tw-gradient-stops))
*)
| Radial_gradient of gradient_stop list
| None
| Initial
| Inherit

Background image values

type background_box =

| Border_box
| Padding_box
| Content_box
| Text
| Inherit

type background_shorthand = {

color : color option;
image : background_image option;
position : position_value option;
size : background_size option;
repeat : background_repeat option;
attachment : background_attachment option;
clip : background_box option;
origin : background_box option;

}

CSS background shorthand values.

type background =

| Inherit
| Initial
| Unset
| None
| Var of background var
| Shorthand of background_shorthand
(*
CSS background values.
*)

val background_shorthand : 
  ?color:color ->
  ?image:background_image ->
  ?position:position_value ->
  ?size:background_size ->
  ?repeat:background_repeat ->
  ?attachment:background_attachment ->
  ?clip:background_box ->
  ?origin:background_box ->
  unit ->
  background

background_shorthand ?color ?image ?position ?size ?repeat ?attachment ?clip ?origin () is the background shorthand.

color: background color
image: background image (url or gradient)
position: image position
size: image size (cover, contain, or specific size)
repeat: repeat behavior (repeat, no-repeat, etc.)
attachment: scroll behavior (scroll, fixed, local)
clip: clipping area
origin: positioning area.

val color : color -> declaration

color c is the color property.

val background : background -> declaration

background bg is the background shorthand property.

val background_color : color -> declaration

background_color c is the background-color property.

val background_image : background_image -> declaration

background_image img is the background-image property.

val background_position : position_value list -> declaration

background_position pos is the background-position property.

val background_size : background_size -> declaration

background_size sz is the background-size property.

val background_repeat : background_repeat -> declaration

background_repeat rep is the background-repeat property.

val background_attachment : background_attachment -> declaration

background_attachment att is the background-attachment property.

val opacity : float -> declaration

opacity op is the opacity property.

val url : string -> background_image

url path is a URL background image value.

val linear_gradient : 
  gradient_direction ->
  gradient_stop list ->
  background_image

linear_gradient dir stops is a linear gradient background.

val radial_gradient : gradient_stop list -> background_image

radial_gradient stops is a radial gradient background.

val color_stop : color -> gradient_stop

color_stop c is a simple color stop.

val color_position : color -> length -> gradient_stop

color_position c pos is a color stop at a specific position.

Flexbox Layout

Properties for CSS Flexible Box Layout, a one-dimensional layout method for distributing space between items and providing alignment capabilities.

see https://www.w3.org/TR/css-flexbox-1/
CSS Flexible Box Layout Module Level 1

type flex_direction =

| Row
| Row_reverse
| Column
| Column_reverse

CSS flex direction values.

type flex_wrap =

| Nowrap
| Wrap
| Wrap_reverse

CSS flex wrap values.

type flex_basis =

| Auto
| Content
| Px of float
| Cm of float
| Mm of float
| Q of float
| In of float
| Pt of float
| Pc of float
| Rem of float
| Em of float
| Ex of float
| Cap of float
| Ic of float
| Rlh of float
| Pct of float
| Vw of float
| Vh of float
| Vmin of float
| Vmax of float
| Vi of float
| Vb of float
| Dvh of float
| Dvw of float
| Dvmin of float
| Dvmax of float
| Lvh of float
| Lvw of float
| Lvmin of float
| Lvmax of float
| Svh of float
| Svw of float
| Svmin of float
| Svmax of float
| Ch of float
| Lh of float
| Num of float
| Zero
| Inherit
| Initial
| Unset
| Revert
| Revert_layer
| Fit_content
| Max_content
| Min_content
| From_font
| Var of flex_basis var
| Calc of flex_basis calc

CSS flex basis values.

type flex =

| Initial
(*
0 1 auto
*)
| Auto
(*
1 1 auto
*)
| None
(*
0 0 auto
*)
| Grow of float
(*
Single grow value
*)
| Basis of flex_basis
(*
1 1 <flex-basis>
*)
| Grow_shrink of float * float
(*
grow shrink 0%
*)
| Full of float * float * flex_basis
(*
grow shrink basis
*)

CSS flex shorthand values.

type align_content =

| Normal
| Baseline
| First_baseline
| Last_baseline
| Center
| Start
| End
| Flex_start
| Flex_end
| Left
| Right
| Safe_center
| Safe_start
| Safe_end
| Safe_flex_start
| Safe_flex_end
| Safe_left
| Safe_right
| Unsafe_center
| Unsafe_start
| Unsafe_end
| Unsafe_flex_start
| Unsafe_flex_end
| Unsafe_left
| Unsafe_right
| Space_between
| Space_around
| Space_evenly
| Stretch

CSS align-content values. MDN: align-content

type align_items =

| Normal
| Stretch
| Baseline
| First_baseline
| Last_baseline
| Center
| Start
| End
| Self_start
| Self_end
| Flex_start
| Flex_end
| Unsafe_center
| Unsafe_start
| Unsafe_end
| Unsafe_self_start
| Unsafe_self_end
| Unsafe_flex_start
| Unsafe_flex_end
| Anchor_center

CSS align-items values. MDN: align-items

type justify_content =

| Normal
| Center
| Start
| End
| Flex_start
| Flex_end
| Left
| Right
| Unsafe_center
| Unsafe_start
| Unsafe_end
| Unsafe_flex_start
| Unsafe_flex_end
| Unsafe_left
| Unsafe_right
| Space_between
| Space_around
| Space_evenly
| Stretch

CSS justify-content values. MDN: justify-content

type align_self =

| Auto
| Normal
| Stretch
| Baseline
| First_baseline
| Last_baseline
| Center
| Start
| End
| Self_start
| Self_end
| Flex_start
| Flex_end
| Unsafe_center
| Unsafe_start
| Unsafe_end
| Unsafe_self_start
| Unsafe_self_end
| Unsafe_flex_start
| Unsafe_flex_end

CSS align-self values. MDN: align-self

type justify_items =

| Normal
| Stretch
| Baseline
| First_baseline
| Last_baseline
| Center
| Start
| End
| Self_start
| Self_end
| Flex_start
| Flex_end
| Left
| Right
| Safe_center
| Safe_start
| Safe_end
| Safe_self_start
| Safe_self_end
| Safe_flex_start
| Safe_flex_end
| Safe_left
| Safe_right
| Unsafe_center
| Unsafe_start
| Unsafe_end
| Unsafe_self_start
| Unsafe_self_end
| Unsafe_flex_start
| Unsafe_flex_end
| Unsafe_left
| Unsafe_right
| Anchor_center
| Legacy

CSS justify-items values. MDN: justify-items

type justify_self =

| Auto
| Normal
| Stretch
| Baseline
| First_baseline
| Last_baseline
| Center
| Start
| End
| Self_start
| Self_end
| Flex_start
| Flex_end
| Left
| Right
| Safe_center
| Safe_start
| Safe_end
| Safe_self_start
| Safe_self_end
| Safe_flex_start
| Safe_flex_end
| Safe_left
| Safe_right
| Unsafe_center
| Unsafe_start
| Unsafe_end
| Unsafe_self_start
| Unsafe_self_end
| Unsafe_flex_start
| Unsafe_flex_end
| Unsafe_left
| Unsafe_right
| Anchor_center
| Inherit

CSS justify-self values. MDN: justify-self

Alignment Properties

CSS Box Alignment properties for flexbox and grid layouts.

val align_content : align_content -> declaration

align_content alignment is the align-content property. Sets how content is aligned along the cross axis. Common values: Normal, Baseline, Center, Start, End, Space_between, Stretch.

val justify_content : justify_content -> declaration

justify_content alignment is the justify-content property. Sets how content is aligned along the main axis. Common values: Normal, Center, Start, End, Space_between, Space_around, Stretch.

val align_items : align_items -> declaration

align_items alignment is the align-items property. Sets alignment for all items along the cross axis. Common values: Normal, Baseline, Center, Start, End, Stretch.

val align_self : align_self -> declaration

align_self alignment is the align-self property. Overrides align-items for an individual item. Common values: Auto, Normal, Baseline, Center, Start, End, Stretch.

val justify_items : justify_items -> declaration

justify_items justification is the justify-items property. Sets default justification for all items. Common values: Normal, Baseline, Center, Start, End, Stretch, Legacy.

val justify_self : justify_self -> declaration

justify_self justification is the justify-self property. Sets justification for an individual item on the inline (main) axis.

val flex_direction : flex_direction -> declaration

flex_direction direction is the flex-direction property.

val flex_wrap : flex_wrap -> declaration

flex_wrap wrap is the flex-wrap property.

val flex : flex -> declaration

flex flex is the flex shorthand property.

val flex_grow : float -> declaration

flex_grow amount is the flex-grow property.

val flex_shrink : float -> declaration

flex_shrink amount is the flex-shrink property.

val flex_basis : length -> declaration

flex_basis basis is the flex-basis property.

val order : int -> declaration

order order is the order property.

type gap = {

row_gap : length option;
column_gap : length option;

}

CSS gap shorthand type.

val gap : gap -> declaration

gap gap is the gap property shorthand (applies to both row and column gaps).

val row_gap : length -> declaration

row_gap gap is the row-gap property.

val column_gap : length -> declaration

column_gap gap is the column-gap property.

Grid Layout

Properties for CSS Grid Layout, a two-dimensional layout system optimized for user interface design with explicit row and column positioning.

see https://www.w3.org/TR/css-grid-1/
CSS Grid Layout Module Level 1

see https://www.w3.org/TR/css-grid-2/
CSS Grid Layout Module Level 2

type grid_template =

| None
| Px of float
| Rem of float
| Em of float
| Pct of float
| Vw of float
| Vh of float
| Vmin of float
| Vmax of float
| Zero
| Fr of float
| Auto
| Min_content
| Max_content
| Inherit
| Min_max of grid_template * grid_template
| Fit_content of length
| Repeat of int * grid_template list
| Tracks of grid_template list
| Named_tracks of (string option * grid_template) list
| Subgrid
| Masonry

CSS grid template values

type grid_line =

| Auto
(*
auto
*)
| Num of int
(*
1, 2, 3, ... or -1, -2, ...
*)
| Name of string
(*
"header-start", "main-end", etc.
*)
| Span of int
(*
span 2, span 3, etc.
*)

CSS grid line values

val grid_template_columns : grid_template -> declaration

grid_template_columns cols is the grid-template-columns property.

val grid_template_rows : grid_template -> declaration

grid_template_rows rows is the grid-template-rows property.

val grid_template_areas : string -> declaration

grid_template_areas areas is the grid-template-areas property.

val grid_template : grid_template -> declaration

grid_template template is the grid-template shorthand property.

val grid_auto_columns : grid_template -> declaration

grid_auto_columns cols is the grid-auto-columns property.

val grid_auto_rows : grid_template -> declaration

grid_auto_rows rows is the grid-auto-rows property.

type grid_auto_flow =

| Row
| Column
| Dense
| Row_dense
| Column_dense

CSS grid-auto-flow values

val grid_auto_flow : grid_auto_flow -> declaration

grid_auto_flow flow is the grid-auto-flow property.

val grid_row_start : grid_line -> declaration

grid_row_start start is the grid-row-start property.

val grid_row_end : grid_line -> declaration

grid_row_end end_ is the grid-row-end property.

val grid_column_start : grid_line -> declaration

grid_column_start start is the grid-column-start property.

val grid_column_end : grid_line -> declaration

grid_column_end end_ is the grid-column-end property.

val grid_row : (grid_line * grid_line) -> declaration

grid_row (start, end) is the grid-row shorthand property.

val grid_column : (grid_line * grid_line) -> declaration

grid_column (start, end) is the grid-column shorthand property.

val grid_area : string -> declaration

grid_area area is the grid-area property.

type place_items =

| Normal
| Start
| End
| Center
| Stretch
| Align_justify of align_items * justify_items
| Inherit

CSS place-items values

val place_items : place_items -> declaration

place_items items is the place-items shorthand property.

type place_content =

| Normal
| Start
| End
| Center
| Stretch
| Space_between
| Space_around
| Space_evenly
| Align_justify of align_content * justify_content
| Inherit

CSS place-content values

val place_content : place_content -> declaration

place_content content is the place-content shorthand property.

val place_self : (align_self * justify_self) -> declaration

place_self self_ is the place-self shorthand property.

Typography

Properties for controlling text appearance, fonts, and text layout. This includes font properties, text decoration, alignment, and spacing.

see https://www.w3.org/TR/css-fonts-4/
CSS Fonts Module Level 4

see https://www.w3.org/TR/css-text-3/
CSS Text Module Level 3

see https://www.w3.org/TR/css-text-4/
CSS Text Module Level 4

type font_weight =

| Weight of int
| Normal
| Bold
| Bolder
| Lighter
| Inherit
| Var of font_weight var
(*
CSS variable reference
*)

CSS font weight values.

type text_align =

| Left
| Right
| Center
| Justify
| Start
| End
| Match_parent
| Inherit

CSS text align values.

type text_decoration_line =

| None
| Underline
| Overline
| Line_through

CSS text decoration values.

type text_decoration_style =

| Solid
| Double
| Dotted
| Dashed
| Wavy
| Inherit

type text_decoration_shorthand = {

lines : text_decoration_line list;
style : text_decoration_style option;
color : color option;
thickness : length option;

}

type text_decoration =

| None
| Shorthand of text_decoration_shorthand
| Inherit
| Var of text_decoration var

val text_decoration_shorthand : 
  ?lines:text_decoration_line list ->
  ?style:text_decoration_style ->
  ?color:color ->
  ?thickness:length ->
  unit ->
  text_decoration

text_decoration_shorthand ?lines ?style ?color ?thickness () is the text-decoration shorthand.

lines: decoration lines (underline, overline, line-through)
style: line style (solid, double, dotted, dashed, wavy)
color: decoration color
thickness: line thickness.

type font_style =

| Normal
| Italic
| Oblique
| Inherit

CSS font style values.

type text_transform =

| None
| Capitalize
| Uppercase
| Lowercase
| Full_width
| Full_size_kana
| Inherit
| Var of text_transform var

CSS text transform values.

type text_size_adjust =

| None
| Auto
| Pct of float
| Inherit

CSS text-size-adjust values (including vendor prefixes).

type font_family =

| Sans_serif
| Serif
| Monospace
| Cursive
| Fantasy
| System_ui
| Ui_sans_serif
| Ui_serif
| Ui_monospace
| Ui_rounded
| Emoji
| Math
| Fangsong
| Inter
| Roboto
| Open_sans
| Lato
| Montserrat
| Poppins
| Source_sans_pro
| Raleway
| Oswald
| Noto_sans
| Ubuntu
| Playfair_display
| Merriweather
| Lora
| PT_sans
| PT_serif
| Nunito
| Nunito_sans
| Work_sans
| Rubik
| Fira_sans
| Fira_code
| JetBrains_mono
| IBM_plex_sans
| IBM_plex_serif
| IBM_plex_mono
| Source_code_pro
| Space_mono
| DM_sans
| DM_serif_display
| Bebas_neue
| Barlow
| Mulish
| Josefin_sans
| Helvetica
| Helvetica_neue
| Arial
| Verdana
| Tahoma
| Trebuchet_ms
| Times_new_roman
| Times
| Georgia
| Cambria
| Garamond
| Courier_new
| Courier
| Lucida_console
| SF_pro
| SF_pro_display
| SF_pro_text
| SF_mono
| NY
| Segoe_ui
| Segoe_ui_emoji
| Segoe_ui_symbol
| Apple_color_emoji
| Noto_color_emoji
| Android_emoji
| Twemoji_mozilla
| Menlo
| Monaco
| Consolas
| Liberation_mono
| SFMono_regular
| Cascadia_code
| Cascadia_mono
| Victor_mono
| Inconsolata
| Hack
| Inherit
| Initial
| Unset
| Name of string
| Var of font_family var
| List of font_family list

CSS font-family values

val font_family : font_family -> declaration

font_family fonts is the font-family property.

val font_families : font_family list -> declaration

font_families fonts is the font-family property from a comma-separated list.

val font_size : length -> declaration

font_size size is the font-size property.

val font_weight : font_weight -> declaration

font_weight weight is the font-weight property.

val font_style : font_style -> declaration

font_style style is the font-style property.

type line_height =

| Normal
| Px of float
| Rem of float
| Em of float
| Pct of float
| Num of float
| Inherit
| Var of line_height var
| Calc of line_height calc

CSS line-height values

val line_height : line_height -> declaration

line_height height is the line-height property. Accepts Normal, Length values (e.g., `Length (Rem 1.5)`), Number values (e.g., `Num 1.5`), or Percentage values.

val letter_spacing : length -> declaration

letter_spacing spacing is the letter-spacing property.

val word_spacing : length -> declaration

word_spacing spacing is the word-spacing property.

val text_align : text_align -> declaration

text_align align is the text-align property.

val text_decoration : text_decoration -> declaration

text_decoration decoration is the text-decoration property.

val text_transform : text_transform -> declaration

text_transform transform is the text-transform property.

val text_indent : length -> declaration

text_indent indent is the text-indent property.

type white_space =

| Normal
| Nowrap
| Pre
| Pre_wrap
| Pre_line
| Break_spaces
| Inherit

CSS white-space values

val white_space : white_space -> declaration

white_space space is the white-space property.

type word_break =

| Normal
| Break_all
| Keep_all
| Break_word
| Inherit

CSS word-break values

val word_break : word_break -> declaration

word_break break is the word-break property.

val text_decoration_color : color -> declaration

text_decoration_color color is the text-decoration-color property.

val text_size_adjust : text_size_adjust -> declaration

text_size_adjust adjust is the text-size-adjust property.

val text_decoration_style : text_decoration_style -> declaration

text_decoration_style style is the text-decoration-style property.

val text_decoration_line : text_decoration_line -> declaration

text_decoration_line line is the text-decoration-line property.

val text_underline_offset : length -> declaration

text_underline_offset offset is the text-underline-offset property.

type overflow_wrap =

| Normal
| Break_word
| Anywhere
| Inherit

CSS overflow-wrap values

val overflow_wrap : overflow_wrap -> declaration

overflow_wrap wrap is the overflow-wrap property.

type hyphens =

| None
| Manual
| Auto
| Inherit

CSS hyphens values

val hyphens : hyphens -> declaration

hyphens hyphens is the hyphens property.

type font_stretch =

| Pct of float
(*
Percentage values from 50% to 200%
*)
| Ultra_condensed
| Extra_condensed
| Condensed
| Semi_condensed
| Normal
| Semi_expanded
| Expanded
| Extra_expanded
| Ultra_expanded
| Inherit

CSS font-stretch values

val font_stretch : font_stretch -> declaration

font_stretch stretch is the font-stretch property.

type font_variant_numeric_token =

| Normal
(*
Reset to normal font variant
*)
| Lining_nums
| Oldstyle_nums
| Proportional_nums
| Tabular_nums
| Diagonal_fractions
| Stacked_fractions
| Ordinal
| Slashed_zero
| Var of font_variant_numeric_token var
(*
Variable reference
*)

CSS font-variant-numeric token values

type font_variant_numeric =

| Normal
| Tokens of font_variant_numeric_token list
| Var of font_variant_numeric var
| Composed of {
1. ordinal : font_variant_numeric_token option;
2. slashed_zero : font_variant_numeric_token option;
3. numeric_figure : font_variant_numeric_token option;
4. numeric_spacing : font_variant_numeric_token option;
5. numeric_fraction : font_variant_numeric_token option;
}

CSS font-variant-numeric values

val font_variant_numeric : font_variant_numeric -> declaration

font_variant_numeric numeric is the font-variant-numeric property using a list of tokens or a composed value.

val font_variant_numeric_tokens : 
  font_variant_numeric_token list ->
  font_variant_numeric

font_variant_numeric_tokens tokens is a font-variant-numeric value from tokens.

val font_variant_numeric_composed : 
  ?ordinal:font_variant_numeric_token ->
  ?slashed_zero:font_variant_numeric_token ->
  ?numeric_figure:font_variant_numeric_token ->
  ?numeric_spacing:font_variant_numeric_token ->
  ?numeric_fraction:font_variant_numeric_token ->
  unit ->
  font_variant_numeric

font_variant_numeric_composed ... is a composed font-variant-numeric value using CSS variables for style composition.

val font_feature_settings : font_feature_settings -> declaration

font_feature_settings settings is the font-feature-settings property.

type shadow =

| Shadow of {
1. inset : bool;
2. inset_var : string option;
  (*
  If set, outputs var(--<name>) before shadow values. Used by Tailwind's ring system for dynamic inset toggle.
  *)
3. h_offset : length;
4. v_offset : length;
5. blur : length option;
6. spread : length option;
7. color : color option;
}
| None
| Inherit
| Initial
| Unset
| Revert
| Revert_layer
| Var of shadow var
| List of shadow list

CSS shadow values

val shadow : 
  ?inset:bool ->
  ?inset_var:string ->
  ?h_offset:length ->
  ?v_offset:length ->
  ?blur:length ->
  ?spread:length ->
  ?color:color ->
  unit ->
  shadow

shadow ?inset ?inset_var ?h_offset ?v_offset ?blur ?spread ?color () is a shadow value with optional parameters. When inset_var is set, outputs var(--<name>) before the shadow values (used by Tailwind's ring system). Defaults: inset=false, inset_var=None, h_offset=0px, v_offset=0px, blur=0px, spread=0px, color=Transparent.

val inset_ring_shadow : 
  ?h_offset:length ->
  ?v_offset:length ->
  ?blur:length ->
  ?spread:length ->
  ?color:color ->
  unit ->
  shadow

inset_ring_shadow ?h_offset ?v_offset ?blur ?spread ?color () is an inset shadow value suitable for ring utilities. Defaults: h_offset=0px, v_offset=0px, blur=0px, spread=0px, color=Transparent.

type text_shadow =

| None
| Text_shadow of {
1. h_offset : length;
2. v_offset : length;
3. blur : length option;
4. color : color option;
}
| Inherit

CSS text-shadow values

val text_shadow : text_shadow -> declaration

text_shadow shadow is the text-shadow property.

val font : string -> declaration

font spec is the font shorthand property.

type direction =

| Ltr
| Rtl
| Inherit

CSS direction values

val direction : direction -> declaration

direction dir is the direction property.

type unicode_bidi =

| Normal
| Embed
| Isolate
| Bidi_override
| Isolate_override
| Plaintext
| Inherit

CSS unicode-bidi values

val unicode_bidi : unicode_bidi -> declaration

unicode_bidi bidi is the unicode-bidi property.

type writing_mode =

| Horizontal_tb
| Vertical_rl
| Vertical_lr
| Sideways_lr
| Sideways_rl
| Inherit

CSS writing-mode values

val writing_mode : writing_mode -> declaration

writing_mode mode is the writing-mode property.

val text_decoration_thickness : length -> declaration

text_decoration_thickness thick is the text-decoration-thickness property.

type text_decoration_skip_ink =

| Auto
| None
| All
| Inherit

CSS text-decoration-skip-ink values

val text_decoration_skip_ink : text_decoration_skip_ink -> declaration

text_decoration_skip_ink skip is the text-decoration-skip-ink property.

Borders & Outlines

Properties for styling element borders, outlines, and related decorative features including border radius for rounded corners.

see https://www.w3.org/TR/css-backgrounds-3/
CSS Backgrounds and Borders Module Level 3

see https://www.w3.org/TR/css-ui-4/
CSS Basic User Interface Module Level 4

type border_style =

| None
| Solid
| Dashed
| Dotted
| Double
| Groove
| Ridge
| Inset
| Outset
| Hidden
| Var of border_style var
(*
CSS variable reference
*)

CSS border style values.

type border_shorthand = {

width : border_width option;
style : border_style option;
color : color option;

}

CSS border shorthand type.

type border =

| Inherit
| Initial
| None
| Shorthand of border_shorthand

type outline_style =

| None
| Solid
| Dashed
| Dotted
| Double
| Groove
| Ridge
| Inset
| Outset
| Auto
| Inherit

CSS outline style values.

type outline_shorthand = {

width : length option;
style : outline_style option;
color : color option;

}

CSS outline shorthand components.

type outline =

| Inherit
| Initial
| None
| Shorthand of outline_shorthand

CSS outline property values.

val border_shorthand : 
  ?width:border_width ->
  ?style:border_style ->
  ?color:color ->
  unit ->
  border

border_shorthand ?width ?style ?color () is the border shorthand.

width: border width (thin, medium, thick, or specific length)
style: border style (solid, dashed, dotted, etc.)
color: border color.

val border : 
  ?width:border_width ->
  ?style:border_style ->
  ?color:color ->
  unit ->
  declaration

border border is the border shorthand property.

val border_width : border_width -> declaration

border_width width is the border-width property.

val border_style : border_style -> declaration

border_style style is the border-style property.

val border_color : color -> declaration

border_color color is the border-color property.

val border_radius : length -> declaration

border_radius radius is the border-radius property.

val border_top_left_radius : length -> declaration

border_top_left_radius radius is the border-top-left-radius property.

val border_top_right_radius : length -> declaration

border_top_right_radius radius is the border-top-right-radius property.

val border_bottom_left_radius : length -> declaration

border_bottom_left_radius radius is the border-bottom-left-radius property.

val border_bottom_right_radius : length -> declaration

border_bottom_right_radius radius is the border-bottom-right-radius property.

val border_top : string -> declaration

border_top border is the border-top property.

val border_right : string -> declaration

border_right border is the border-right property.

val border_bottom : string -> declaration

border_bottom border is the border-bottom property.

val border_left : string -> declaration

border_left border is the border-left property.

val outline : outline -> declaration

outline outline is the outline property.

val outline_width : length -> declaration

outline_width width is the outline-width property.

val outline_style : outline_style -> declaration

outline_style style is the outline-style property.

val outline_color : color -> declaration

outline_color color is the outline-color property.

val outline_offset : length -> declaration

outline_offset offset is the outline-offset property.

val border_top_style : border_style -> declaration

border_top_style s is the border-top-style property.

val border_right_style : border_style -> declaration

border_right_style s is the border-right-style property.

val border_bottom_style : border_style -> declaration

border_bottom_style s is the border-bottom-style property.

val border_left_style : border_style -> declaration

border_left_style s is the border-left-style property.

val border_left_width : border_width -> declaration

border_left_width len is the border-left-width property.

val border_top_width : border_width -> declaration

border_top_width len is the border-top-width property.

val border_right_width : border_width -> declaration

border_right_width len is the border-right-width property.

val border_bottom_width : border_width -> declaration

border_bottom_width len is the border-bottom-width property.

val border_top_color : color -> declaration

border_top_color c is the border-top-color property.

val border_right_color : color -> declaration

border_right_color c is the border-right-color property.

val border_bottom_color : color -> declaration

border_bottom_color c is the border-bottom-color property.

val border_left_color : color -> declaration

border_left_color c is the border-left-color property.

type border_collapse =

| Collapse
| Separate
| Inherit

CSS border-collapse values

val border_collapse : border_collapse -> declaration

border_collapse value is the border-collapse property.

Transforms & Animations

Properties for 2D/3D transformations, CSS animations, and transitions. Based on multiple CSS specification modules for comprehensive animation support.

see https://www.w3.org/TR/css-transforms-1/
CSS Transforms Module Level 1

see https://www.w3.org/TR/css-animations-1/
CSS Animations Level 1

see https://www.w3.org/TR/css-transitions-1/
CSS Transitions Level 1

type transform =

| Translate of length * length option
| Translate_x of length
| Translate_y of length
| Translate_z of length
| Translate_3d of length * length * length
| Rotate of angle
| Rotate_x of angle
| Rotate_y of angle
| Rotate_z of angle
| Rotate_3d of float * float * float * angle
| Scale of float * float option
| Scale_x of float
| Scale_y of float
| Scale_z of float
| Scale_3d of float * float * float
| Skew of angle * angle option
| Skew_x of angle
| Skew_y of angle
| Matrix of float * float * float * float * float * float
| Matrix_3d of float * float * float * float * float * float * float * float * float * float * float * float * float * float * float * float
| Perspective of length
| None
| Inherit
| Var of transform var
| List of transform list

CSS transform values

val transform : transform -> declaration

transform t is the transform property with a single transformation.

val transforms : transform list -> declaration

transforms ts is the transform property with multiple transformations.

type transform_origin =

| Center
| Left
| Right
| Top
| Bottom
| Left_top
| Left_center
| Left_bottom
| Right_top
| Right_center
| Right_bottom
| Center_top
| Center_bottom
| Top_left
| Top_right
| Bottom_left
| Bottom_right
| X of length
(*
Single x-offset, y defaults to 50%.
*)
| XY of length * length
| XYZ of length * length * length
| Inherit
(*
Transform origin (2D or 3D).
*)

val origin : length -> length -> transform_origin

origin x y is a transform-origin helper for 2D positions.

val origin3d : length -> length -> length -> transform_origin

origin3d x y z is a transform-origin helper for 3D positions.

val transform_origin : transform_origin -> declaration

transform_origin origin is the transform-origin property.

val rotate : angle -> declaration

rotate angle is the rotate property.

val perspective : length -> declaration

perspective perspective is the perspective property (3D transforms).

type perspective_origin =

| Perspective_center
| Perspective_top
| Perspective_bottom
| Perspective_left
| Perspective_right
| Perspective_top_left
| Perspective_top_right
| Perspective_bottom_left
| Perspective_bottom_right
| Perspective_xy of length * length
(*
Custom x, y coordinates
*)

CSS perspective-origin values for 3D transforms.

val perspective_origin : perspective_origin -> declaration

perspective_origin origin is the perspective-origin property.

type transform_style =

| Flat
| Preserve_3d
| Inherit

CSS transform-style values

val transform_style : transform_style -> declaration

transform_style style is the transform-style property (3D transforms).

type steps_direction =

| Jump_start
| Jump_end
| Jump_none
| Jump_both
| Start
| End

CSS steps direction values.

type timing_function =

| Ease
| Linear
| Ease_in
| Ease_out
| Ease_in_out
| Step_start
| Step_end
| Steps of int * steps_direction option
| Cubic_bezier of float * float * float * float
| Var of timing_function var

CSS animation timing function values.

type duration =

| Ms of float
(*
milliseconds
*)
| S of float
(*
seconds
*)
| Var of duration var
(*
CSS variable reference
*)

CSS duration values.

type transition_property_value =

| All
| None
| Property of string

CSS transition property value.

type transition_property = transition_property_value list

CSS transition property (list of property values).

type transition_shorthand = {

property : transition_property_value;
duration : duration option;
timing_function : timing_function option;
delay : duration option;

}

CSS transition shorthand values.

type transition =

| Inherit
| Initial
| None
| Var of transition var
| Shorthand of transition_shorthand
(*
CSS transition values.
*)

val transition_shorthand : 
  ?property:transition_property_value ->
  ?duration:duration ->
  ?timing_function:timing_function ->
  ?delay:duration ->
  unit ->
  transition

transition_shorthand ?property ?duration ?timing_function ?delay () is the transition shorthand.

property: CSS property to transition (defaults to All)
duration: transition duration
timing_function: easing function (ease, linear, ease-in, etc.)
delay: delay before transition starts.

val transition : transition -> declaration

transition transition is the transition property.

val transitions : transition list -> declaration

transitions values is the transition property from a comma-separated list.

val transition_timing_function : timing_function -> declaration

transition_timing_function tf is the transition-timing-function property.

val transition_duration : duration -> declaration

transition_duration dur is the transition-duration property.

val transition_delay : duration -> declaration

transition_delay delay is the transition-delay property.

val transition_property : transition_property -> declaration

transition_property v is the transition-property property.

val transition_behavior : Properties.transition_behavior -> declaration

transition_behavior v is the transition-behavior property.

type animation_fill_mode =

| None
| Forwards
| Backwards
| Both

CSS animation fill mode values

type animation_direction =

| Normal
| Reverse
| Alternate
| Alternate_reverse

CSS animation direction values

type animation_play_state =

| Running
| Paused

CSS animation play state values

type animation_iteration_count =

| Num of float
| Infinite

CSS animation iteration count values

type animation_shorthand = {

name : string option;
duration : duration option;
timing_function : timing_function option;
delay : duration option;
iteration_count : animation_iteration_count option;
direction : animation_direction option;
fill_mode : animation_fill_mode option;
play_state : animation_play_state option;

}

CSS animation shorthand values

type animation =

| Inherit
| Initial
| None
| Var of animation var
| Shorthand of animation_shorthand
(*
CSS animation values
*)

val animation_shorthand : 
  ?name:string ->
  ?duration:duration ->
  ?timing_function:timing_function ->
  ?delay:duration ->
  ?iteration_count:animation_iteration_count ->
  ?direction:animation_direction ->
  ?fill_mode:animation_fill_mode ->
  ?play_state:animation_play_state ->
  unit ->
  animation

animation_shorthand ?name ?duration ?timing_function ?delay ?iteration_count ?direction ?fill_mode ?play_state () is the animation shorthand.

name: animation name
duration: animation duration
timing_function: easing function
delay: delay before animation starts
iteration_count: number of iterations (or Infinite)
direction: animation direction (normal, reverse, alternate, etc.)
fill_mode: how styles apply before/after animation
play_state: running or paused.

val animation : animation -> declaration

animation props is the animation shorthand property.

val animation_name : string -> declaration

animation_name name is the animation-name property.

val animation_duration : duration -> declaration

animation_duration dur is the animation-duration property.

val animation_timing_function : timing_function -> declaration

animation_timing_function tf is the animation-timing-function property.

val animation_delay : duration -> declaration

animation_delay delay is the animation-delay property.

val animation_iteration_count : animation_iteration_count -> declaration

animation_iteration_count count is the animation-iteration-count property.

val animation_direction : animation_direction -> declaration

animation_direction dir is the animation-direction property.

val animation_fill_mode : animation_fill_mode -> declaration

animation_fill_mode mode is the animation-fill-mode property.

val animation_play_state : animation_play_state -> declaration

animation_play_state state is the animation-play-state property.

Visual Effects

Properties for visual effects including shadows, filters, clipping, and other advanced rendering features.

see https://www.w3.org/TR/filter-effects-1/
Filter Effects Module Level 1

see https://www.w3.org/TR/css-masking-1/
CSS Masking Module Level 1

val box_shadow : shadow -> declaration

box_shadow shadow is the box-shadow property.

val box_shadows : shadow list -> declaration

box_shadows values is the box-shadow property.

type number =

| Num of float
(*
Number value
*)
| Var of number var
(*
CSS variable reference
*)

CSS number values (unitless numbers for filters, transforms, etc.)

type scale =

| X of number_percentage
| XY of number_percentage * number_percentage
| XYZ of number_percentage * number_percentage * number_percentage
| None
| Var of scale var

CSS scale property values

val scale : scale -> declaration

scale scale is the scale property.

type translate_value =

| X of length
| XY of length * length
| XYZ of length * length * length
| None
| Var of translate_value var

val translate : translate_value -> declaration

translate v is the translate property.

type filter =

| None
(*
No filter
*)
| Blur of length
(*
blur(px)
*)
| Brightness of number
(*
brightness(%)
*)
| Contrast of number
(*
contrast(%)
*)
| Drop_shadow of shadow
(*
drop-shadow(...)
*)
| Grayscale of number
(*
grayscale(%)
*)
| Hue_rotate of angle
(*
hue-rotate(deg)
*)
| Invert of number
(*
invert(%)
*)
| Opacity of number
(*
opacity(%)
*)
| Saturate of number
(*
saturate(%)
*)
| Sepia of number
(*
sepia(%)
*)
| Url of string
(*
url(...)
*)
| List of filter list
(*
Multiple filters
*)
| Var of filter var
(*
Custom filter variable
*)

CSS filter values

val filter : filter -> declaration

filter values is the filter property.

val backdrop_filter : filter -> declaration

backdrop_filter values is the backdrop-filter property.

type clip =

| Clip_auto
| Clip_rect of length * length * length * length
(*
top, right, bottom, left
*)

CSS clip property values (deprecated, but needed for sr-only).

type clip_path =

| Clip_path_none
| Clip_path_url of string
| Clip_path_inset of length * length option * length option * length option
(*
inset(top, right?, bottom?, left?) - supports 1-4 values
*)
| Clip_path_circle of length
(*
Circle with radius
*)
| Clip_path_ellipse of length * length
(*
Ellipse with rx, ry
*)
| Clip_path_polygon of (length * length) list
| Clip_path_path of string
(*
SVG path data
*)

CSS clip-path property values for clipping regions.

val clip : clip -> declaration

clip clip is the clip property (deprecated).

val clip_path : clip_path -> declaration

clip_path path is the clip-path property.

val mask : string -> declaration

mask mask is the mask property.

val mix_blend_mode : blend_mode -> declaration

mix_blend_mode mode is the mix-blend-mode property.

val background_blend_mode : blend_mode -> declaration

background_blend_mode values is the background-blend-mode property.

User Interaction

Properties that affect user interaction with elements including cursor appearance, user selection behavior, and pointer events.

see https://www.w3.org/TR/css-ui-4/
CSS Basic User Interface Module Level 4

type cursor =

| Auto
| Default
| None
| Context_menu
| Help
| Pointer
| Progress
| Wait
| Cell
| Crosshair
| Text
| Vertical_text
| Alias
| Copy
| Move
| No_drop
| Not_allowed
| Grab
| Grabbing
| E_resize
| N_resize
| Ne_resize
| Nw_resize
| S_resize
| Se_resize
| Sw_resize
| W_resize
| Ew_resize
| Ns_resize
| Nesw_resize
| Nwse_resize
| Col_resize
| Row_resize
| All_scroll
| Zoom_in
| Zoom_out
| Url of string * (float * float) option * cursor
| Inherit

CSS cursor values.

type user_select =

| None
| Auto
| Text
| All
| Contain

CSS user-select values.

type resize =

| None
| Both
| Horizontal
| Vertical
| Block
| Inline
| Inherit

CSS resize values.

type print_color_adjust =

| Economy
| Exact
| Initial
| Inherit
| Unset

CSS print-color-adjust values.

val cursor : cursor -> declaration

cursor cursor is the cursor property.

type pointer_events =

| Auto
| None
| Visible_painted
| Visible_fill
| Visible_stroke
| Visible
| Painted
| Fill
| Stroke
| All
| Inherit

CSS pointer-events values

val pointer_events : pointer_events -> declaration

pointer_events events is the pointer-events property.

val user_select : user_select -> declaration

user_select select is the user-select property.

val webkit_user_select : user_select -> declaration

webkit_user_select select is the -webkit-user-select property.

val resize : resize -> declaration

resize resize is the resize property.

val print_color_adjust : print_color_adjust -> declaration

print_color_adjust v is the print-color-adjust property.

val background_origin : background_box -> declaration

background_origin v is the background-origin property.

val background_clip : background_box -> declaration

background_clip v is the background-clip property.

Container Queries & Containment

CSS container queries and containment features for component-based responsive design and performance optimization through layout isolation.

see https://www.w3.org/TR/css-contain-3/
CSS Containment Module Level 3

see https://www.w3.org/TR/css-contain-2/
CSS Containment Module Level 2

aspect_ratio ratio is the aspect-ratio property.

type container_type =

| Size
| Inline_size
| Scroll_state
| Normal

CSS container-type values

val container_type : container_type -> declaration

container_type type_ is the container-type property for container queries.

val container_name : string -> declaration

container_name name is the container-name property.

type contain =

| None
| Strict
| Content
| Size
| Layout
| Style
| Paint
| List of contain list

CSS contain values

val contain : contain -> declaration

contain contain is the contain property.

Advanced Features

Specialized functionality for advanced CSS features and legacy support.

Vendor-Specific Properties

Vendor-prefixed properties for browser compatibility and legacy support. These are implementation-specific extensions that may be needed for older browsers.

see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Extensions
MDN: CSS Extensions

type webkit_box_orient =

| Horizontal
| Vertical
| Inherit

CSS webkit-box-orient values.

type webkit_line_clamp =

| Lines of int
| Unset

CSS -webkit-line-clamp values.

type webkit_appearance =

| None
(*
No appearance styling
*)
| Auto
(*
Default browser styling
*)
| Button
(*
Button appearance
*)
| Textfield
(*
Text field appearance
*)
| Menulist
(*
Select/dropdown appearance
*)
| Listbox
(*
List box appearance
*)
| Checkbox
(*
Checkbox appearance
*)
| Radio
(*
Radio button appearance
*)
| Push_button
(*
Push button appearance
*)
| Square_button
(*
Square button appearance
*)
| Inherit
(*
Inherit from parent
*)

CSS -webkit-appearance values.

type webkit_font_smoothing =

| Auto
| None
| Antialiased
| Subpixel_antialiased
| Inherit

CSS -webkit-font-smoothing values.

type moz_osx_font_smoothing =

| Auto
| Grayscale
| Inherit

CSS -moz-osx-font-smoothing values.

val webkit_appearance : webkit_appearance -> declaration

webkit_appearance app is the -webkit-appearance property.

val webkit_font_smoothing : webkit_font_smoothing -> declaration

webkit_font_smoothing smoothing is the -webkit-font-smoothing property.

val moz_osx_font_smoothing : moz_osx_font_smoothing -> declaration

moz_osx_font_smoothing smoothing is the -moz-osx-font-smoothing property.

val webkit_tap_highlight_color : color -> declaration

webkit_tap_highlight_color color is the -webkit-tap-highlight-color property.

val webkit_text_decoration : text_decoration -> declaration

webkit_text_decoration decoration is the WebKit-only -webkit-text-decoration property.

val webkit_text_decoration_color : color -> declaration

webkit_text_decoration_color color is the WebKit-only -webkit-text-decoration-color property.

val webkit_line_clamp : webkit_line_clamp -> declaration

webkit_line_clamp clamp is the WebKit-only -webkit-line-clamp property.

val webkit_box_orient : webkit_box_orient -> declaration

webkit_box_orient orient is the WebKit-only -webkit-box-orient property.

val webkit_hyphens : hyphens -> declaration

webkit_hyphens hyphens is the WebKit-only -webkit-hyphens property.

val webkit_text_size_adjust : text_size_adjust -> declaration

webkit_text_size_adjust adjust is the WebKit-only -webkit-text-size-adjust property.

Additional Properties

Specialized CSS properties organized by their functional purpose.

Lists & Tables

Properties for styling HTML lists and tables.

type list_style_type =

| None
| Disc
| Circle
| Square
| Decimal
| Lower_alpha
| Upper_alpha
| Lower_roman
| Upper_roman

CSS list-style-type values

type list_style_image =

| None
| Url of string
| Inherit

CSS list-style-image values

val list_style_type : list_style_type -> declaration

list_style_type lst is the list-style-type property.

val list_style_image : list_style_image -> declaration

list_style_image img is the list-style-image property.

type table_layout =

| Auto
| Fixed
| Inherit

type vertical_align =

| Baseline
| Top
| Middle
| Bottom
| Text_top
| Text_bottom
| Sub
| Super
| Px of float
| Rem of float
| Em of float
| Pct of float
| Inherit

val table_layout : table_layout -> declaration

table_layout value is the table-layout property.

val vertical_align : vertical_align -> declaration

vertical_align value is the vertical-align property.

val list_style : string -> declaration

list_style value is the list-style shorthand property.

val border_spacing : length -> declaration

border_spacing value is the border-spacing property.

SVG Properties

Properties specific to SVG rendering and styling.

type svg_paint =

| None
(*
No paint
*)
| Current_color
(*
Current color value
*)
| Color of color
(*
Specific color value
*)
| Url of string * svg_paint option
(*
url(#id) with optional fallback
*)

SVG paint values for fill and stroke properties

val fill : svg_paint -> declaration

fill paint is the SVG fill property.

val stroke : svg_paint -> declaration

stroke paint is the SVG stroke property.

val stroke_width : length -> declaration

stroke_width width is the SVG stroke-width property.

Scroll & Touch

Properties for scroll behavior and touch interaction.

type touch_action =

| Auto
| None
| Pan_x
| Pan_y
| Manipulation
| Inherit

CSS touch-action values

type scroll_snap_strictness =

| Mandatory
| Proximity
| Var of scroll_snap_strictness var

CSS scroll-snap-strictness values

type scroll_snap_axis =

| None
| X
| Y
| Block
| Inline
| Both
| Var of scroll_snap_axis var

CSS scroll-snap axis values

type scroll_snap_type =

| Axis of scroll_snap_axis
| Axis_with_strictness of scroll_snap_axis * scroll_snap_strictness
| Inherit
| Var of scroll_snap_type var

CSS scroll-snap-type values

type scroll_snap_align =

| None
| Start
| End
| Center

CSS scroll-snap-align values

val touch_action : touch_action -> declaration

touch_action action is the touch-action property.

val scroll_snap_type : scroll_snap_type -> declaration

scroll_snap_type type_ is the scroll-snap-type property.

val scroll_snap_align : scroll_snap_align -> declaration

scroll_snap_align align is the scroll-snap-align property.

type scroll_snap_stop =

| Normal
| Always
| Inherit

CSS scroll-snap-stop values

val scroll_snap_stop : scroll_snap_stop -> declaration

scroll_snap_stop stop is the scroll-snap-stop property.

type scroll_behavior =

| Auto
| Smooth
| Inherit

CSS scroll behavior values

val scroll_behavior : scroll_behavior -> declaration

scroll_behavior behavior is the scroll-behavior property for smooth scrolling.

val scroll_margin : length -> declaration

scroll_margin margin is the scroll-margin property.

val scroll_margin_top : length -> declaration

scroll_margin_top margin is the scroll-margin-top property.

val scroll_margin_right : length -> declaration

scroll_margin_right margin is the scroll-margin-right property.

val scroll_margin_bottom : length -> declaration

scroll_margin_bottom margin is the scroll-margin-bottom property.

val scroll_margin_left : length -> declaration

scroll_margin_left margin is the scroll-margin-left property.

val scroll_padding : length -> declaration

scroll_padding padding is the scroll-padding property.

val scroll_padding_top : length -> declaration

scroll_padding_top padding is the scroll-padding-top property.

val scroll_padding_right : length -> declaration

scroll_padding_right padding is the scroll-padding-right property.

val scroll_padding_bottom : length -> declaration

scroll_padding_bottom padding is the scroll-padding-bottom property.

val scroll_padding_left : length -> declaration

scroll_padding_left padding is the scroll-padding-left property.

type overscroll_behavior =

| Auto
| Contain
| None
| Inherit

CSS overscroll behavior values

val overscroll_behavior : overscroll_behavior -> declaration

overscroll_behavior behavior is the overscroll-behavior property.

val overscroll_behavior_x : overscroll_behavior -> declaration

overscroll_behavior_x behavior is the overscroll-behavior-x property.

val overscroll_behavior_y : overscroll_behavior -> declaration

overscroll_behavior_y behavior is the overscroll-behavior-y property.

val accent_color : color -> declaration

accent_color color is the accent-color property for form controls.

val caret_color : color -> declaration

caret_color color is the caret-color property for the text input cursor.

Miscellaneous

Other properties that don't fit into specific categories.

val forced_color_adjust : forced_color_adjust -> declaration

forced_color_adjust adjust is the forced-color-adjust property.

type appearance =

| None
| Auto
| Button
| Textfield
| Menulist
| Inherit

val appearance : appearance -> declaration

appearance app is the appearance property.

val tab_size : int -> declaration

tab_size size is the tab-size property.

val font_variation_settings : font_variation_settings -> declaration

font_variation_settings settings is the font-variation-settings property.

Custom Properties

Type-safe CSS custom properties (CSS variables) with GADT-based type checking.

type _ kind =

| Length : length kind
| Color : color kind
| Rgb : rgb kind
| Int : int kind
| Float : float kind
| Percentage : percentage kind
| Number_percentage : number_percentage kind
| String : string kind
| Duration : duration kind
| Aspect_ratio : aspect_ratio kind
| Border_style : border_style kind
| Outline_style : outline_style kind
| Border : border kind
| Font_weight : font_weight kind
| Line_height : line_height kind
| Font_family : font_family kind
| Font_feature_settings : font_feature_settings kind
| Font_variation_settings : font_variation_settings kind
| Font_variant_numeric : font_variant_numeric kind
| Font_variant_numeric_token : font_variant_numeric_token kind
| Blend_mode : blend_mode kind
| Scroll_snap_strictness : scroll_snap_strictness kind
| Angle : angle kind
| Shadow : shadow kind
| Box_shadow : shadow kind
| Content : content kind
| Gradient_stop : gradient_stop kind
| Gradient_direction : gradient_direction kind
| Animation : animation kind
| Timing_function : timing_function kind
| Transform : transform kind

Value kind GADT for typed custom properties

type meta

The type for CSS variable metadata.

val var_meta : 'a var -> meta option

var_meta v is the optional metadata associated with v.

val meta : unit -> ('a -> meta) * (meta -> 'a option)

meta () is an injection/projection pair for metadata. The injection function converts a value to metadata, the projection function attempts to extract the value back.

val var_ref : 
  ?fallback:'a fallback ->
  ?default:'a ->
  ?layer:string ->
  ?meta:meta ->
  string ->
  'a var

var_ref ?fallback ?default ?layer ?meta name is a CSS variable reference. This is primarily for the CSS parser to create var() references.

name is the variable name (without the -- prefix)
fallback is used inside var(--name, fallback) in CSS output
default is the resolved value when mode is Inline
layer is an optional CSS layer name
meta is optional metadata.

CSS `@property` Support

type 'a syntax =

| Length : length syntax
| Color : color syntax
| Number : float syntax
| Integer : int syntax
| Percentage : percentage syntax
| Length_percentage : length_percentage syntax
| Angle : angle syntax
| Time : duration syntax
| Custom_ident : string syntax
| String : string syntax
| Url : string syntax
| Image : string syntax
| Transform_function : string syntax
| Universal : string syntax
| Or : 'a syntax * 'b syntax -> ('a, 'b) Either.t syntax
| Plus : 'a syntax -> 'a list syntax
| Hash : 'a syntax -> 'a list syntax
| Question : 'a syntax -> 'a option syntax
| Brackets : string -> string syntax
(*
Type-safe syntax descriptors for CSS @property rules.
*)

val property : 
  name:string ->
  'a syntax ->
  ?initial_value:'a ->
  ?inherits:bool ->
  unit ->
  t

property ~name syntax ?initial_value ?inherits () creates a @property rule for registering a custom CSS property with type-safe syntax and initial value.

Examples:

property ~name:"--my-color" Variables.Color ~initial_value:(hex "#ff0000") ()
property ~name:"--my-size" Variables.Length ~initial_value:(Px 10.) ()

See MDN @property.

val var : 
  ?default:'a ->
  ?fallback:'a fallback ->
  ?layer:string ->
  ?meta:meta ->
  string ->
  'a kind ->
  'a ->
  declaration * 'a var

var ?default ?fallback ?layer name kind value returns a declaration and a variable handle.

name is the variable name without the -- prefix
kind specifies the value type (Length, Color, Angle, Float, etc.)
default specifies the value to use in inline mode instead of var() reference
fallback is used inside var(--name, fallback) in CSS output
layer is an optional CSS layer name where the variable should be placed

Example:

  let def_radius, radius_var = var "radius-md" Length (Rem 0.5) in
  rule ~selector:".card" [ def_radius; border_radius (Var radius_var) ]

The returned radius_var must be wrapped with Var when used in CSS properties. In variables mode, it emits "--radius-md: 0.5rem" and uses "var(--radius-md)". In inline mode, it uses "0.5rem" directly when the default equals the defined value.

val meta_of_declaration : declaration -> meta option

meta_of_declaration decl extracts metadata from a declaration if it has any.

val custom_property : ?layer:string -> string -> string -> declaration

custom_property ?layer name value is a CSS custom property declaration.

For type-safe variable declarations and usage, prefer using the var API which provides compile-time checking and automatic variable management.

parameter layer
Optional CSS layer name for the custom property

parameter name
CSS custom property name (must start with --)

parameter value
CSS value as string

Example: custom_property "--primary-color" "#3b82f6"

See also var (type-safe CSS variable API).

val custom_declaration_name : declaration -> string option

custom_declaration_name decl is the variable name if decl is a custom property declaration, None otherwise.

val custom_declaration_layer : declaration -> string option

custom_declaration_layer decl is the declared layer for a custom property declaration if present (e.g., "theme" or "utilities"). It is None for non-custom declarations or when no layer metadata is attached.

Rendering & Optimization

CSS output generation and performance optimization tools.

Rendering

Functions for converting CSS structures to string output.

type mode =

| Variables
| Inline
(*
Rendering mode for CSS output.
- Variables: Standard rendering with CSS custom properties support
- Inline: For inline styles (no at-rules, variables expanded with their values)
*)

val to_string : 
  ?minify:bool ->
  ?optimize:bool ->
  ?mode:mode ->
  ?newline:bool ->
  t ->
  string

to_string ?minify ?optimize ?mode ?newline stylesheet renders a complete stylesheet to CSS.

If minify is true, the output will be compact (no unnecessary whitespace).
If optimize is true, rule-level optimizations are applied (deduplication, merging consecutive rules, combining identical rules).
mode controls variable layer emission behavior.
If newline is true (default), adds a trailing newline for POSIX compliance.

see https://developer.mozilla.org/en-US/docs/Web/CSS
"MDN: CSS".

val pp : 
  ?minify:bool ->
  ?optimize:bool ->
  ?mode:mode ->
  ?newline:bool ->
  t ->
  string

pp is to_string.

type parse_error = Reader.parse_error

val pp_parse_error : parse_error -> string

pp_parse_error error formats a parse error as a string, including call stack if available.

val of_string : ?filename:string -> string -> (t, parse_error) result

of_string ?filename css parses a CSS string into a stylesheet. Returns Error error on invalid CSS. The optional filename parameter is used for error reporting (defaults to "<string>").

Optimization

Tools for optimizing CSS output for performance and file size.

val optimize : t -> t

optimize stylesheet applies CSS optimizations to the stylesheet, including merging consecutive identical selectors and combining rules with identical properties. Preserves CSS cascade semantics.

type will_change =

| Will_change_auto
| Scroll_position
| Contents
| Transform
| Opacity
| Properties of string list
(*
Custom CSS property names
*)

CSS will-change property values for performance optimization hints.

val will_change : will_change -> declaration

will_change value is the will-change property for performance optimization.

val inline_style_of_declarations : 
  ?optimize:bool ->
  ?minify:bool ->
  ?mode:mode ->
  ?newline:bool ->
  declaration list ->
  string

inline_style_of_declarations declarations converts a list of declarations to an inline style string.

Pretty-printing functions for types

val pp_display : display Pp.t

pp_display is the pretty printer for display values.

val pp_position : position Pp.t

pp_position is the pretty printer for position values.

val pp_length : ?always:bool -> length Pp.t

pp_length ?always is the pretty printer for length values. When always is true, units are always included even for zero values.

val pp_color : color Pp.t

pp_color is the pretty printer for color values.

val pp_angle : angle Pp.t

pp_angle is the pretty printer for angle values.

val pp_duration : duration Pp.t

pp_duration is the pretty printer for duration values.

val pp_font_weight : font_weight Pp.t

pp_font_weight is the pretty printer for font-weight values.

val pp_cursor : cursor Pp.t

pp_cursor is the pretty printer for cursor values.

val pp_animation : animation Pp.t

pp_animation is the pretty printer for animation values.

val pp_gradient_direction : gradient_direction Pp.t

pp_gradient_direction is the pretty printer for gradient directions.

val pp_transform : transform Pp.t

pp_transform is the pretty printer for transform values.

val pp_calc : 'a Pp.t -> 'a calc Pp.t

pp_calc pp_value is the pretty printer for calc expressions.

val pp_font_style : font_style Pp.t

pp_font_style is the pretty printer for font-style values.

val pp_text_align : text_align Pp.t

pp_text_align is the pretty printer for text-align values.

val pp_text_decoration : text_decoration Pp.t

pp_text_decoration is the pretty printer for text-decoration values.

val pp_text_transform : text_transform Pp.t

pp_text_transform is the pretty printer for text-transform values.

val pp_overflow : overflow Pp.t

pp_overflow is the pretty printer for overflow values.

val pp_border_style : border_style Pp.t

pp_border_style is the pretty printer for border-style values.

val pp_scroll_snap_strictness : scroll_snap_strictness Pp.t

pp_scroll_snap_strictness is the pretty printer for scroll-snap-strictness values.

val pp_flex_direction : flex_direction Pp.t

pp_flex_direction is the pretty printer for flex-direction values.

val pp_align_items : align_items Pp.t

pp_align_items is the pretty printer for align-items values.

val pp_justify_content : justify_content Pp.t

pp_justify_content is the pretty printer for justify-content values.

module Pp : sig ... end

Printer