@inkline/unocss

UnoCSS Atomic CSS Utility Classes generator Preset by @alexgrozav.

Homepage · Documentation · Storybook · Playground · Issue Tracker

Installation

1. Install dependencies.

npm i -D unocss @inkline/unocss

2. Add the Inkline Unocss to your Vite.js configuration.

import { defineConfig } from 'vite';
import { inkline } from '@inkline/plugin/vite';
import { resolve } from 'path';
import unocss from '@unocss/vite';
import { presetInkline, UserOptions } from '@inkline/unocss';

const inklineConfig: UserOptions = {
    outputDir: resolve(__dirname, 'src/css/config')
};

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

3. Replace the existing utilities.scss import with the virtual:uno.css import in your main.ts file:

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

4. Enjoy!

Creator

Alex Grozav

• https://grozav.com
• https://twitter.com/alexgrozav
• https://facebook.com/alexgrozav
• https://github.com/alexgrozav

If you use Inkline in your daily work and feel that it has made your life easier, please consider sponsoring me on Github Sponsors. 💖

Copyright and license

Released under MIT License.