diff --git a/.vitepress/config.js b/.vitepress/config.js index 5763eb9..ee680b8 100644 --- a/.vitepress/config.js +++ b/.vitepress/config.js @@ -148,6 +148,10 @@ const Customizations = [ text: 'Configure Vite', link: '/custom/config-vite', }, + { + text: 'Configure UnoCSS', + link: '/custom/config-unocss', + }, { text: 'Configure Windi CSS', link: '/custom/config-windicss', diff --git a/addons/write-an-addon.md b/addons/write-an-addon.md index 5a9b250..13d3a1a 100644 --- a/addons/write-an-addon.md +++ b/addons/write-an-addon.md @@ -9,7 +9,7 @@ An addon can contribute to the following points: - Global styles (use with caution has it is more the role of [themes](/themes/use)) - Provide custom layouts or override the existing one - Provide custom components or override the existing one -- Extend Windi CSS configurations +- Extend UnoCSS/Windi CSS configurations - Configure tools like Monaco and Prism ## Conventions diff --git a/custom/config-unocss.md b/custom/config-unocss.md new file mode 100644 index 0000000..9d9cad1 --- /dev/null +++ b/custom/config-unocss.md @@ -0,0 +1,44 @@ +# Configure UnoCSS + + + +[UnoCSS](https://unocss.dev) is now the default CSS framework for Slidev since v0.42.0. UnoCSS is an fast atomic CSS engine that has full flexibility and extensibility. + +By default, Slidev enables the following presets out-of-box: + +- [@unocss/preset-uno](https://unocss.dev/presets/uno) - Tailwind / Windi CSS compatible utilities +- [@unocss/preset-attributify](https://unocss.dev/presets/attributify) - Attributify mode +- [@unocss/preset-icons](https://unocss.dev/presets/icons) - Use any icons as class +- [@unocss/preset-web-fonts](https://unocss.dev/presets/web-fonts) - Use web fonts at ease +- [@unocss/transformer-directives](https://unocss.dev/transformers/directives) - Use `@apply` in CSS + +You can therefore style your content the way you want. For example: + +```html +
+ +### Name + +- Item 1 +- Item 2 + +
+``` + +## Configurations + +You can create `uno.config.ts` under the root of your project to extend the builtin configurations + +```ts +import { defineConfig } from 'unocss' + +export default defineConfig({ + shortcuts: { + // custom the default background + 'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])', + }, + // ... +}) +``` + +Learn more about [UnoCSS configurations](https://unocss.dev/guide/config-file) diff --git a/custom/config-windicss.md b/custom/config-windicss.md index 58e4db9..901839b 100644 --- a/custom/config-windicss.md +++ b/custom/config-windicss.md @@ -2,7 +2,18 @@ -Markdown naturally supports embedded HTML markups. You can therefore style your content the way you want. To provide some convenience, we have [Windi CSS](https://github.com/windicss/windicss) built-in, so you can style markup directly using class utilities. +::: warning +Since Slidev v0.42.0, [UnoCSS](/custom/config-unocss) become the default CSS framework for Slidev. + +You can still use Windi CSS by setting `css: windicss` in the frontmatter. +```md +--- +css: windicss +--- +``` +::: + +Markdown naturally supports embedded HTML markups. You can therefore style your content the way you want. For example: diff --git a/custom/directory-structure.md b/custom/directory-structure.md index 9ab9333..3e7c7e2 100644 --- a/custom/directory-structure.md +++ b/custom/directory-structure.md @@ -115,7 +115,7 @@ import './code.css' import './layouts.css' ``` -Styles will be processed by [Windi CSS](https://windicss.org/) and [PostCSS](https://postcss.org/), so you can use css nesting and [at-directives](https://windicss.org/features/directives.html) out-of-box. For example: +Styles will be processed by [UnoCSS](https://unocss.dev/) and [PostCSS](https://postcss.org/), so you can use css nesting and [at-directives](https://windicss.org/features/directives.html) out-of-box. For example: ```less .slidev-layout { diff --git a/custom/index.md b/custom/index.md index 2be30ce..70305cb 100644 --- a/custom/index.md +++ b/custom/index.md @@ -1,6 +1,6 @@ # Customizations -Slidev is fully customizable, from styling to tooling configurations. It allows you to configure the tools underneath ([Vite](/custom/config-vite), [Windi CSS](/custom/config-windicss), [Monaco](/custom/config-monaco), etc.) +Slidev is fully customizable, from styling to tooling configurations. It allows you to configure the tools underneath ([Vite](/custom/config-vite), [UnoCSS](/custom/config-unocss), [Monaco](/custom/config-monaco), etc.) ## Frontmatter Configures @@ -118,6 +118,7 @@ Refer to the [Directory Structure](/custom/directory-structure) section. - [Highlighters](/custom/highlighters) - [Configure Vue](/custom/config-vue) - [Configure Vite](/custom/config-vite) +- [Configure UnoCSS](/custom/config-unocss) - [Configure Windi CSS](/custom/config-windicss) - [Configure Monaco](/custom/config-monaco) - [Configure KaTeX](/custom/config-katex) diff --git a/guide/faq.md b/guide/faq.md index 0db5d8d..7065180 100644 --- a/guide/faq.md +++ b/guide/faq.md @@ -4,7 +4,7 @@ Since Slidev is based on the Web, you can apply any grid layouts as you want. [CSS Grids](https://css-tricks.com/snippets/css/complete-guide-grid/), [flexboxes](https://css-tricks.com/snippets/css/a-guide-to-flexbox/), or even [Masonry](https://css-tricks.com/native-css-masonry-layout-in-css-grid/), you get the full controls. -Since we have [Windi CSS](https://windicss.org/) built-in, here is one simple way for you to reference: +Since we have [UnoCSS](https://windicss.org/) built-in, here is one simple way for you to reference: ```html
diff --git a/guide/index.md b/guide/index.md index dbae3b7..50c475a 100644 --- a/guide/index.md +++ b/guide/index.md @@ -13,7 +13,7 @@ You can learn more about the rationale behind the project in the [Why Slidev](/g - ๐Ÿ“ [**Markdown-based**](/guide/syntax.html) - use your favorite editors and workflow - ๐Ÿง‘โ€๐Ÿ’ป [**Developer Friendly**](/guide/syntax.html#code-blocks) - built-in syntax highlighting, live coding, etc. - ๐ŸŽจ [**Themable**](/themes/gallery.html) - theme can be shared and used with npm packages -- ๐ŸŒˆ [**Stylish**](/guide/syntax.html#embedded-styles) - on-demand utilities via [Windi CSS](https://windicss.org/) or [UnoCSS](https://github.com/unocss/unocss). +- ๐ŸŒˆ [**Stylish**](/guide/syntax.html#embedded-styles) - on-demand utilities via [UnoCSS](https://github.com/unocss/unocss) or [Windi CSS](https://windicss.org/). - ๐Ÿคน [**Interactive**](/custom/directory-structure.html#components) - embedding Vue components seamlessly - ๐ŸŽ™ [**Presenter Mode**](/guide/presenter-mode.html) - use another window, or even your phone to control your slides - ๐ŸŽจ [**Drawing**](/guide/drawing.html) - draw and annotate on your slides diff --git a/guide/syntax.md b/guide/syntax.md index 2126a93..c0805c9 100644 --- a/guide/syntax.md +++ b/guide/syntax.md @@ -2,7 +2,7 @@ Slides are written within **a single markdown file** (by default `./slides.md`). -You can use [the Markdown features](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) as you normally would, with the additional support of inlined HTML and Vue Components. Styling using [Windi CSS](https://windicss.org) is also supported. Use `---` padded with a new line to separate your slides. +You can use [the Markdown features](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) as you normally would, with the additional support of inlined HTML and Vue Components. Styling using [UnoCSS](/custom/config-unocss) is also supported. Use `---` padded with a new line to separate your slides. ~~~md # Slidev @@ -185,7 +185,7 @@ h1 { `