Documentation
Playground GitHub

Tailwind Classes Reference

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

Prefer classes over props. Classes are faster to write, more scannable, and consistent with web conventions. Use props only for dynamic/computed values.
<!-- 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

Spacing

Padding

ClassPropCompose Output
p-{n}p={n}.padding(n.dp)
px-{n}px={n}.padding(horizontal = n.dp)
py-{n}py={n}.padding(vertical = n.dp)
pt-{n}pt={n}.padding(top = n.dp)
pb-{n}pb={n}.padding(bottom = n.dp)
ps-{n}ps={n}.padding(start = n.dp)
pe-{n}pe={n}.padding(end = n.dp)
<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):

ClassPropCompose Output
m-{n}m={n}.padding(n.dp)
mx-{n}, my-{n}, etc.mx={n}, etc.Same pattern as padding

Gap

ClassPropCompose Output
gap-{n}gap={n}Arrangement.spacedBy(n.dp)
<Column class="gap-16">  <!-- 16dp between children -->
<Row class="gap-8">      <!-- 8dp between children -->

Sizing

Width

ClassPropCompose Output
w-{n}w={n}.width(n.dp)
w-fullwidth="100%".fillMaxWidth()
w-1/2width="50%".fillMaxWidth(0.5f)
w-1/3width="33%".fillMaxWidth(0.333f)
w-2/3width="67%".fillMaxWidth(0.667f)

Height

ClassPropCompose Output
h-{n}h={n}.height(n.dp)
h-fullheight="100%".fillMaxHeight()
h-1/2height="50%".fillMaxHeight(0.5f)

Size (Both)

ClassPropCompose Output
size-{n}size={n}.size(n.dp)
<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)

ClassColumnRow
items-startAlignment.StartAlignment.Top
items-centerAlignment.CenterHorizontallyAlignment.CenterVertically
items-endAlignment.EndAlignment.Bottom

Main-axis Arrangement (justify)

ClassCompose Output
justify-startArrangement.Start
justify-centerArrangement.Center
justify-endArrangement.End
justify-betweenArrangement.SpaceBetween
justify-aroundArrangement.SpaceAround
justify-evenlyArrangement.SpaceEvenly

Weight

ClassCompose Output
flex-1.weight(1f)
flex-grow.weight(1f)
<Column class="items-center justify-between">
<Row class="items-center gap-8">
<Box class="flex-1">

Scrollable

ClassPropCompose Output
overflow-scrollscrollable.verticalScroll(rememberScrollState()) (Column)
overflow-y-scrollscrollable="vertical".verticalScroll(rememberScrollState())
overflow-x-scrollscrollable="horizontal".horizontalScroll(rememberScrollState())
<Column class="overflow-scroll p-16">
  <Text>Scrollable content...</Text>
</Column>

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

Background

Theme Colors

ClassCompose Output
bg-primary.background(MaterialTheme.colorScheme.primary)
bg-secondary.background(MaterialTheme.colorScheme.secondary)
bg-surface.background(MaterialTheme.colorScheme.surface)
bg-error.background(MaterialTheme.colorScheme.error)
bg-transparent.background(Color.Transparent)
bg-white.background(Color.White)
bg-black.background(Color.Black)

Hex Colors

ClassCompose Output
bg-[#RRGGBB].background(Color(0xFFRRGGBB))

Tailwind Palette Colors

Full Tailwind color palette with shades 50-950:

ClassHex ValueCompose Output
bg-yellow#EAB308 (yellow-500).background(Color(0xFFEAB308))
bg-yellow-100#FEF9C3.background(Color(0xFFFEF9C3))
bg-yellow-500#EAB308.background(Color(0xFFEAB308))
bg-yellow-900#713F12.background(Color(0xFF713F12))
bg-blue-500#3B82F6.background(Color(0xFF3B82F6))
bg-red-500#EF4444.background(Color(0xFFEF4444))
bg-green-500#22C55E.background(Color(0xFF22C55E))

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:

ClassCompose Output
bg-red-500/20.background(Color(0x33EF4444))
bg-blue/50.background(Color(0x803B82F6))
bg-white/80.background(Color(0xCCFFFFFF))
bg-black/10.background(Color(0x1A000000))
bg-primary/50.background(MaterialTheme.colorScheme.primary.copy(alpha = 0.5f))
<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 -->

Border Radius

Classdp ValueCompose Output
rounded-none0dpRoundedCornerShape(0.dp)
rounded-sm2dpRoundedCornerShape(2.dp)
rounded4dpRoundedCornerShape(4.dp)
rounded-md6dpRoundedCornerShape(6.dp)
rounded-lg8dpRoundedCornerShape(8.dp)
rounded-xl12dpRoundedCornerShape(12.dp)
rounded-2xl16dpRoundedCornerShape(16.dp)
rounded-3xl24dpRoundedCornerShape(24.dp)
rounded-fullCircleCircleShape

Side-specific

ClassDescription
rounded-t-{size}Top corners only
rounded-b-{size}Bottom corners only
rounded-s-{size}Start corners only
rounded-e-{size}End corners only
<Card class="rounded-lg">
<Box class="rounded-full">
<Card class="rounded-t-xl">

Border

Border Width

ClassCompose Output
border.border(1.dp, ...)
border-0No border
border-2.border(2.dp, ...)
border-4.border(4.dp, ...)

Border Colors

ClassCompose Output
border-primary.border(..., MaterialTheme.colorScheme.primary)
border-outline.border(..., MaterialTheme.colorScheme.outline)
border-white.border(..., Color.White)
border-black.border(..., Color.Black)
border-yellow.border(..., Color(0xFFEAB308))
border-blue-300.border(..., Color(0xFF93C5FD))
border-black/10.border(..., Color(0x1A000000))
<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 (Elevation)

Classdp ValueCompose Output
shadow-none0dpelevation = 0.dp
shadow-sm2dpelevation = 2.dp
shadow4dpelevation = 4.dp
shadow-md6dpelevation = 6.dp
shadow-lg10dpelevation = 10.dp
shadow-xl16dpelevation = 16.dp
shadow-2xl24dpelevation = 24.dp

Opacity

ClassAlphaCompose Output
opacity-00%.alpha(0f)
opacity-2525%.alpha(0.25f)
opacity-5050%.alpha(0.5f)
opacity-7575%.alpha(0.75f)
opacity-100100%.alpha(1f)
<Card class="shadow-lg opacity-75">

Safe Area

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

ClassPropCompose Output
safesafeArea.windowInsetsPadding(WindowInsets.systemBars)
safe-topsafeTop.windowInsetsPadding(WindowInsets.statusBars)
safe-bottomsafeBottom.windowInsetsPadding(WindowInsets.navigationBars)
<Column class="safe-top p-16">   <!-- Avoid status bar overlap -->
<Column class="safe">            <!-- Avoid both bars -->
<Column safeTop safeBottom>      <!-- Prop syntax -->

Typography

Font Size

Classsp ValueCompose Output
text-xs12spfontSize = 12.sp
text-sm14spfontSize = 14.sp
text-base16spfontSize = 16.sp
text-lg18spfontSize = 18.sp
text-xl20spfontSize = 20.sp
text-2xl24spfontSize = 24.sp
text-3xl30spfontSize = 30.sp
text-4xl36spfontSize = 36.sp

Font Weight

ClassCompose Output
font-thinFontWeight.Thin
font-lightFontWeight.Light
font-normalFontWeight.Normal
font-mediumFontWeight.Medium
font-semiboldFontWeight.SemiBold
font-boldFontWeight.Bold
font-extraboldFontWeight.ExtraBold
font-blackFontWeight.Black

Font Style & Decoration

ClassCompose Output
italicFontStyle.Italic
not-italicFontStyle.Normal
underlineTextDecoration.Underline
line-throughTextDecoration.LineThrough
no-underlineTextDecoration.None

Line Height (Leading)

ClassLine HeightDescription
leading-none1emNo extra spacing
leading-tight1.25emTight spacing
leading-snug1.375emSnug spacing
leading-normal1.5emNormal spacing (default)
leading-relaxed1.625emRelaxed spacing
leading-loose2emDouble spacing
leading-{n}n.spFixed sp value

Text Alignment

ClassCompose Output
text-leftTextAlign.Start
text-centerTextAlign.Center
text-rightTextAlign.End
text-justifyTextAlign.Justify

Text Color

ClassCompose Output
text-primaryMaterialTheme.colorScheme.primary
text-secondaryMaterialTheme.colorScheme.secondary
text-whiteColor.White
text-blackColor.Black
text-[#RRGGBB]Color(0xFFRRGGBB)
text-yellowColor(0xFFEAB308)
text-blue-900Color(0xFF1E3A8A)
text-white/80Color(0xCCFFFFFF)

Text Overflow

ClassCompose Output
truncateoverflow = TextOverflow.Ellipsis, maxLines = 1
line-clamp-{n}maxLines = n
<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