はじめに
Tailwind CSSは自由度が高く便利な反面、flex items-center justify-between rounded-lg border px-4 py-2 shadow-sm ...のようにクラスがどんどん長くなり、コンポーネントの見通しが悪くなるという悩みを抱えている方も多いのではないでしょうか。デザインシステムを一から組み立てる余裕がないプロジェクトでは、この「クラス地獄」がそのまま可読性の低下につながってしまいます。
そんな課題に対して、Tailwind CSSの上に「セマンティッククラス」という薄いレイヤーを被せることで解決を図るのが今回紹介するFlyonUIです。btnやcardといった意味のわかりやすいクラス名でコンポーネントを組み立てられるため、Tailwindの柔軟性を保ったままコードの可読性を上げることができます。
FlyonUIとは
FlyonUIは、Tailwind CSS向けの無料・オープンソースのUIコンポーネントライブラリです。ボタンやカード、アコーディオン、モーダルといった800以上のコンポーネント例を提供しており、セマンティックなクラス名とヘッドレスなJavaScriptプラグインを組み合わせて動作します。ReactやVueなど、Tailwind CSSが動く環境であればフレームワークを問わず利用できる点も特徴です。
主な特徴
- セマンティッククラス -
btn btn-primaryのように意味が伝わるクラス名でコンポーネントを構築でき、ユーティリティクラスの羅列より可読性が高い - 豊富なコンポーネント - アコーディオン、ドロップダウン、カルーセル、モーダルなど、インタラクティブな挙動を持つコンポーネントが標準で用意されている
- フレームワーク非依存 - Tailwind CSSさえ導入されていれば、React・Vue・素のHTMLなど環境を選ばずに組み込める
- RTL・レスポンシブ対応 - 右から左に読む言語のレイアウトやレスポンシブデザインを最初から考慮した設計
インストール
npmでインストールします。
npm install flyonui
メインのCSSファイル（例: app.css）にプラグインとして読み込みます。
@import "tailwindcss";
@plugin "flyonui";
@import "./node_modules/flyonui/variants.css";
@source "./node_modules/flyonui/dist/index.js";
アコーディオンやドロップダウンなどインタラクティブな挙動を使う場合は、JavaScriptファイルも読み込みます。</body>タグの直前に追加してください。
<script src="../node_modules/flyonui/flyonui.js"></script>
特定のコンポーネントのスクリプトだけを個別に読み込むことも可能です。
<script src="../node_modules/flyonui/dist/accordion.js"></script>
基本的な使い方
まずはシンプルなボタンとカードから試してみましょう。セマンティッククラスを使うことで、Tailwindのユーティリティクラスを都度組み合わせる必要がなくなります。
<!-- ボタン -->
<button class="btn btn-primary">送信する</button>
<button class="btn btn-outline btn-secondary">キャンセル</button>
<!-- カード -->
<div class="card w-96 bg-base-100 shadow-md">
<div class="card-body">
<h2 class="card-title">FlyonUIの紹介</h2>
<p>セマンティッククラスでTailwind CSSをもっと書きやすく。</p>
<div class="card-actions justify-end">
<button class="btn btn-primary">詳しく見る</button>
</div>
</div>
</div>
アコーディオンのようなインタラクティブなコンポーネントも、HTMLの属性だけで挙動を制御できます。
<div class="accordion" id="basic-accordion">
<div class="accordion-item">
<button class="accordion-toggle" aria-expanded="false" aria-controls="basic-accordion-1">
FlyonUIとは何ですか？
</button>
<div id="basic-accordion-1" class="accordion-content" role="region">
<p class="px-4 pb-3">Tailwind CSS向けの無料・オープンソースなコンポーネントライブラリです。</p>
</div>
</div>
</div>
実践的なユースケース
管理画面のフォームなど、複数のコンポーネントを組み合わせる場面を想定してみます。入力欄・バリデーションメッセージ・送信ボタンをセマンティッククラスだけで構築できるため、フォーム全体のマークアップがすっきりします。
<form class="space-y-4 max-w-md">
<div class="form-control">
<label class="label" for="email">
<span class="label-text">メールアドレス</span>
</label>
<input
type="email"
id="email"
class="input input-bordered"
placeholder="you@example.com"
required
/>
<span class="label-text-alt text-error mt-1">正しい形式で入力してください</span>
</div>
<div class="form-control">
<label class="label cursor-pointer justify-start gap-2">
<input type="checkbox" class="checkbox checkbox-primary" />
<span class="label-text">利用規約に同意する</span>
</label>
</div>
<button type="submit" class="btn btn-primary w-full">登録する</button>
</form>
このように、フォームのバリデーション表示やチェックボックスといった細かいUIパーツも一貫したクラス命名で扱えるため、複数人での開発でもコンポーネントの意図が伝わりやすくなります。React環境であれば、これらのクラスをそのままJSXのclassNameに渡すだけで動作するため、既存のTailwindプロジェクトへの導入コストも低く抑えられます。
まとめ
FlyonUIは、Tailwind CSSの柔軟性を保ちながら、セマンティッククラスによってマークアップの可読性を高められるライブラリです。800以上のコンポーネント例と、アコーディオンやモーダルなどのインタラクティブなJavaScriptプラグインが標準で揃っているため、デザインシステムをゼロから構築する手間を省きたい場合に特に有効です。まずは公式ドキュメントのコンポーネント一覧を眺めて、自分のプロジェクトに合いそうなパーツから試してみてはいかがでしょうか。