@bassist/uno

@bassist/uno

Custom configuration for UnoCSS by @chengpeiquan .

Usage

With npm(or yarn, or pnpm):

npm install -D unocss @bassist/uno

Yeah, this is a UnoCSS configuration, so you need to install UnoCSS at the same time.

Configuration

Create a configuration file named uno.config.ts (or .js ) in the root path of the project.

// uno.config.ts
import { defineConfig } from '@bassist/uno'

export default defineConfig()

See: Integrations to integrate UnoCSS into your frameworks.

Overwrite

You can overwrite or merge your custom configuration.

e.g. Specify a theme color as a Hex value.

// uno.config.ts
import { defineConfig } from '@bassist/uno'

export default defineConfig({
  theme: {
    colors: {
      primary: '#065f46',
    },
  },
})

e.g. Specify a theme color as a CSS Variable.

// uno.config.ts
import { defineConfig } from '@bassist/uno'

export default defineConfig({
  theme: {
    colors: {
      primary: 'var(--c-primary)',
    },
  },
})

e.g. Specify a theme color as a set of color palettes.

// uno.config.ts
import { defineConfig } from '@bassist/uno'

export default defineConfig({
  theme: {
    colors: {
      primary: {
        100: '#d1fae5',
        200: '#a7f3d0',
        300: '#6ee7b7',
        400: '#34d399',
        500: '#10b981',
        600: '#059669',
        700: '#047857',
        800: '#065f46',
        900: '#064e3b',
        DEFAULT: '#065f46',
      },
    },
  },
})

For more configuration, please refer to the documentation.

Documentation

Based on the preset foundation of Tailwind CSS and Windi CSS , some commonly used default configurations are built in, you can refer to their documentation for detailed usage.

What are the commonly used default configurations? See: Source Code .

VS Code Extension

See: VS Code Extension

Release Notes

Please refer to CHANGELOG for details.

License

MIT License © 2023-PRESENT chengpeiquan