# swiftcn class reference Every class that swiftcn's parser accepts with the standard theme and default rules. Apply classes with `.tw("…")` on a view, `.buttonStyle(.tw("…"))` on a button, or the typed equivalents such as `.tw(.p(4), .bg(.surface))`. Later classes replace earlier ones by property within one `.tw` call. Unknown classes leave the whole surface unstyled at run time, and `swiftcn-lint` reports them at build time. Classes are not Tailwind's full set. Only the names below are valid; there are no responsive breakpoints, flex or grid utilities, percentages, `rem`, `calc`, or CSS variables. ## Variants Prefix a class with `variant:`. Combine variants, as in `disabled:hover:opacity-20`. `hover:` `focus:` `active:` `pressed:` `disabled:` `motion-reduce:` `motion-safe:` `group-hover:` `group-focus:` `group-active:` `group-pressed:` `group-disabled:` Group variants accept a group name: `group-hover/hero:opacity-70`. ## Spacing and size - `p-{n} px-{n} py-{n} pt-{n} pb-{n} ps-{n} pe-{n}`: Padding in theme units (4 points each by default). ps and pe use leading and trailing edges; pl and pr are aliases. Examples: `p-4` `px-6` `py-2.5`. - `w-{n} h-{n} min-h-{n}`: Width, height, and minimum height in theme units. Examples: `w-12` `h-10` `min-h-11`. - `w-full`: fill the available width. - `h-full`: fill the available height. ## Typography - Sizes (scalable Dynamic Type styles): `text-xs` `text-sm` `text-base` `text-lg` `text-xl` `text-2xl` `text-3xl` - Weights: `font-bold` `font-light` `font-medium` `font-normal` `font-regular` `font-semibold` - Alignment: `text-start` `text-center` `text-end` - Line limits: `line-clamp-{n}`, `line-clamp-none` ## Color Theme colors, usable with `text-`, `bg-`, `border-`, `tint-`, and `glass-tint-`: `accent` `accent-foreground` `background` `border` `card` `card-foreground` `destructive` `destructive-foreground` `foreground` `input` `muted` `muted-foreground` `mutedForeground` `onAccent` `onDestructive` `onPrimary` `primary` `primary-foreground` `ring` `surface` `tint` For example `text-muted-foreground`, `bg-surface`, `border-input`, `tint-primary`. Arbitrary colors use brackets: `bg-[#6366f1]`, `text-[#fff]`, `border-[color:#6366f180]`. ## Borders, corners, and shadows - Borders: `border` (1 point, theme border color), `border-{n}` (width in points), `border-{color}` - Corners: `rounded` (md), `rounded-none` `rounded-sm` `rounded-md` `rounded-lg` `rounded-xl` `rounded-full` - Shadows: `shadow` (sm), `shadow-none` `shadow-sm` `shadow-md` `shadow-lg` - Opacity: `opacity-{0…100}` ## Surfaces and Liquid Glass `surface-floating` `surface-solid` `glass` `glass-prominent` `glass-interactive` `surface-floating` is Liquid Glass on iOS 26 and macOS 26, a material on earlier systems, and solid under Reduce Transparency. `bg-*` sets the color of a solid surface; it never stacks under glass. ## Native buttons and controls Use with `.buttonStyle(.tw("…"))`. Apple draws the button. - Recipes: `button-primary` `button-secondary` `button-outline` `button-destructive` `button-ghost` `button-link` - Styles: `bezel-prominent` `bezel-bordered` `bezel-borderless` `bezel-link` `glass` `glass-prominent` - Size: `control-mini` `control-sm` `control-md` `control-lg` `control-xl` - Tint: `tint-{color}` or `tint-[#hex]` ## Animation - Presets: `animate-bouncy` `animate-ease-in` `animate-ease-in-out` `animate-ease-out` `animate-linear` `animate-none` `animate-smooth` `animate-snappy` `animate-spring` - Timing: `duration-{ms}` `delay-{ms}` (default duration 300) ## Groups and shared elements - `group`, `group/{name}` - `shared-[{id}]`, `shared-[{id}]/{group}` - `shared-frame` `shared-position` `shared-size` `shared-source` `shared-follower` ## Arbitrary values Brackets take native units: bare lengths are points, bare times are milliseconds, bare angles are degrees. Underscores stand for spaces. Interpolation keeps native Swift values: `rotate-[\(angle)]`. | Prefix | Example | | --- | --- | | `w-[…]` | `w-[240]` | | `h-[…]` | `h-[80]` | | `size-[…]` | `size-[44]` | | `min-w-[…]` | `min-w-[80]` | | `max-w-[…]` | `max-w-[300]` | | `min-h-[…]` | `min-h-[44]` | | `max-h-[…]` | `max-h-[200]` | | `p-[…]` | `p-[13]` | | `px-[…]` | `px-[12]` | | `py-[…]` | `py-[8]` | | `pt-[…]` | `pt-[4]` | | `pb-[…]` | `pb-[4]` | | `ps-[…]` | `ps-[4]` | | `pe-[…]` | `pe-[4]` | | `pl-[…]` | `pl-[4]` | | `pr-[…]` | `pr-[4]` | | `rounded-[…]` | `rounded-[14]` | | `rounded-t-[…]` | `rounded-t-[20]` | | `rounded-b-[…]` | `rounded-b-[12]` | | `border-[…]` | `border-[1.5]` | | `text-[…]` | `text-[18]` | | `bg-[…]` | `bg-[#6366f1]` | | `tint-[…]` | `tint-[#ff7a59]` | | `glass-tint-[…]` | `glass-tint-[#ff7a59]` | | `opacity-[…]` | `opacity-[0.8]` | | `tracking-[…]` | `tracking-[0.5]` | | `line-spacing-[…]` | `line-spacing-[4]` | | `line-clamp-[…]` | `line-clamp-[2]` | | `offset-[…]` | `offset-[12,-4]` | | `scale-[…]` | `scale-[1.05]` | | `rotate-[…]` | `rotate-[3deg]` | | `blur-[…]` | `blur-[2]` | | `duration-[…]` | `duration-[400ms]` | | `delay-[…]` | `delay-[75ms]` | | `shared-[…]` | `shared-[cover]` | | `animate-[…]` | `animate-[\(value)]` (interpolated native value only) | ## Recipes Named classes that components use. Redefine them with `TWGlobalRules(named:)` or `.twRules { $0.named["card"] = "…" }`. `accordion` `accordion-item` `alert` `alert-description` `alert-title` `attachment` `avatar` `badge` `breadcrumb` `bubble` `button-destructive` `button-ghost` `button-group` `button-link` `button-outline` `button-primary` `button-secondary` `calendar` `calendar-day` `calendar-heading` `calendar-outside` `calendar-selected` `calendar-today` `calendar-weekday` `card` `card-content` `card-description` `card-footer` `card-header` `card-title` `carousel` `chart` `checkbox` `collapsible` `combobox` `command` `command-item` `command-search` `control-motion` `data-table` `date-picker` `date-picker-calendar` `dialog` `dialog-description` `dialog-footer` `dialog-title` `disclosure-motion` `drawer` `dropdown-content` `dropdown-item` `dropdown-label` `empty` `empty-description` `empty-title` `feedback-motion` `field` `field-description` `field-error` `field-group` `field-invalid` `field-label` `hover-card` `input` `input-group` `input-group-field` `input-otp` `item` `item-description` `item-title` `kbd` `label` `marker` `menu` `message` `message-meta` `pagination` `popover` `popover-motion` `presentation-dialog` `presentation-motion` `presentation-scrim` `presentation-sheet` `progress` `questionnaire` `radio-group` `resizable` `resizable-handle` `scroll-area` `select` `separator` `sidebar` `sidebar-content` `sidebar-footer` `sidebar-group` `sidebar-group-label` `sidebar-header` `sidebar-item-label` `sidebar-list` `sidebar-menu` `sidebar-menu-badge` `sidebar-menu-button` `sidebar-menu-selected` `sidebar-menu-sub` `sidebar-motion` `sidebar-scrim` `sidebar-trigger` `skeleton` `skeleton-motion` `slider` `spinner` `spinner-motion` `switch` `table` `table-caption` `table-cell` `table-header` `table-row` `table-row-selected` `tabs` `textarea` `toast` `toggle` `toggle-selected` `toggle-unselected` `tooltip` `typography` ## Custom classes Register your own with `TWGlobalRules`: `named` for recipes, `utilities` and `modifiers` for custom classes and argument prefixes, and `animations` for presets. `swiftcn-lint` learns names registered in source; list others in `swiftcn-lint.json`.