Styling the application
To build the user interface supastarter comes with Tailwind CSS and Nuxt UI pre-installed.
Why Tailwind CSS and Nuxt UI
The combination of Tailwind CSS and Nuxt UI provides ready-to-use, accessible UI components that can be fully customized to match your brand's design.
Theme configuration
The theme is configured using CSS custom properties in the tooling/tailwind/theme.css file. This file maps Nuxt UI’s primary and neutral palettes to Tailwind’s olive scale, sets ink-style actions on olive-50 paper, and defines a chromatic --touch accent.
The theme CSS is imported in each app's main CSS file (e.g., apps/saas/assets/css/main.css):
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@import "@nuxt/ui";
@import "@repo/tailwind-config/theme.css";To customize the theme, edit the CSS custom properties in tooling/tailwind/theme.css:
:root {
--touch: oklch(0.51 0.12 128);
--touch-foreground: oklch(0.99 0.01 128);
--ui-color-primary-50: var(--color-olive-50);
/* ... through olive-950 ... */
--ui-color-primary-950: var(--color-olive-950);
--ui-primary: var(--ui-color-primary-950);
--ui-bg: var(--ui-color-neutral-50);
--ui-text: var(--ui-color-neutral-700);
--ui-border: var(--ui-color-neutral-200);
--ui-radius: 0.625rem;
--ui-success: var(--color-green-800);
--ui-error: var(--color-red-700);
--ui-warning: var(--color-yellow-700);
/* ... */
}
.dark {
--touch: oklch(0.76 0.11 128);
--touch-foreground: oklch(0.22 0.04 128);
--ui-primary: var(--ui-color-primary-50);
--ui-bg: var(--ui-color-neutral-950);
/* ... */
}
@theme {
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-heading: "DM Sans", ui-sans-serif, system-ui, sans-serif;
--color-touch: var(--touch);
--color-touch-foreground: var(--touch-foreground);
}Marketing uses Inter for body copy and DM Sans for headings. Change the --font-sans and --font-heading tokens (and load matching font files) when you want a different type pairing.
There is a known issue with Tailwind CSS in monorepos which requires you to
restart the development server after changing the theme configuration. If this
does not work, try also saving the main.css file in the app and do a hard
refresh in the browser.