Customization

The preset is fully customizable using UnoCSS Theme.

Usage

uno.config.ts
export default defineConfig({
  theme: {
    // ...
    colors: {
      primary: '#0000ff', // class="text-primary"
    },
  }
})

Theme

export interface Theme {
  /**
   * @default rem
   */
  unit?: 'rem' | 'em' | 'px' | null
  /**
   * 1rem = n px
   * @default 16
   */
  baseFontSize?: number

  spacing?: number[]
  weight?: number[]

  colors?: Record<string, string>

  grid?: {
    columns?: number
    gap?: number
  }

  breakpoints?: Record<string, string>
  verticalBreakpoints?: Record<string, string>

  containers?: Record<string, string>
}
Table of Contents