Configuring UnoCSS

UnoCSS has a config file called uno.config.js|ts. This file allows you to easily customize UnoCSS. We will use this file later to add rules, shortcuts and more.

Right now we want to enable the default UnoCSS preset which is called presetWind3. A preset is a collection of rules, shortcuts and other settings.

To enable the preset simply import presetWind3 from unocss and add it to the presets array in the config file like this: presets: [presetWind3()],. It may take a few seconds for the changes to appear.

presetWind3 is a superset of popular utility-first frameworks such as Tailwind CSS and Windi CSS. This means that if you write Tailwind utility classes they should work as expected.