Tailwind CSS を使う際に便利な UI コンポーネント・キット等の参考サイトをまとめました。
目次
UI 系
Tailwind UI
公式サイト:https://tailwindui.com/
Tailwind CSS 公式が作成している UI コンポーネント。
ランディングページのヒーロー、機能セクション、ニュースレターの登録フォームなど、美しいデザインで作られた 400 種類以上のコンポーネントが用意されています。
一部無料で使用できますが、本格的に使いたいとなると有料プランに入る必要があります。
有料プランが気になる方は、Tailwind CSS Pricing をご覧ください。
daisyUI
公式サイト:https://daisyui.com/
npm でパッケージが公開されている Tawilwind CSS で作られた UI コンポーネント。
Bootstrap の class="btn btn-primary"
のような形で daisyUI が定義しているのが特徴です。
Tailwind CSS はベタがきで HTML を書いていくサイトには合わない印象ですが、これなら活用できるかもしれません。
10 種類のテーマが用意されていて、それぞれデザインも素敵で可愛らしい印象です。
headless UI
公式サイト:https://headlessui.dev/
npm でパッケージが公開されている Tawilwind CSS で作られた UI コンポーネント。
React や Vue を使う前提でコンポーネントが用意されており、 Web アプリケーションを構築していく際に使うと便利だと思います。
Lofi UI
公式サイト:https://lofiui.co/
約 40 種類の UI コンポーネントが閲覧でき、ソースコードは CodePen で公開されています。
Kometa UI Kit
公式サイト:https://kitwind.io/products/kometa
約 130 種類以上の HTML、Vue、React で使用できる UI コンポーネントが用意されています。
Vechai UI
公式サイト:https://www.vechaiui.com/
npm でパッケージが公開されている Tawilwind CSS で作られた UI コンポーネント。
Preact cli, Next.js, Gatsby, およびその他の環境で使用できる UI コンポーネントが用意されています。
Supabase UI
公式サイト:https://ui.supabase.io/
npm でパッケージが公開されている Tawilwind CSS と AntDesign に触発された UI コンポーネント。
Windmill UI
公式サイト:https://windmillui.com/
npm でパッケージが公開されている Tawilwind CSS で作られた UI コンポーネント。
主に、React を使用する前提で UI コンポーネントが作られています。
Meraki UI
公式サイト:https://merakiui.com/
約 60 種類のデザインが美しい Tailwind CSS で作られた UI コンポーネント。
ダークモードにも対応しています。
TAILBLOCKS
公式サイト:https://tailblocks.cc/
Web サイトを構築する際に、便利な Tailwind CSS で作られた UI コンポーネント。
Tail-kit
公式サイト:https://www.tailwind-kit.com/
約 250 種類の React、Vue、Angular で使用できるコンポーネント が用意されています。
Tailwind Toolbox
公式サイト:https://www.tailwindtoolbox.com/
UI テンプレートや、使うと便利なジェネレータ、ツールなどが掲載されているサイト。
Tailwind Templates
数は少ないですが、Tailwind CSS で作られたテンプレートが用意されています。
tailwindcompontnes
公式サイト:https://tailwindcomponents.com/
Tailwind CSS で作られたテンプレートサイトや UI コンポーネントが用意されています。
これまでとは少し変わった、ユーザー投稿型の参考サイトです。
Treact
公式サイト:https://treact.owaiskhan.me/
Tailwind CSS を使用して構築された、React 用のテンプレートサイトです。
約 50 種類の UI コンポートと、7 つのランディングページが用意されています。
TailwindCSS Buttons
公式サイト:https://devdojo.com/tailwindcss/buttons
【コピペで使える!CSS のボタンデザイン】系の Tailwind CSS バージョンです。
SVG 系
heroicons
公式サイト:https://heroicons.com/
Tailwind CSS が作成(?)しているSVG アイコン。
hero-patterns
公式サイト:https://www.heropatterns.com/
SVG 背景パターン。
とてもおしゃれな背景パターンが用意されています。