LoginSignup
294
247

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

Last updated at Posted at 2023-01-02

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

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

Tailwind UI(有料)

Tailwind UI
https://tailwindui.com/

  • すべてのテンプレートを使用するにはライセンス購入が必要
  • シンプルなデザインはとても汎用的
  • React や Vue を使用したテンプレートも有

Headless UI

Headless UI
https://headlessui.com/

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

Preline UI

Preline UI
https://preline.co/

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

Pines

Pines
https://devdojo.com/pines

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

Wickedblocks

Wickedblocks
https://wickedblocks.dev/

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

Tailblocks

Tailblocks
https://tailblocks.cc/

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

Windstatic

Windstatic
https://windstatic.com/

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

TailwindTemplates

TailwindTemplates
https://tailwindtemplates.io/templates

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

taildashboards

taildashboards
https://taildashboards.com/

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

Flowrift

Flowrift
https://flowrift.com

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

Meraki UI

Meraki UI
https://merakiui.com/

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

HyperUI

HyperUI
https://www.hyperui.dev/

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

Tail-kit

Tail-kit
https://www.tailwind-kit.com/

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

Flowbite

Flowbite
https://flowbite.com/

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

Tailwind Stamps

Tailwind Stamps
https://tailwindcss.5balloons.info/

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

Sailboat UI

Sailboat UI
https://sailboatui.com

PostSrc

PostSrc
https://postsrc.com/components

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

Tailwind Starter Kit

Tailwind Starter Kit
https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation

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

daisyUI

daisyUI
https://daisyui.com/

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

Tailmater

Tailmater
https://aribudin.github.io/tailmater/

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

shadcn/ui

shadcn/ui
https://ui.shadcn.com/

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

React Aria

React Aria
https://react-spectrum.adobe.com/react-aria/

Stitches

Stitches
https://stitches.hyperyolo.com/

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

Stablo

Stablo
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://www.tailwindtoolbox.com/

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

Tailwind Awesome

Tailwind Awesome
https://www.tailwindawesome.com/

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

CodePen で「Tailwind」と検索する

CodePen で「Tailwind」と検索する
https://codepen.io/search/pens?q=Tailwind

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

管理者用テンプレート

Windmill

Windmill
https://windmillui.com/dashboard-html

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

Cleopatra

Cleopatra
https://github.com/moesaid/cleopatra

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

Mosaic Lite

Mosaic Lite
https://github.com/cruip/tailwind-dashboard-template

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

Windster

Windster
https://github.com/themesberg/tailwind-dashboard-windster

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

Tailwind Admin Template

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://github.com/themesberg/flowbite-admin-dashboard

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

Tailwind CSS 便利ツールの紹介

Tailwind CSS IntelliSense

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

Prettier plugin for Tailwind CSS

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

Tailwind Play

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

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

Tailwind CSS Cheat Sheet

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

Windy(有料)

  • 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://tailscan.com/colors

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
294
247