Utilities

From v3 we removed utilities classes and start using UnoCSS for this purpose. For more information, please refer to UnoCSS and TailwindCSS documentation.

UnoCSS Config

You can use example config file as below with our default theme values

// unocss.config.ts
import {
  defineConfig,
  presetIcons,
  presetUno,
  presetWebFonts,
  transformerCompileClass,
} from 'unocss'

export default defineConfig({
  preflight: false,
  preflights: [
    {
      getCSS: () => `
        html{font-family:"Inter",sans-serif}
      `,
    },
  ],
  theme: {
    breakpoints: {
      sm: '576px',
      md: '768px',
      lg: '992px',
      xl: '1200px',
      xxl: '1560px',
    },
    colors: {
      neutral: {
        DEFAULT: '#adadad',
        1: '#f8f8f8',
        2: '#f2f2f2',
        3: '#e4e4e4',
        4: '#cecece',
        5: '#adadad',
        6: '#808080',
        7: '#646464',
        8: '#484848',
        9: '#333333',
      },
      primary: {
        DEFAULT: '#0076ff',
        1: '#cce4ff',
        2: '#a3ceff',
        3: '#0076ff',
        4: '#064c93',
        5: '#0b467a',
      },
      blue: {
        DEFAULT: '#2957ff',
        1: '#f5f7ff',
        2: '#ccd7ff',
        3: '#2957ff',
        4: '#0834ba',
        5: '#0e37a0',
      },
      teal: {
        DEFAULT: '#3ac5de',
        1: '#e5fbff',
        2: '#bff3fc',
        3: '#3ac5de',
        4: '#218491',
        5: '#23737a',
      },
      green: {
        DEFAULT: '#2ce23c',
        1: '#dbffde',
        2: '#b4fdba',
        3: '#2ce23c',
        4: '#1b8d21',
        5: '#1e7620',
      },
      yellow: {
        DEFAULT: '#ffc60d',
        1: '#fff6d9',
        2: '#ffecb0',
        3: '#ffc60d',
        4: '#9f7607',
        5: '#86610c',
      },
      orange: {
        DEFAULT: '#ff8419',
        1: '#fff1e5',
        2: '#ffdbbc',
        3: '#ff8419',
        4: '#ab4e07',
        5: '#91410d',
      },
      red: {
        DEFAULT: '#ff1919',
        1: '#ffe5e5',
        2: '#ffbcbc',
        3: '#ff1919',
        4: '#ab070d',
        5: '#910d15',
      },
    },
    boxShadow: {
      lv1: '0px 4px 12px rgba(0, 0, 0, 0.04)',
      lv2: '1px 4px 16px rgba(0, 0, 0, 0.08)',
      lv3: '2px 4px 16px rgba(0, 0, 0, 0.12)',
    },
    borderRadius: {
      '0': '0',
      max: '87rem',
      xs: '0.25rem',
      sm: '0.5rem',
      md: '0.75rem',
      lg: '1rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.75rem',
      max: '99rem',
    },
    fontSize: {
      base: '1rem',
      xxs: '8px',
      xs: '10px',
      sm: '12px',
      md: '14px',
      lg: '16px',
      xl: '18px',
      '2xl': '20px',
      '3xl': '22px',
      '4xl': '24px',
    },
  },
  rules: [],
  shortcuts: [],
  variants: [],
  safelist: [],
  presets: [
    presetUno(),
    presetWebFonts({
      fonts: {
        sans: [
          {
            name: 'Inter',
            weights: ['400', '500', '600'],
            italic: true,
          },
          {
            name: 'sans-serif',
            provider: 'none',
          },
        ],
      },
    }),
    presetIcons(),
  ],
  transformers: [transformerCompileClass()],
})

Remember to load bigin-ui css/scss before uno

// main.ts
import { createApp } from 'vue'
import 'bigin-ui/theme-chalk/b-reset.css'
import 'bigin-ui/dist/index.css'
import 'uno.css'

const app = createApp(App)

app.mount('#app')

// nuxt.config.ts
// ...
export default defineNuxtConfig({
  // ...
  css:['bigin-ui/theme-chalk/b-reset.css', 'bigin-ui/dist/index.css'],
  unocss: {
    // @unocss/nuxt config
  }
  // ...
})