Tailwind CSS のテンプレート & UI キット集【まとめ】

Tailwind CSS のテンプレートサイトを使えば Web サイトを効率よく作成できます。簡単ではありますが個人的に素敵だと思った Tailwind CSS のテンプレートサイトをまとめてみました。

# Tailwind CSS テンプレート＆ UI キットサイト

## Tailwind Plus（有料）

[![Tailwind Plus](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/bdf4221b-8886-e458-8491-51d6c9345e9d.png)](https://tailwindcss.com/plus)
https://tailwindcss.com/plus

- すべてのテンプレートを使用するにはライセンス購入が必要
- シンプルなデザインはとても汎用的
- React や Vue を使用したテンプレートも有
- Tailwind CSS の開発元が提供しているテンプレートとUI kit 集

## Headless UI

[![Headless UI](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/63dac674-adfb-5dcc-3942-ed7ebf6fa23c.jpeg)](https://headlessui.com/)
https://headlessui.com/

- ドロップダウンやダイアログ等の「機能」をメインとした UI コンポーネント集
- サンプルコードは React か Vue.js の2種類から選択できる。 
- MIT ライセンス

## Preline UI

[![Preline UI](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/7b2a93f2-5bfe-90dc-963c-7df5f0c54a88.png)](
https://preline.co/)
https://preline.co/

- 無料で使用できる
- UIコンポーネントの数がすごい！
- ドキュメントページが細かく説明されている

## Pines

[![Pines](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/623f1615-0e0a-c644-1cb1-d86b8482d260.png)](
https://devdojo.com/pines)
https://devdojo.com/pines

- 必要なライブラリは Alpine.js と Tailwind CSS だけ。
- アニメーション、スライダー、ツールチップなど多彩なテンプレートがある。
- ドキュメント完備。はじめてテンプレートを使用するユーザーも :smile: 


## Tailkits

[![Tailkits](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/4139f7b7-3acf-cafe-b98b-d285b387927c.jpeg)](
https://tailkits.com/)
https://tailkits.com/

- 無料と有料のテンプレート、UI キット、コンポーネント集サイト
- コンポーネントの数多く、使用する際の解説もあり
- 無料テンプレートや便利ツール多数収録「お気に入り登録」おススメ！

## Wickedblocks

[![Wickedblocks](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/abf95261-8b9e-8af2-aeec-dd422a67b351.png)](
https://wickedblocks.dev/)
https://wickedblocks.dev/

- プレビューを見ながら必要なコンポーネントだけをコピーできる
- ドロップダウンメニューに Alpine.js の記述がされていて良い
- 細かいところに手が届く Tailwind パーツ集

## Tailblocks

[![Tailblocks](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/4d198af4-559b-ed86-f59a-4c355d8d1ca7.png)](
https://tailblocks.cc/)
https://tailblocks.cc/

- 無料でテンプレートを使用可
- 目的別にテンプレートがまとめられていて使いやすい
- EC サイト関連のテンプレートは是非見ておきたい

## Windstatic

[![Windstatic](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/d58ce176-a689-290e-b5a1-0a034fe94b16.jpeg)](
https://windstatic.com/)
https://windstatic.com/

- CC BY 3.0 ライセンス
- テンプレートには Tailwind CSS と Alpine.js を使用
- シンプルなので簡単なモックアップや LP サイトにピッタリ！

## TailwindTemplates
[![TailwindTemplates](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/b546703f-dbdd-0b2f-0126-c660799a6b21.jpeg)](
https://tailwindtemplates.io/templates)
https://tailwindtemplates.io/templates

- 無料でテンプレートを使用可
- コンポーネントは「テーマ」「カテゴリ」別にまとめられている
- パーツの数は非常に多種多様で見ていて面白い

## taildashboards
[![taildashboards](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/1f9d9ba0-b011-8e89-c51a-3310c7c9cf5b.jpeg)](
https://taildashboards.com/)
https://taildashboards.com/

- Tailwind と Alpine.js を使用したテンプレート集
- 有名サイトをオマージュしたデザインは汎用性高く便利
- テンプレートは無料で使用可
- ダッシュボードのデザインも多数あるので活用したい

## Flowrift

[![Flowrift](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/09ccc2bd-7d09-0d12-1d37-6c3fbcb0515b.png)](
https://flowrift.com)
https://flowrift.com

- ヘッダやブログページ、ギャラリーページ等、パーツごとにコピペ可能
- テンプレートは個別にプレビュー画面で確認できるのが良い
- 簡単な LP サイトのモックアップを作成する際にとても便利

## Meraki UI

[![Meraki UI](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/3e06c206-8e66-ceab-143a-5fdc72bbbdb8.jpeg)](
https://merakiui.com/)
https://merakiui.com/

- Tailwind のコンポーネント部分は無料。テンプレートは有料 or 無料がある
- 「左寄せ」と「右寄せ」の選択が可能なコンポーネントは重宝する。
- SPA プロダクトに最適な「スケルトン」コンポーネントあり。

## HyperUI

[![HyperUI](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/3589bbbd-7638-34f9-f825-9ef399e042e9.jpeg)](
https://www.hyperui.dev/)
https://www.hyperui.dev/

- 無料のオープンソースライブラリ
- 必要最小限のコンポーネントパーツとして利用することができる
- アクセントととなるコンポーネントを探すアイディアにも◎

## Tail-kit

[![Tail-kit ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/e4198306-38c4-d372-3e44-40c41ac3f46f.jpeg)](
https://www.tailwind-kit.com/)
https://www.tailwind-kit.com/

- MIT ライセンス
- 250 を超える無料コンポーネントと無料テンプレートを使用可
- ダークモード設定のテンプレートあり。コードはコピペで楽々。

## Flowbite

[![Flowbite](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/693c37e5-646c-2239-cf6b-98cb2a020698.jpeg)](
https://flowbite.com/)
https://flowbite.com/

- MIT ライセンス
- コンポーネントは Flowbite 専用のプラグインを読み込む必要あり
- ドキュメントが非常に充実。Figma デザインシステムあり

## Tailwind Stamps

[![Tailwind Stamps](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/eb216939-0bda-4d7f-50e3-4c58a37996af.jpeg)](
https://tailwindcss.5balloons.info/)
https://tailwindcss.5balloons.info/

- MIT ライセンス
- Alpine.js をベースに動きのあるコンポーネントを多数収録
- ピンポイントで欲しいパーツだけ欲しい場合に重宝するサイト

## Sailboat UI

[![Sailboat UI](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/b752d4ea-f050-5cf3-ebf8-773bdc8a8b4c.png)](
https://sailboatui.com/)
https://sailboatui.com

- MIT ライセンス
- コピペできる便利な UI コンポーネントを多数収録
- ドキュメントあり。使い方を知りたい際はまずチェック！
https://sailboatui.com/docs/getting-started/quick-start/

## PostSrc

[![PostSrc](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/efb2ffdc-b070-5873-2899-41aaed393739.jpeg)](
https://postsrc.com/components)
https://postsrc.com/components

- 「パンくずリスト」や「アバター」「バッジ」等のコンポーネント多数あり
- チャートを使用したコンポ―ネントも有り。使用方法も解説しており丁寧
- 無料で使用可

## Tailwind Starter Kit
[![Tailwind Starter Kit](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/0e15cd4b-7c84-543e-4955-c933f18d6fbc.png)](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation)
https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation

- MIT ライセンスで無料で使用可
- ランディングページやプロフィールページ等、未編集でもすぐに使用できそう
- ドキュメントページもあり使い方を確認できる。

## daisyUI
[![daisyUI](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/6a390be2-1f60-0217-0bdd-68a2bf3b51dd.jpeg)](https://daisyui.com/?lang=jp)
https://daisyui.com/

- Tailwind CSS のプラグイン
- Tailwind CSS を使用しながら Bootstrap のようなクラス名の記述が可能
- ドキュメントサイトがとても充実。カスタマイズやそのた設定等充実

## Tailmater
[![Tailmater](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/be6d7b0e-9dbd-6b2c-6556-993734293a78.jpeg)](https://aribudin.github.io/tailmater/)
https://aribudin.github.io/tailmater/

- MIT ライセンス
- すべてのコンポーネントに「ライトモード」「ダークモード」の設定あり
- コンポーネントを使用する際は、GitHub のリポジトリ詳細ページより DL できます（下記 URL 参照）
https://github.com/aribudin/tailmater

## shadcn/ui

[![shadcn/ui](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/1e6ce4e6-cd39-2684-bf10-e774183e3e30.jpeg)](
https://ui.shadcn.com/)
https://ui.shadcn.com/

- MIT license 
- npm パッケージをインストールせずに「コピー&ペースト」して UI を作成していくコンポーネントのコレクション
- Next.js や Vue、Laravel などいろいろなフレームワークのインストール方法あり

## React Aria

[![React Aria](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/2574cff4-4421-3baf-f4d0-bbd990a86088.png)](
https://react-spectrum.adobe.com/react-aria/)
https://react-spectrum.adobe.com/react-aria/

- Adobe 製の React UI コンポーネントライブラリ
- Apache License 2.0
- Tailwind CSS のスターターキットが配布されておりデザイン性の高いコンポーネントを利用可能
https://react-spectrum.adobe.com/react-aria/getting-started.html#starter-kits

## Stitches

[![Stitches](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/c3c5a9d5-1928-958f-fd40-b8d528dae6be.png)](
https://stitches.hyperyolo.com/)
https://stitches.hyperyolo.com/

- DnD で Tailwind CSS でデザインされた HTML ファイルを DL できる。
- シンプルなデザインでモック作成等に便利。
- GitHub で公開されているため ローカルに DL してオフラインで使用できる。

## Stablo
[![Stablo](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/e96b660c-1e09-070e-7335-1502c53c2477.png)](https://stablo.web3templates.com/)
https://stablo.web3templates.com/
https://github.com/web3templates/stablo (GitHub リポジトリ)

- GPL-2.0 ライセンス
- インスタ風のフォトメインブログとしてデザイン性抜群
- Next.js 使用。Live Demo ページ（ https://stablo.web3templates.com/ ）もあるので開発者ツールを使いながら Tailwind CSS の書き方を学びたいところ。

## Tailwind Toolbox
[![Tailwind Toolbox](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/4f3e6b52-bd8e-23dd-9225-d328516f7f0d.png)](https://www.tailwindtoolbox.com/)
https://www.tailwindtoolbox.com/

- Tailwind のテンプレート＆コンポーネントのまとめサイト
- UI キットや有償テンプレート、便利ツールやプラグインまで網羅
- 無料で使えるテンプレートも多数紹介されている

## Tailwind Awesome 

[![Tailwind Awesome](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/d1d1653e-9733-6466-81f9-dc7f3c6e93dd.png)](
https://www.tailwindawesome.com/)
https://www.tailwindawesome.com/

- Tailwind テンプレートのまとめサイト
- 有償、無料テンプレートがサムネを見て選択できる
- UI キットのタブメニューもある

## CodePen で「Tailwind」と検索する
[![CodePen で「Tailwind」と検索する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/d920a2b9-55c2-9d81-6f98-ff026f057ba0.png)](https://codepen.io/search/pens?q=Tailwind)
https://codepen.io/search/pens?q=Tailwind

- CodePen に投稿されている Tailwind CSS の作品もとても参考になる。
- JavaScript と組み合わせた「動きのあるデザイン」が豊富。
- コピペできて手軽に利用できる。

# 管理者用テンプレート

## Windmill
[![Windmill](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/3e46c970-618a-f258-1c75-af51f31aa66f.png)](https://windmillui.com/dashboard-html)
https://windmillui.com/dashboard-html

- Tailwind CSS 製の管理者ページ向けのテンプレート
- テーブルやチャートのサンプルページもあるのが GOOD ！
- ダークモードも使用できる :thumbsup:

## Cleopatra
[![Cleopatra](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/d8887b79-1e87-568b-0205-adb06254773d.png)](https://github.com/moesaid/cleopatra)
https://github.com/moesaid/cleopatra

- MIT ライセンス
- 管理画面でありながらデザインがシンプルで見やすい。
- チャートやメールボックスもあり応用可。

## Mosaic Lite 
[![Mosaic Lite](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/dd1ae74d-5733-88bd-e03d-84b79d7d0d1d.png)](https://github.com/cruip/tailwind-dashboard-template)
https://github.com/cruip/tailwind-dashboard-template

- GPL ライセンス
- Tailwind CSS と React で作成されている
- 管理画面でもデザイン性抜群。デモページもご覧いただきたい ↓
- https://mosaic.cruip.com/

## Windster
[![Windster](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/5684369b-abba-3ba5-85c1-6f7cac5a2789.png)](https://demo.themesberg.com/windster/)
https://github.com/themesberg/tailwind-dashboard-windster

- MIT ライセンス
- デモページのサンプルページの数多い。凄まじい
- ログイン画面やチャート、テーブル画面もしっかりあり、管理者画面のフルセット感あり

## Tailwind Admin Template
[![Tailwind Admin Template](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/a0a007b6-5733-bb4e-89b7-5d3c87e8adf4.png)](https://davidgrzyb.github.io/tailwind-admin-template/)
https://davidgrzyb.github.io/tailwind-admin-template/
https://github.com/davidgrzyb/tailwind-admin-template

- Apache License, Version 2.0
- テーブルやカレンダーなどの個別ページのサンプルあり
- Tailwind を勉強する際の参考になりそうな管理者画面

## Flowbite Admin Dashboard

[![Flowbite Admin Dashboard](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/79a9763a-6a84-8e91-c833-eb590a1d0667.jpeg)](https://github.com/themesberg/flowbite-admin-dashboard)
https://github.com/themesberg/flowbite-admin-dashboard

- MIT ライセンス
- Flowbite のコンポーネントで構築されたテンプレート
- デモページが多数あり、管理画面のバリエーションとして十分な内容

---
# Tailwind CSS 便利ツールの紹介

## Tailwind CSS IntelliSense
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

- VSCode の拡張機能。Tailwind CSS のクラス名を自動補完してくれる
- クラス名を間違って書いてしまってもハイライト表示してくれる
- VSCode で Tailwind CSS のクラス名をホバーすると素の CSS が表示されるので、どのようにスタイルを設定しているか理解しやすい

## Prettier plugin for Tailwind CSS
https://github.com/tailwindlabs/prettier-plugin-tailwindcss

- Tailwind CSS のクラス名を自動的に並べ替えるプラグイン
- 他の Prettier プラグインとの互換性に注意。回避策は GitHub の README ファイルに記載

## Tailwind Play

https://play.tailwindcss.com/

- Web 上のエディタを編集してリアルタイムでブラウザ確認できる。
- ちょっとしたコンポーネントを作成したい場合に使用すると便利。
- Twitter 等で Tailwind Play で作成されたコンポーネントがシェアされているので参考になる。

:::note info
ぜひ Twitter にて「play.tailwindcss.com」で検索してみてください ↓
https://twitter.com/search?q=play.tailwindcss.com&f=live
:::

## Tailwind CSS Cheat Sheet

https://tailwindcomponents.com/cheatsheet/

- テンプレートサイトというか Tailwind CSS のチートシートサイト
- ひと目で、クラス名の一覧が分かるのが GOOD！
- 公式サイトへのリンクもあり便利

## Windy（有料）

https://usewindy.com/

- Chrome と Firefox で使用できるブラウザ拡張機能プラグイン。
- カーソルを合わせるだけで、Tailwind CSS クラスを取得できる。
- Web サイトにて動作の体験ができるため一度確認することをお勧め。

## Tailwind CSS Colors

[![Screenshot 2024-04-12 at 19-12-39 Tailwind CSS Colors - Cheatsheet for Tailwind colors2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106716/36df384a-eb4d-a4e7-bc09-e9cdbf032f50.jpeg)](https://tailscan.com/colors)
https://tailscan.com/colors

- Tailwind CSS の class 名で指定できる色を 16進数、hsl、RGB 値のチートシートにしたサイト
- 指定の色パネルをクリックするとクリップボードに色情報がコピーされます
- Tailwind CSS の class 名の色情報を取得したい際はセレクトボックスを「class」に指定してください