CSS and Tavo.js UI

Use application-wide CSS for document defaults and product-wide rules, CSS Modules for component-specific presentation, Tavo.js UI props for supported component behavior, and generated theme tokens for shared design decisions.

• List deliberate global entry files in tavo.config.ts cssEntries.

• Name local files *.module.css so class names remain scoped. Install sass-embedded before choosing *.module.scss for application code.

• Keep third-party global styles in one documented application entry.

• Use tokens instead of repeating product colors, spacing, radii, and typography values.

Tavo.js UI components provide semantic defaults, states, responsive props, and theme integration. They do not own your application data or business behavior; route modules, controllers, and stores remain responsible for those concerns.

tsximport { Button, Card, Grid, Page, Text } from "@tavojs/ui";

export default function ProjectsPage() {
  return (
    <Page>
      <Grid columns={{ base: 1, md: 2 }} spacing="md">
        <Card title="Documentation">
          <Text>Refresh the getting started guide.</Text>
          <Button variant="solid">Open project</Button>
        </Card>
      </Grid>
    </Page>
  );
}

tavo-ui.config.ts describes the light and dark brand colors, default mode, numeric scale, typography, and token overrides the product needs. The Tavo.js UI plugin resolves that input and injects generated variables during development and production builds.

tsimport type { TavoUiThemeConfig } from "@tavojs/ui";

export default {
  $schema: "./node_modules/@tavojs/ui/schema.json",
  defaultTheme: "system",
  color: {
    light: { primary: "#3157d5" },
    dark: { primary: "#9bb1ff" },
  },
  scale: { radius: 8 },
} satisfies TavoUiThemeConfig;

Responsive values are mobile-first: base applies everywhere, then larger breakpoint values override it. Import order still controls global CSS, so keep one deliberate sequence and avoid relying on incidental module discovery.

• Use component responsive props for supported layout behavior.

• Use CSS Modules for product-specific selectors and states.

• Use the exported breakpoint mixins when custom CSS must align with the UI system.