Setup

Using UnoCSS via its CLI allows us to integrate it into our Angular flow.

First we run UnoCSS in watch mode for development.

npm run dev:css

Start Angular after UnoCSS has generated the uno.css file.

npm run start

Presets

Presets allow you to utilize know utility classes in your project right away.

presetWind3() provides a common superset of: Tailwind CSS, WindiCSS, Bootstrap, Tachyons, etc.

Combine that with presetWebFonts() and you are ready to code.

presets: [
    presetWind3(),
    presetWebFonts({
        provider: 'google',
        fonts: {
            sans: 'Montserrat',
            mono: ['Fira Code', 'Fira Mono:400,700'],
        },
    })
]

Reset the default presets - including preflight layer:

presets: []

Now you are ready to dive into UnoCSS!