OSS探訪
GitHubで見るプロジェクトサイト

UnoCSS — 使用したutilityだけを即時生成するAtomic CSS engine

OSS規模スコア 278.0OSS健全度 85更新ペース 63 Commit/30日
スコアの見方

OSS規模スコアはStars・Watchers・Forks・Contributorsを対数圧縮して重み付けした現在の規模指標（上限なし）です。発掘スコアは現在のOSS規模スコアから発掘時点のOSS規模スコアを引いた値、更新ペースは直近30日Commit数、成長モメンタムは直近の観測期間におけるOSS規模スコア差、OSS健全度は取得できた更新状況・Community Health・Releaseの0〜100評価です。

Stars
18,963
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/09/17

概要

UnoCSSは、source codeから利用中のtokenを抽出し、必要なCSSだけをon-demandで生成するAtomic CSS engineです。preset、shortcut、Attributify、icon、transformerなどを組み合わせ、project独自のutility体系を構成できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：

presetを選び、必要なutilityだけを生成する

固定のcore utilityを持たず、presetやruleを設定してsource中で使われたtokenに対応するCSSだけを生成します。

出典：[2][3]

shortcut・Attributify・icon・transformerで記法を拡張する

複数utilityのalias、attribute記法、CSS icon、variant group等を用途に応じて追加できます。

出典：[2]

utility CSSを高速かつ独自preset中心で運用したい場合に

Tailwind互換presetを使う場合も、project固有のruleを強く組み込みたい場合も、生成engineとpresetを分離した構成に向きます。

出典：[2]

preset構成とdynamic classの抽出方法を設計する

runtimeで文字列を組み立てるclassは静的抽出できない場合があります。safelist等を使い、production buildで必要なclassが確実に生成されることを確認してください。

出典：[3]

参考にした公式資料

  1. [1]unocss/unocss repository(2026-09-21)
  2. [2]UnoCSS README(2026-09-21)
  3. [3]UnoCSS Vite integration(2026-09-21)
  4. [4]UnoCSS monorepo package(2026-09-21)
  5. [5]UnoCSS MIT license(2026-09-21)
編集部からの補足

UnoCSSには固定のcore utility setがなく、機能はpreset等から組み立てます。現在のreleaseは66.10.5でmonorepoはNode.js 22+を要求します。GitHub APIのlicense判定はNOASSERTIONですが、repositoryのLICENSEとpackage metadataはMITを明記しています。

3ステップで試す

  1. 1

    UnoCSSを追加

    Vite projectへUnoCSS本体を追加します。

    npm install -D unocss
  2. 2

    Vite pluginを有効化

    vite.configでUnoCSS pluginを追加し、source中のutility tokenをbuild時に抽出できるようにします。

    import UnoCSS from 'unocss/vite'; plugins: [UnoCSS()]
  3. 3

    生成CSSを読み込みutilityを試す

    virtual stylesheetをentryから読み込み、利用したutilityだけが生成されることを確認します。

    import 'virtual:uno.css' → <div className="text-red-500 font-bold">Hello</div>
公式READMEで確認

成長

成長の推移 · 直近30日

18,963 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）
63
Open PR
27

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る
GitHubで見る

GitHub Topics

  • atomic-css
  • vite-plugin
  • windicss
  • engine
  • unocss
Stars
18,963
Forks
993
Watchers
66
Open Issues
115
Contributors
409
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/09/17
関連記事を投稿する

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

情報の誤りを報告

掲載内容に誤りや古い情報があればお知らせください。