Styling the application

To build the user interface supastarter comes with Tailwind CSS and Radix Vue pre-installed.

Why Tailwind CSS and Radix UI

The combination of Tailwind CSS and Radix UI allows gives ready-to-use, complex UI components that can be fully customized to match your brands design.

Theme configuration

In the packages/config/tailwind/index.ts file you can configure the Tailwind CSS theme. Next to the default Tailwind CSS theme configuration you will also find two color variable objects in the file for light and dark mode. These color variables will be passed into the Tailwind CSS theme configuration and are used across the UI of the application.

const lightVariables = {
  colors: {
    border: "#e2e8f0",
    input: "#e2e8f0",
    ring: "#0072f5",
    background: "#ffffff",
    foreground: "#020817",
    primary: "#0072f5",
    "primary-foreground": "#ffffff",
    secondary: "#f1f5f9",
    "secondary-foreground": "#0f172a",
    error: "#ef4444",
    "error-foreground": "#ffffff",
    success: "#39a561",
    "success-foreground": "#ffffff",
    muted: "#f8fafc",
    "muted-foreground": "#64748b",
    accent: "#f1f5f9",
    "accent-foreground": "#0f172a",
    popover: "#ffffff",
    "popover-foreground": "#020817",
    card: "#ffffff",
    "card-foreground": "#020817",
  },
};
 
const darkVariables = {
  colors: {
    border: "#2f3e57",
    input: "#1e293b",
    ring: "#0072f5",
    background: "#121924",
    foreground: "#f8fafc",
    primary: "#0072f5",
    "primary-foreground": "#ffffff",
    secondary: "#1e293b",
    "secondary-foreground": "#f8fafc",
    error: "#ef4444",
    "error-foreground": "#ffffff",
    success: "#39a561",
    "success-foreground": "#f8fafc",
    muted: "#020817",
    "muted-foreground": "#94a3b8",
    accent: "#1e293b",
    "accent-foreground": "#f8fafc",
    popover: "#121924",
    "popover-foreground": "#f8fafc",
    card: "#121924",
    "card-foreground": "#f8fafc",
  },
};

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 globals.css file in the web package and do a hard refresh in the browser.

shadcn-vue

supastarter is also fully compatible with shadcn-vue, which is an amazing tool to quickly build your own component library with Radix UI and Tailwind CSS.

To use the shadcn-vue CLI in your supastarter project simply run the following command from your projects root:

pnpm --filter=web shadcn-vue [command]

For example to add the skeleton component you would run:

pnpm --filter=web shadcn-vue add skeleton

Styling the application

Theme configuration

shadcn-vue

On this page