Tailwind Classes Reference

Complete reference for all Tailwind-style utility classes in Whitehall, with equivalent props and generated Kotlin/Compose output.

// Preferred: class syntax
<Column class="p-16 gap-8 items-center bg-primary rounded-lg">
  <Text class="text-lg font-bold">Title</Text>
</Column>

// Also works: prop syntax (use for dynamic values)
<Column p={dynamicPadding} gap={8}>
  <Text>Title</Text>
</Column>

Scale: Classes and props use a 1:1 scale. The number IS the dp value: p-16 = p={16} = 16dp

Override: Props override class values: class="p-4" p={8} results in 8dp padding

See it happen

Watch the chain change as classes are added.

<Box class="bg-primary">
  <Text>Card</Text>
</Box>

Spacing

Padding

<Column class="p-16">          // 16dp all sides
<Column class="px-16 py-8">    // 16dp horizontal, 8dp vertical
<Column class="pt-32 pb-16">   // 32dp top, 16dp bottom

Margin

Same pattern as padding (Compose uses outer padding for margin):

Gap

<Column class="gap-16">  // 16dp between children
<Row class="gap-8">      // 8dp between children

Sizing

Width

Height

Size (Both)

<Box class="w-full h-64">     // Full width, 64dp height
<Box class="w-1/2">           // 50% width
<Box class="size-48">         // 48dp x 48dp

Layout (Flex)

Cross-axis Alignment (items)

Main-axis Arrangement (justify)

Weight

<Column class="items-center justify-between">
<Row class="items-center gap-8">
<Box class="flex-1">

Scrollable

<Column class="overflow-scroll p-16">
  <Text>Scrollable content...</Text>
</Column>

<Row scrollable>
  <Image src="1.jpg" />
  <Image src="2.jpg" />
</Row>

Background

Semantic colors

Colors named for the job they do rather than the hue they are. These work under every preset, and they are what to reach for when a color should follow the app's theme instead of being pinned to a value.

Each takes the usual prefixes, and the usual opacity suffix:

<Column class="bg-background">
  <Card class="bg-card border border-border">
    <Text class="text-card-foreground">Title</Text>
    <Text class="text-muted-foreground">Subtitle</Text>
    <Button class="bg-destructive text-destructive-foreground" text="Delete" />
  </Card>
</Column>

Theme Colors

Hex Colors

Tailwind Palette Colors

Full Tailwind color palette with shades 50-950:

Available colors: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose

Available shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

Opacity Modifier

Use /N suffix (0-100) to apply alpha transparency:

<Box class="bg-primary">
<Box class="bg-[#FF5722]">
<Box class="bg-yellow">           // yellow-500
<Box class="bg-yellow-100">       // light yellow
<Box class="bg-red-500/20">       // red at 20% opacity

Gradients

Compiles to Brush.linearGradient(...), with the direction suffix mapped to Offsets. Stop colors use the same grammar as bg-* — theme tokens, Material roles, the Tailwind palette, arbitrary hex — each with the same /opacity suffix. A missing from-*/to-* stop defaults to transparent, matching Tailwind. bg-gradient-to-* wins over a plain bg-* on the same element, the way a CSS background-image layers over a background-color.

<Box class="bg-gradient-to-r from-blue-500 to-purple-500">
<Box class="bg-gradient-to-br from-yellow-400 via-orange-500 to-red-500">
<Card class="bg-gradient-to-b from-primary to-secondary">

Background images

A background can be an image as well as a colour or a gradient. The image itself is one value; everything about how it is drawn is its own class, the way Tailwind splits CSS's shorthand.

<Box background="url(/backgrounds/city.jpg)" class="bg-cover bg-center" />

Paths resolve against static/ at build time. backgroundPositionX and backgroundPositionY are morphable, which is how a background parallaxes against a scroll.

Blur, Blend and Clipping

blur-*

Blurs the element's own content — its fill, its border, anything inside it. Tailwind's names and Tailwind's values.

Like CSS's filter: blur(), it spreads outside the element's box. A rounded-* or overflow-hidden on the same element clips it back, exactly as overflow: hidden does on the web.

backdrop-blur-*

Blurs what is painted behind the element — a frosted panel over a photo or a scrolling list. Same scale, same names.

<Box class="w-full h-full">
  <Image src="/backgrounds/city.jpg" fit="cover" class="w-full h-full" />
  <Box class="backdrop-blur-xl bg-white/20 rounded-3xl p-32">
    <Text class="text-5xl">Blur!</Text>
  </Box>
</Box>

Nothing marks the content being sampled. The compiler works out what to blur: everything painted below the element in the same markup tree — preceding siblings at every level up the chain, which is CSS's own definition of a backdrop.

• Put the class where the backdrop is visible. A component whose own root says backdrop-blur-xl with nothing behind it in its own file is a build error. Pass the class at the use site instead — <FrostedCard class="backdrop-blur-xl" />.
• Name a pair when a screen has more than one, or to bound what gets recorded: backdrop/photo on the source, backdrop-blur-xl/photo on the panel. Tailwind's group/edit spelling.
• A child does not sample its own parent — recording an ancestor would record the consumer inside it. Put a background meant to be blurred beside the panel, not around it.

mix-blend-*

Blends the element with what is beneath it. Seventeen of Tailwind's eighteen names, mapped to Compose's BlendMode.

<Box class="mix-blend-plus-lighter" background="color(srgb-extended 2 2 2)" />
<Box class="mix-blend-soft-light bg-black/12" />

The lowering is picked per element: a fill with no children blends straight into the parent's canvas — one draw, no buffer — and anything else gets an offscreen layer, which is unavoidable, since you cannot blend a composite that does not exist yet.

overflow-hidden

Clips children to the element's bounds, including a blur-* that would otherwise spread past them. Pairs with rounded-* to clip to the corner radius.

<Box class="overflow-hidden rounded-2xl">
  <Image src={url} fit="cover" />
</Box>

Border Radius

Side-specific

<Card class="rounded-lg">
<Box class="rounded-full">
<Card class="rounded-t-xl">

Border

Border Width

A bare border is Tailwind's own default weight, 1 px — one physical pixel, not a flat 1.dp. At a fractional density (2.625× on the reference device) a flat 1.dp line rounds up to 3 physical pixels, nearly three times the hairline the browser renders. (1f / density).dp converts back to exactly one physical pixel whatever the density is. Every other width is a literal dp value; the overshoot is only dramatic at 1px.

Directional Borders

There is no per-edge Modifier.border in Compose, so a directional border compiles to a drawBehind that strokes only the requested edges. The border reserves its own space, the way a border-box edge adds to a content-sized element's height on the web: each active edge also gets a .padding() (for t/b) or .absolutePadding() (for l/r) — absolute, not start/end, because Tailwind's l/r are the physical sides, not the logical ones ps-/pe- already claim.

<Box class="border-b p-16">                    // hairline bottom rule
<Row class="border-t-2 border-primary">        // 2dp top rule, theme color
<Column class="border-x-4">                    // 4dp on both left and right

Border Colors

Edges share whatever border-{color} sets (or MaterialTheme.colorScheme.outline by default). There is no per-edge color — Tailwind's border-t-red-500 has no equivalent here.

<Box class="border-2 border-primary rounded-lg">
<Box class="border border-yellow-300 rounded">
<Box class="border border-black/10">   // subtle border

Shadow & Opacity

Shadow

With a theme, shadow-* is Tailwind's real box shadow — offset, blur, spread and color, most steps stacking two layers. Without one it stays the Material elevation it always was, so nothing that predates themes changes.

The bare shadow keeps pointing at the same visual weight it always had, so existing projects do not silently change when v4 shifted the whole scale down a step.

Opacity

<Card class="shadow-lg opacity-75">

Safe Area

Handle system UI insets (status bar, navigation bar):

<Column class="safe-top p-16">   // Avoid status bar overlap
<Column class="safe">            // Avoid both bars
<Column safeTop safeBottom>      // Prop syntax

Typography

Font Size

Font Weight

All nine weights are declared against the theme font's wght axis, so font-bold gets the typeface's real bold rather than a synthesized smear of the Regular master.

Font Family

FontFamily.Monospace is a Compose constant, not a project setting — the font key in Theming configures the body typeface, which is a different axis, so font-mono does not go through the theme layer. font-sans stays unmapped: in Tailwind it undoes a browser default Compose never had.

Letter Spacing

Tailwind's scale is in em, which maps directly onto Compose's TextStyle.letterSpacing. tracking-normal is an explicit 0em, not "unset" — Material's bodyLarge otherwise leaks letterSpacing = 0.5sp into every <Text>.

<Text class="text-xs tracking-wide font-medium">Section Label</Text>

Font Style & Decoration

Line Height (Leading)

Text Alignment

Text Color

Text Overflow

<Text class="text-lg font-bold text-primary">Title</Text>
<Text class="text-sm italic text-center">Subtitle</Text>
<Text class="truncate">Long text that gets cut off...</Text>
<Text class="line-clamp-2">Text limited to 2 lines...</Text>
<Text class="text-lg leading-relaxed">Comfortable reading</Text>

Complete Example

<Column class="p-16 gap-16 bg-surface">
  <Text class="text-2xl font-bold text-primary">Welcome</Text>

  <Card class="p-16 rounded-lg shadow-md">
    <Column class="gap-8">
      <Text class="text-lg font-medium">Card Title</Text>
      <Text class="text-sm text-secondary line-clamp-2">
        Description text that might be long...
      </Text>
    </Column>
  </Card>

  <Row class="gap-8 items-center justify-between">
    <Button class="flex-1" text="Cancel" />
    <Button class="flex-1 bg-primary" text="Submit" />
  </Row>
</Column>

See Also

• Theming - Where bg-card and the rounded-* scale come from
• Components - The shadcn component library
• Layout Components - Column, Row, Box
• Text Component - Text styling details
• Transitions - Page and element transitions
• Morph Drivers - Progress-driven animations