Tailwind CSSで一からコンポーネントを作る手間、Preline UIが解決してくれた

はじめに

Tailwind CSSは自由度が高く、細かいスタイル調整がしやすいCSSフレームワークです。しかし、その自由度の高さゆえに「ドロップダウンメニュー」や「モーダル」「タブ」といった動きのあるUIコンポーネントを一から実装しようとすると、意外と手間がかかります。クラス名を組み合わせてレイアウトは作れても、開閉状態の管理やアクセシビリティ対応まで含めると、思った以上に工数がかさんでしまうものです。

そんな悩みを解決してくれるのが、今回紹介する「Preline UI」です。Tailwind CSSのユーティリティクラスをそのまま活かしながら、640以上のUIコンポーネントと220以上のブロックをすぐに使えるオープンソースのコンポーネントライブラリです。

Preline UIとは

Preline UIは、Tailwind CSSをベースにした、あらかじめデザイン・実装済みのUIコンポーネント集です。htmlstreamofficialによって開発されており、GitHub上で6.4kを超えるスターを獲得しています（MITライセンス）。ボタンやフォームといった静的なパーツだけでなく、ドロップダウン・モーダル・アコーディオン・タブといったインタラクティブな挙動を持つコンポーネントも、JavaScriptプラグインとして同梱されているのが大きな特徴です。

主な特徴

• 豊富なコンポーネント数 - ボタン、フォーム、ナビゲーション、テーブルなど640以上の無料コンポーネントと220以上のブロックを提供しています
• Tailwind CSSとの高い親和性 - 独自のCSS設計を持ち込むのではなく、Tailwindのユーティリティクラスをそのまま使ってマークアップするため、既存のTailwindプロジェクトに違和感なく組み込めます
• フレームワーク横断対応 - React、Vue、Next.js、Laravel、Django、Rubyなど、複数のフレームワーク向けに導入ガイドが用意されています
• ヘッドレスプラグイン - ドロップダウンやモーダルなどの挙動は27種類のJavaScriptプラグインとして分離されており、デザインを保ったままロジックだけを利用することも可能です

インストール

npmでPrelineパッケージをインストールします。

npm i preline

Tailwind CSS(v4系)のエントリーCSSファイルに、Prelineのソースとスタイルを読み込む設定を追加します。

@import "tailwindcss";

/* Preline UI */
@source "./node_modules/preline/dist/*.js";
@import "./node_modules/preline/variants.css";

インタラクティブなコンポーネント（ドロップダウンやモーダルなど）を動かすために、bodyタグの末尾でJavaScriptを読み込みます。

<script src="./node_modules/preline/dist/preline.js"></script>

基本的な使い方

まずは静的なHTMLで、Prelineのドロップダウンコンポーネントを使ってみましょう。クラス名を指定するだけで、開閉の挙動はPreline側のJavaScriptが面倒を見てくれます。

<div class="hs-dropdown relative inline-flex">
  <button
    id="hs-dropdown-default"
    type="button"
    class="hs-dropdown-toggle py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50"
  >
    メニューを開く
    <svg class="hs-dropdown-open:rotate-180 size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <path d="m6 9 6 6 6-6" />
    </svg>
  </button>

  <div
    class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-60 bg-white shadow-md rounded-lg mt-2 p-1"
    aria-labelledby="hs-dropdown-default"
  >
    <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100" href="#">
      プロフィール
    </a>
    <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100" href="#">
      設定
    </a>
  </div>
</div>

hs-dropdownというクラスをコンテナに付与するだけで、クリック時の開閉やアウトサイドクリックでの自動クローズといった動作が有効になります。JavaScriptのイベントリスナーを自前で書く必要はありません。

実践的なユースケース

React / Next.jsでの利用

Reactを使ったSPAやNext.jsのようなフレームワークでは、Prelineが提供するJavaScriptプラグインをページ遷移のたびに再初期化する必要があります。これは、クライアントサイドルーティングによってDOMが差し替わっても、Preline側がその変化を検知できないためです。HSStaticMethods.autoInit()を呼び出すことで、新しく描画された要素にもプラグインを再適用できます。

"use client";

import { useEffect } from "react";
import { usePathname } from "next/navigation";

export function PrelineScript() {
  const pathname = usePathname();

  useEffect(() => {
    const loadPreline = async () => {
      await import("preline/preline");
      window.HSStaticMethods.autoInit();
    };

    loadPreline();
  }, [pathname]);

  return null;
}

このコンポーネントをレイアウトの中で読み込んでおけば、ページ遷移のたびにドロップダウンやモーダルなどのコンポーネントが正しく動作するようになります。TypeScriptを使っている場合は、preline/prelineからIStaticMethods型をインポートし、Windowインターフェースを拡張しておくと型エラーを防げます。

import { IStaticMethods } from "preline/preline";

declare global {
  interface Window {
    HSStaticMethods: IStaticMethods;
  }
}

管理画面のダッシュボード構築

Prelineにはサイドバー付きのナビゲーション、テーブル、カード型のUIブロックが豊富に用意されているため、社内向け管理画面やダッシュボードのプロトタイプを短期間で組み上げたい場面に向いています。ブロック単位でコピーして貼り付け、Tailwindのクラスを調整するだけで、統一感のあるレイアウトを構築できます。

まとめ

Preline UIは、Tailwind CSSの自由度を保ったまま、実装コストの高いインタラクティブなUIコンポーネントを一気に揃えられるライブラリです。ドロップダウンやモーダルの挙動を自作する手間から解放されるだけでなく、React・Next.jsをはじめとした主要フレームワークへの導入ガイドも整備されているため、既存プロジェクトへの組み込みもスムーズです。

まずは公式サイトのコンポーネント一覧から気になるパーツを選び、実際のプロジェクトに組み込んでみてはいかがでしょうか。Figmaのデザインシステムも無料で公開されているため、デザインとフロントエンド実装をまたいだ連携もしやすくなっています。