Tailwind

How it fits

Tamagui's @tamagui/tailwind package has a View and a Text styled with Tailwind class names instead of style props. Adv UI components keep their own props, so the two work side by side: lay out a screen with classes and put Adv UI components in it.

Classes are read against your Tamagui config, so they use Adv UI's theme and tokens, but only where the names match. The sections below say which Tailwind names work as they are and which need Adv UI's name instead.

Install

pnpm add @tamagui/tailwind

Install the same version as your tamagui package. Next.js and Expo need no other setup: the components parse their classes as they render, and Tamagui writes the CSS on web as it does for Adv UI, so there is no Tailwind stylesheet or PostCSS step.

Use it next to Adv UI

In Next.js, render them in a client component, as you would Adv UI's.

'use client'

import { Badge, Button, Card } from '@advui/core'
import { Text, View } from '@tamagui/tailwind'

export function Plan() {
  return (
    <View className="gap-4 p-4 md:flex-row md:p-8 rounded-lg bg-muted border border-border">
      <Card>
        <Card.Header>
          <Card.Title>Pro</Card.Title>
        </Card.Header>
        <Card.Content>
          <Badge>Popular</Badge>
        </Card.Content>
      </Card>
      <View className="flex-1 gap-3 justify-center">
        <Text className="text-2 text-mutedForeground">Billed yearly.</Text>
        <Button>Upgrade</Button>
      </View>
    </View>
  )
}

States and breakpoints are prefixes that become Adv UI's flat values: hover:bg-accent, press:bg-muted, focus-visible:border-ring, and md:p-6 with Adv UI's breakpoints.

Theme colors

A color class takes a theme key exactly as the theme spells it. Adv UI's keys are camelCase, so the classes are too:

• bg-primary, text-primaryForeground, text-mutedForeground and border-borderStrong match.
• text-primary-foreground and text-muted-foreground, the kebab-case names shadcn/ui uses, do not.
• Tamagui's own keys are kebab-case and match as written: bg-background-hover, bg-color-6.

There is no Tailwind palette: bg-blue-500 doesn't match. Theme colors follow light and dark mode on their own, so you rarely need dark:. Arbitrary values (bg-[#2563eb]) and CSS color names (text-white) are used as written: the same in both modes, and outside the contrast checks Adv UI runs on its themes.

Text sizes

Font sizes use Adv UI's type scale, which is numbered. Tailwind's names (text-sm, text-lg) don't match. Use the number instead: it sets the line height too, and follows your theme's fontScale.

• text-xs → text-1 (12px)
• text-sm → text-2 (14px)
• text-base → text-3 (16px)
• text-lg → text-4 (18px)
• text-xl → text-5 (20px)
• text-2xl → text-6 (24px)
• text-3xl → text-7 (30px)
• text-4xl → text-8 (36px)
• text-5xl → text-9 (48px)
• text-6xl → text-10 (60px)

Arbitrary sizes work (text-[15px]) but ignore fontScale. Line height classes are fixed values, not tokens: leading-6 is 24px and leading-tight is 1.25. font-body, font-heading and font-mono pick the theme's fonts.

Spacing, sizes and radius

Space and size classes use Adv UI's tokens, which follow Tailwind's 4px steps: p-4 is 16px, p-1.5 is 6px and w-64 is 256px. Steps Adv UI doesn't have don't match (p-28, w-36, p-px), and neither do named widths like max-w-md. Use an arbitrary value for those: max-w-[448px].

rounded-md, rounded-lg and the other named radii use Adv UI's radius tokens, so they follow your theme's radius setting, and rounded-button works too. A bare rounded is a fixed 4px. z-* classes are plain numbers, not Adv UI's z-index tokens.

Shadows

Shadow classes (shadow, shadow-md…) don't match. Spread Adv UI's shadow presets on the view instead:

import { shadows } from '@advui/theme'
import { View } from '@tamagui/tailwind'

<View className="rounded-lg bg-card p-4" {...shadows.md} />

Classes on Adv UI components

Adv UI components don't read Tailwind classes: <Button className="w-full"> only adds the class to the element on web, and has no effect on iOS and Android. To style one with classes, parse them into style props with parseStaticStyle:

import { Button, type ButtonProps } from '@advui/core'
import { parseStaticStyle } from '@tamagui/tailwind'
import { getConfig } from 'tamagui'

/** Adv UI's Button, plus Tailwind classes. */
export function TwButton({ className = '', ...props }: ButtonProps) {
  const { className: rest, ...styles } = parseStaticStyle(className, getConfig())
  return <Button {...styles} {...props} className={rest} />
}

// <TwButton className="mt-4 w-full md:w-[240px]">Save</TwButton>

Props written on the component win over its classes. Use classes for layout and spacing, and a component's variants for its colors, so its text keeps a readable contrast. The package's own styled() wraps its View and Text, not Adv UI components.

Limits

• Tamagui's compiler, which turns classes into CSS at build time, runs only in Vite apps. Next.js and Expo parse them as components render: in the Adv UI Expo playground, the package added about 63 KB to the Android bundle.
• The package installs Tailwind 4's engine, which includes a native binary, and Vite, even in a Next.js or Expo app.
• Web-only classes such as grid are dropped on iOS and Android.