| 1 | # Configure UnoCSS |
| 2 | |
| 3 | <Environment type="node" /> |
| 4 | |
| 5 | [UnoCSS](https://unocss.dev) is now the default CSS framework for Slidev since v0.42.0. UnoCSS is a fast atomic CSS engine that has full flexibility and extensibility. Most of the Tailwind CSS classes are supported **out-of-box**, and you can also extend it with your own configurations. |
| 6 | |
| 7 | By default, Slidev enables the following presets out-of-box: |
| 8 | |
| 9 | - [@unocss/preset-wind3](https://unocss.dev/presets/wind3) - Tailwind / Windi CSS compatible utilities |
| 10 | - [@unocss/preset-attributify](https://unocss.dev/presets/attributify) - Attributify mode |
| 11 | - [@unocss/preset-icons](https://unocss.dev/presets/icons) - Use any icons as class |
| 12 | - [@unocss/preset-web-fonts](https://unocss.dev/presets/web-fonts) - Use web fonts at ease |
| 13 | - [@unocss/transformer-directives](https://unocss.dev/transformers/directives) - Use `@apply` in CSS |
| 14 | |
| 15 | Slidev also adds shortcuts as can be seen in its [source code](https://github.com/slidevjs/slidev/blob/main/packages/client/uno.config.ts). |
| 16 | |
| 17 | You can therefore style your content the way you want. For example: |
| 18 | |
| 19 | ```html |
| 20 | <div class="grid pt-4 gap-4 grid-cols-[100px,1fr]"> |
| 21 | |
| 22 | ### Name |
| 23 | |
| 24 | - Item 1 |
| 25 | - Item 2 |
| 26 | |
| 27 | </div> |
| 28 | ``` |
| 29 | |
| 30 | ## Configurations |
| 31 | |
| 32 | You can create `uno.config.ts` under the root of your project to extend the builtin configurations |
| 33 | |
| 34 | ```ts twoslash [uno.config.ts] |
| 35 | import { defineConfig } from 'unocss' |
| 36 | |
| 37 | export default defineConfig({ |
| 38 | shortcuts: { |
| 39 | // custom the default background |
| 40 | 'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])', |
| 41 | }, |
| 42 | // ... |
| 43 | }) |
| 44 | ``` |
| 45 | |
| 46 | Learn more about [UnoCSS configurations](https://unocss.dev/guide/config-file) |
| 47 |