Tailwind CSS は CSS フレームワークの一種ですが、「ユーティリティファースト （Utility-first）」 をコンセプトに開発されており、好みの問題、もしくはプロジェクトの形態、開発手法との相性みたいなものは多少あるものの、使い方によっては非常に便利です。
昨年の後半くらいからでしょうか、個人的に Tailwind CSS を多用するようになっていて、簡単なランディングページや Web サイト、システムのモックアップを作成する際に重宝しています。
さて、すこし話は変わりますが、Tailwind CSS には公式の UI ライブラリである 「Tailwind UI」 が存在します。
Tailwind UI は有料の UI ライブラリで、日本円で 20,000円 ～ 30,000円程度課金 （サブスクリプションではなく買い切り価格） すると、ライブラリに登録されている 500種類以上の UI サンプルから HTML、React、Vue のソースコードを取得することができるようになっています （実際の料金体系は公式サイトをご確認ください）。
ランディングページや Web アプリケーション、EC サイトで使いやすい UI が数多く登録されていて、UI の開発スピードを上げたり、効率化したい場合には非常に有用なライブラリですし、課金する価値は高いと思います。
で、この素晴らしい公式 UI ライブラリにインスパイアされて、自分でも Tailwind CSS を使用した UI ライブラリを作ってみようかなとふと思い立ちまして。前述したとおり、以前から Tailwind CSS を結構使い込んでいたので、その課程で頻繁に使う UI に関してはコンポーネント化して再利用がしやすいようにしたりしていたこともあり、それをベースにソースコードなど汎用的になるように調整した上で公開すれば役に立つ方もいるかなということで。
早速仕事の合間にささっと Web サイトを作成してみたんですが、需要あるかなと思って数日前にプレ公開的な感じでこっそり晒してみたところ、そこそこ反応があったので、ヘルプページとか少し拡充しつつ UI サンプルもいくつか足して一旦正式に公開しようということでこの記事を書いています。
Tailwind UI リスペクトな、Tailwind CSS を使用した日本語ウェブサイト向け UI サンプル集を試しに作ってみてるんですけど需要あるでしょうかね（まだサンプルの数は少ない）https://t.co/WCdRnCLF3g
— Yoshiki Kato (@burnworks) August 13, 2021
Tailwind UI リスペクトで制作したライブラリではありますが、Tailwind UI にはない、日本語のウェブサイトでよく使われそうな UI を数多く集めたライブラリを目指して少しずつ拡充していこうかなと思っています。
というのも、Tailwind UI は冒頭にも書いた通り素晴らしいライブラリなんですが、各 UI のデザインは、英語圏の方が英語圏のデザインテイストで作成しているわけで、普段日本語で、特に企業の Web サイトを制作している場合によく使いそうな UI が案外少ないなと感じていました。
また、Tailwind UI 以外にも Tailwind CSS を利用した UI コンポーネントのライブラリ的なものは結構あるんですが、日本語で作られたものはあまり見たことがなかったので自分で作ってみるのも面白そう、そして、実際に自前で UI コンポーネントを作るケースも多く、使い回しできそうなソースコードも手元にいくつかあったので、それを公開してみようという感じです。
ということで改めて、「バーンワークス UI ライブラリ」 という名前で、Tailwind CSS 使用した日本語ウェブサイト向け UI サンプル集を作ってみましたという告知。
バーンワークス UI ライブラリは、Tailwind CSS 使用した日本語ウェブサイト向け UI サンプル集です。各 UI コンポーネントは HTML と React 向けのソースコードがコピーできます。Vue 用のソースコードもコピーできるようにしたかったんですが、私が普段 Next.js 中心に触っていて、Vue はそこまで詳しくないので後回しに。追々お勉強して足すかもしれません。
ソースコードはなるべく汎用性があって、カスタマイズするときにもしやすいように意識はしたつもりですが、何かおかしい点とか、実際に使ってみたけど意図した通りにならないぞ、みたいのがありましたらフィードバック頂けるとありがたいです。
使い方のヒントは、ヘルプページに簡単にまとめています。
なお、バーンワークス UI ライブラリで公開しているサンプルソースコードは、Tailwind CSS 2.0 以降 （当方の開発環境では v2.2.7 を使用） の使用が前提になりますので、最新の Tailwind CSS を使用してください。
また、一部コンポーネントは、Tailwind CSS 用のプラグイン （拡張機能） の使用や、「Just-in-Time」 モードの有効化が前提になっているものもあります。その辺はサンプルソースコードにコメントとして入れてありますので利用時にはご確認ください。
