UnoCSSの便利なTips

UnoCSSは、瞬時にスタイルを生成できる高速なユーティリティファーストCSSフレームワークです。

Attributifyモード

UnoCSS独自の機能として、属性ベースのスタイリングが可能です：

<div
  bg="blue-500"
  text="white center"
  p="4"
  rounded="lg"
>
  Hello UnoCSS!
</div>

ダークモード

カスタムクラスでダークモードを制御できます：

<div class="bg-white dark-mode:bg-black">
  <!-- コンテンツ -->
</div>

アイコン

unplugin-iconsと組み合わせることで、アイコンをコンポーネントとして使えます：

<script setup>
import IconGithub from '~icons/simple-icons/github';
</script>

<template>
  <IconGithub class="text-2xl" />
</template>

パフォーマンス

UnoCSSの主な利点：

• 超高速: オンデマンドでCSSを生成
• 軽量: 使用したスタイルのみをバンドル
• 柔軟: カスタムルールを簡単に追加

まとめ

UnoCSSは、開発速度とパフォーマンスの両立を実現する素晴らしいツールです。 ぜひ試してみてください！