UnoCSS Preset Installation - Vite.js

Install the Inkline Preset for UnoCSS in any Vite.js application.

Installation

1 Install dependencies

npm install -D unocss @inkline/unocss

2 Create Configuration File

Create a uno.config.ts file and add the Inkline preset to it.

import { defineConfig } from 'unocss';
import { createPreset } from '@inkline/unocss';

export default (async () => {
    const presetInkline = await createPreset();

    return defineConfig({
        presets: [presetInkline]
    });
})();

If you're using a custom Inkline config file path, make sure to provide it as an options argument to the createPreset() function.

3 Add UnoCSS to your Vite.js Configuration

Next, open your vite.config.ts file and add UnoCSS to the plugins array:

import { defineConfig } from 'vite';
import type { UserOptions } from '@inkline/plugin';
import inkline from '@inkline/plugin/vite';
import unocss from 'unocss/vite';
import vue from '@vitejs/plugin-vue';

const inklineConfig: UserOptions = {
    outputDir: 'src/css/variables'
};

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        inkline(inklineConfig),
        unocss(),
        vue()
    ]
});

4 Replace utilities import

If existing, replace the utilities.scss import from your main.ts file with the virtual uno.css import.

- import '@inkline/inkline/css/utilities.scss?inline';
+ import 'virtual:uno.css';

5 Enjoy on-demand utility classes!

That's it! You can now enjoy to ease and efficiency of on-demand utility classes in your Inkline project.