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 defines design tokens for both light and dark mode, including colors, border radius, and font family.
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 {
--background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823);
--primary: oklch(0.546 0.245 262.881);
--primary-foreground: oklch(0.984 0.003 247.858);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--muted: oklch(0.967 0.001 286.375);
--muted-foreground: oklch(0.552 0.016 285.938);
--accent: oklch(0.967 0.001 286.375);
--accent-foreground: oklch(0.21 0.006 285.885);
--destructive: oklch(0.577 0.245 27.325);
--success: oklch(0.555 0.163 145);
--border: oklch(0.92 0.004 286.32);
--input: oklch(0.92 0.004 286.32);
--ring: oklch(0.546 0.245 262.881);
--radius: 0.75rem;
/* ... */
}
.dark {
--background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.984 0.003 247.858);
/* ... */
}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.