コピペで簡単に利用できる！ Tailwind CSSで実装された、アクセシブルでモダンなUIコンポーネント -Basecoat
Post on:2025年7月30日
sponsorsr
Tailwind CSSは便利ですが、ユーティリティクラスだけでUIを実装するのはすこし面倒です。Tailwind CSSを使ったライブラリもありますが、それらの多くは判読不能なクラスの塊をHTMLにコピペしなければなりません。確かに動作はしますが、見た目が乱雑で、メンテナンスも非常に困難です。
しかし、この問題は解決しました。プレーンのHTMLとTailwind CSSで実装された、アクセシブルでモダンなUIコンポーネントを紹介します。
Basecoatとは
BasecoatはTailwind CSSで構築された、あらゆるWebスタックで動作するモダンなUIコンポーネントのコレクションです。Reactは必要とせず、従来のWebサイト・アプリにshadcn/uiの魔法をもたらします。
Basecoatの主な特徴は、下記の通り。
- 超軽量: ほとんどのコンポーネントはTailwinds CSSで実装されており、インタラクティブなコンポーネントの一部はJavaScriptを使用しています。
- 使い方は簡単:
btn,inputなどのクラスを追加するだけで完了。 - フレームワーク非依存: 他のフレームワークへの依存はなく、あらゆるフロントエンド・バックエンドのスタックで動作します。
- アクセシブル: コンポーネントはアクセシビリティのベストプラクティスに準拠しています。
- ダークモード: Tailwind CSSの設定を尊重しています。
- 拡張可能: Tailwind CSSまたはCSS変数を使用して、スタイルをカスタマイズできます。
- テーマ設定: shadcn/uiテーマと完全に互換性があります。
- コードの読みやすさ: クラススープは不要、クリーンなマークアップのみです。
- オープンソース: MITライセンスで、商用プロジェクトでも無料で利用できます。
Basecoatの準備
Basecoatでは、豊富なドキュメントが用意されています。
Basecoatを利用するには、HTMLのhead内に外部ファイルを記述します。
※コンポーネントの一部では外部JavaScriptの記述が必要になります。
|
1 2 |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@0.3.0/dist/basecoat.cdn.min.css"> <script src="https://cdn.jsdelivr.net/npm/basecoat-css@0.3.0/dist/js/all.min.js" defer></script> |
また、NPM経由でもインストールできます（npm, bun, yarnも）。
|
1 |
npm install basecoat-css |
BasecoatのUIコンポーネント
Kitchen Sinkには、Basecoatで利用可能なすべてのUIコンポーネントがまとめられています。
ざっと数えたところ、37種類のUIコンポーネントがありました。
Basecoatの使い方
Basecoatの使い方は、簡単です。
外部ファイルを記述し、あとはHTMLにコードをコピペするだけです。
UIコンポーネントによっては、複数の種類が用意されています。たとえば、ボタンは12種類が用意されています。
アイコン付きのボタン、ローディング付きのボタンなど、btnクラスを使用して、任意の要素をボタンとしてスタイル設定できます。
カードは3種類。ヘッダ・コンテンツ・フッタを含むカードをはじめ、コンテンツ・フッタのカード、画像を使用したカードがあります。
ラベル、インプット、テキストエリア、セレクトなどのコンポーネントを使用して、フォームを実装します。
sponsors
