UnoCSS の設定

環境: node

このセットアップ関数は、Node.js 環境でのみ実行されます。Node.js の API にアクセスできます。

UnoCSS は v0.42.0 以降、Slidev のデフォルト CSS フレームワークになりました。UnoCSS は完全な柔軟性と拡張性を備えた高速アトミック CSS エンジンです。Tailwind CSS クラスのほとんどはそのままサポートされており、独自の設定で拡張することもできます。

デフォルトでは、Slidev は以下のプリセットをそのまま有効にしています:

@unocss/preset-wind3 - Tailwind / Windi CSS 互換ユーティリティ
@unocss/preset-attributify - 属性化モード
@unocss/preset-icons - アイコンをクラスとして使用する
@unocss/preset-web-fonts - Web フォントを簡単に使用する
@unocss/transformer-directives - CSS で @apply を使用する

Slidev はまたソースコードに見られるようなショートカットを追加します。

したがって、好きな方法でコンテンツをスタイリングできます。例えば:

html

<div class="grid pt-4 gap-4 grid-cols-[100px,1fr]">

### Name

- Item 1
- Item 2

</div>

設定

プロジェクトのルートに uno.config.ts を作成して、組み込み設定を拡張できます

uno.config.ts

import { defineConfig
 } from 'unocss'

export default defineConfig
({
  shortcuts
: {
    // custom the default background
    'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
  },
  // ...
})

詳しくは UnoCSS 設定をご覧ください。

UnoCSS の設定 ​

設定 ​

UnoCSS の設定

設定