Aurora

Tailwind setup ​

Aurora ships a CSS-first Tailwind v4 theme (theme/css/tailwind.css — tokens, semantic color utilities, typography utilities) plus the raw token definitions (theme/css/design-system.css). There is no JS config or preset — everything is wired through your CSS entry.

Build plugin ​

Use the first-party Vite plugin (or @tailwindcss/postcss for non-Vite pipelines):

ts
// vite.config.ts
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
    plugins: [tailwindcss(), vue()],
})

No tailwind.config.js and no postcss.config.js needed.

CSS entry ​

Import Tailwind, then Aurora's token definitions and theme. Aurora's theme file declares @source for its own components, so their classes are picked up automatically; add @source entries for your app code (or omit source(none) to let Tailwind auto-detect):

css
/* src/style.css (or whatever your entry is) */
@import 'tailwindcss' source(none);

@import '@scaler-tech/aurora/theme/css/design-system.css';
@import '@scaler-tech/aurora/theme/css/tailwind.css';

@source './';

body {
    @apply font-inter bg-primary text-primary;
}

Semantic tokens (bg-primary, text-cta, border-focus, …) are property-scoped custom properties (--background-color-*, --text-color-*, --border-color-*, --ring-color-*). For opacity modifiers use the variable form: bg-(--background-color-secondary)/30.

Vue plugins ​

If you use any Popper-based component (Tooltip, Menu, Modal, Drawer, Combobox, …), aurora animates them with the v-motion directive from @vueuse/motion. Register the plugin once at app startup:

ts
// src/main.ts
import { createApp } from 'vue'
import { MotionPlugin } from '@vueuse/motion'
import App from './App.vue'
import './style.css'

createApp(App).use(MotionPlugin).mount('#app')

Skip this if you don't use any of the components listed above.

Fonts ​

Aurora's typography utilities (heading-1-semibold, paragraph-md, paragraph-sm-mono, …) reference Inter, Manrope, and Geist Mono. Add them to your app's <head>:

html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=Manrope:wght@200..800&family=Geist+Mono:wght@100..900&display=swap"
/>

If you self-host fonts, just make sure the font-family names match (Inter, Manrope, Geist Mono).

Next ​

→ Render your first component to verify everything is wired up.