Libx Awesomeリスト

    このページの内容

    Awesome Tailwindcss

    Tailwindcssを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

    目次

    便利なリンク

    凡例: 💙 公式リソース

    • 💙 Website - 公式Tailwind CSSウェブサイト。
    • 💙 Repository - 公式Tailwind CSSリポジトリ。
    • 💙 Tailwind Plus - Tailwind CSSチームによるUIブロック、テンプレート、UIキット。
    • 💙 Headless UI - 完全にスタイルなしで、完全にアクセシブルなUIコンポーネント。
    • 💙 Heroicons - 美しく手作りされたSVGアイコン。
    • 💙 Play - Tailwind CSS向けの高度なオンラインプレイグラウンド。
    • 💙 Discord - Tailwind CSSについて他のコミュニティメンバーとつながる公式Discordサーバー。
    • Tailwind Weekly - Tailwind CSSに関する週刊ニュースレター。

    IDE拡張機能

    凡例: 💙 公式リソース

    ツール

    凡例: 🌍 オンラインでアクセス可能 · 🌐 ブラウザー拡張機能 · 🔼 変換またはアップグレードツール · 🔧 ジェネレーター · 🅰 型付け／強制 · 💼 外部サービス向けプラグイン／ツール／拡張機能 · 🎨 色関連 · 🚀 フレームワーク

    • 💙💼 Prettier plugin - Prettier向けの公式Tailwind CSSプラグイン。
    • 🎨🌍🔧 UI colors - Tailwind CSS向けカラーパレットジェネレーター。
    • 🎨🌍🔧 Tailwind Color Shades - Tailwind CSS向けカラーシェードジェネレーター。
    • 🎨🌍🔧 TailwindInk - Tailwind CSSパレットで学習したAIパレットジェネレーター。
    • 🎨🌍🔧 Hypercolor - 方向オプションを持つTailwind CSSグラデーションのコレクション。
    • 🎨🌍🔧 Tints - Tailwind CSS向けカラーパレットジェネレーターとAPI。
    • 🎨🌍🔧 Fullwind CSS - Tailwind CSSカラーパレットを追加のシェードで拡張します。
    • 🎨🌍🔧 Inclusive colors - 詳細に調整されたWCAGアクセシブルなTailwind CSSカラーパレットを作成します。
    • 🎨🌍🔧 FreeColorPalettes.co - 任意のhex色から50～950のTailwind CSSカラースケールを生成します。
    • 🌍🔧 Base-2 Rounding - Tailwind CSS v4の括弧なし任意値向けスペーシング・サイズ値ピッカー。
    • 🔼🌍 Prefixer - Tailwindクラスのプレフィックス付与ツール。
    • 🔼 RustyWind - Tailwind CSSクラスをソートするCLIツール。
    • 🔼 Tailwind to Inline styles converter - メールテンプレート内のTailwind CSSクラスをインラインスタイルへ変換します。
    • 🚀 Maizzle - Tailwind CSSによる高速なメールプロトタイピングのためのフレームワーク。
    • 💼 @nuxtjs/tailwindcss - PurgeCSSとモダンCSS（preset env 1）を備えるNuxt.js向けTailwind CSSモジュール。
    • 💼 tailwindcss-rails - Railsのasset pipelineでTailwind CSSを使用するためのGem。
    • 💼 Config viewer - Tailwind CSS設定ファイルを可視化するローカルUIツール。
    • 💼 Raycast extension - Raycast Launcherでクラス、ドキュメント、色を検索します。
    • 💼 NativeWind - Tailwind CSSをスクリプト言語として使用し、React Native向けのユニバーサルスタイルシステムを作成します。
    • 🌐 Gimli Tailwind - ブラウザー拡張機能としてのTailwind CSS向けスマートツール。
    • 🌐 CSS Variables Editor - daisyUIとshadcn/uiの色を管理するAI駆動Chrome拡張機能。
    • 🌐 DivMagic - 任意のウェブ要素とスタイルをTailwind CSSコンポーネントとしてコピーします。

    UIライブラリ、コンポーネント、テンプレート

    凡例: 💙 公式リソース · 📚 UIライブラリ · 🧩 コピーして貼り付け可能なコンポーネント · 📁 完全なテンプレート

    • 💙🧩 Tailwind UI - Tailwind CSSで作られたコンポーネントライブラリ。
    • 💙📚 Headless UI - 完全にスタイルなしで、完全にアクセシブルなUIコンポーネント。
    • 💙📁 Catalyst - React向けの美しくアクセシブルなアプリケーションUIキット。
    • 🧩 shadcn UI - Radix UIとTailwind CSSを使用して構築された再利用可能なコンポーネント。
    • 🧩 Layouts for Tailwind - Tailwind CSS向けレイアウトとUIパターン。
    • 🧩 Meraki UI Components - RTL言語をサポートする美しいTailwind CSSコンポーネント。
    • 🧩 HyperUI - オープンソースのマーケティング・eコマース向けTailwind CSSコンポーネント。
    • 🧩 Ripple UI - クリーンでモダンかつ美しいTailwind CSSコンポーネント。
    • 🧩 Pines UI - AlpineとTailwind CSSのUIライブラリ。
    • 🧩 Kokonut UI - モダンで対話的、カスタマイズ可能なUIコンポーネントのコレクション。
    • 🧩 8bitcn UI - Shadcn UIとTailwind CSSを使用して構築された再利用可能なレトロコンポーネント。
    • 🧩 Xtend UI - 高度なインタラクションとアニメーションを備えるTailwind CSSコンポーネント。
    • 🧩 Tremor - Tailwind CSSでグラフとダッシュボードを構築するReactライブラリ。
    • 🧩 Radian UI - CLIを備える、Tailwind CSSで構築されたアクセシブルかつカスタマイズ可能なReactコンポーネント。
    • 📚 Daisy UI - Tailwind CSS向けUIコンポーネント。
    • 📚 Flowbite - Tailwind CSSで構築されたコンポーネントライブラリ。
    • 📚 STDF - SvelteとTailwind CSSに基づくモバイルウェブコンポーネントライブラリ。
    • 📚 Date picker - Tailwind CSSとvanilla JavaScriptで構築されたdatepickerコンポーネントを追加します。
    • 📚 Appica UI - Tailwind CSS上に構築され、対応するFigmaライブラリを備えるオープンソースReactコンポーネントライブラリ。
    • 📁 Built at lightspeed - 500以上のTailwindテンプレート、スターター、UIキットの大規模ディレクトリ。
    • 📁 Admin One Vue 3 - ViteとVue CLIをサポートする無料Vue.js 3 Tailwind CSS管理テンプレート。
    • 📁 Admin One React - Next.jsとTypeScriptを備える無料React.js Tailwind CSS管理テンプレート。
    • 📁 Flowbite Admin Dashboard - Tailwind CSSとFlowbiteで構築されたオープンソース管理ダッシュボードテンプレート。
    • 📁 Astro Template Cactus - Tailwind CSS Astroスターターテンプレート。
    • 📁 Astro Template Ovidius - Tailwind CSSとAstroのブログテンプレート。
    • 📁 Astro Template Dante - Tailwind CSSとAstroのブログ／ポートフォリオテンプレート。

    プラグイン

    凡例: 💙 公式プラグイン · 🎨 テーマ設定 · 💼 ユーティリティ · 🧩 コンポーネント · 🛑 非推奨

    • 💙🧩 Typography - 美しいタイポグラフィのデフォルトを持つproseクラスを追加します。
    • 💙 Forms - フォーム要素へより良いデフォルトスタイルを追加します。
    • 🎨 Themer - CSS変数とvariantsを用いるTailwind CSSのテーマ設定サポートを追加します。
    • 💼 Bootstrap grid - Bootstrapスタイルのflexboxグリッドシステムを生成します。
    • 💼 Dot & grid backgrounds - CSSだけで容易にカスタマイズ可能なグリッド・ドットパターン背景を追加するbg-gridとbg-dotクラスを追加します。
    • 💼 Leading Trim - Capsizeを使用し、テキストの空白をトリミングするユーティリティを追加します。
    • 💼 Scrollbar Hide - スクロールバーを視覚的に非表示にするscrollbar-hideクラスを追加します。
    • 💼 px to viewport - pxをvw／vhへ自動変換するユーティリティを追加します。
    • 💼 tailwind-hitslop - タッチターゲットを見えない形で広げるhit-slopユーティリティを追加します。React NativeのhitSlopと同様です。
    • 💼 tw-fade - スクロールを認識した端部フェードを可能にするfade-t／-b／-x／-yユーティリティを追加します。
    • 💼🧩 Fluid - 組み込みユーティリティすべての流動的なclamp()版を追加します。
    • 🧩 Debug screens - 現在アクティブな画面（レスポンシブブレークポイント）を表示するコンポーネントを追加します。



    ·

    貢献を歓迎します！最初に貢献ガイドラインをお読みください。