Styling

Swift Rust doesn't lock you into a styling solution. It ships with optional Tailwind CSS support and works with any styling approach that works in React.

Tailwind CSS

Choose Tailwind when you scaffold and the framework will set everything up for you. The scaffolder uses Tailwind v4's @tailwindcss/postcss plugin and the new CSS-first configuration.

@import "tailwindcss";

@theme {
  --color-bg: #ffffff;
  --color-fg: #0c0a09;
  --color-accent: #ea580c;
  --font-sans: var(--font-geist-sans), system-ui, sans-serif;
}

body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
}

CSS Modules

Name your file with the .module.css suffix to use CSS Modules. Classes are scoped automatically.

.button {
  background: var(--color-accent);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

shadcn-style components

Add accessible, theme-able components with one CLI command. The components are copied into your project — you own the code, and you can edit it freely.

# Add a few components
bunx @swift-rust/ui add button card input

# Or add them all at once
bunx @swift-rust/ui add --all

Design tokens

The shadcn-style components in @swift-rust/ui use CSS variables you can override in yourglobals.css:

:root {
  --ui-bg: #ffffff;
  --ui-fg: #0c0a09;
  --ui-accent: #ea580c;
  --ui-border: #e7e5e4;
}

Next steps

Continue to Fonts.