Tailwind CSSの開発をより効率的に！おすすめのTailwind Pluginsリスト

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

Tailwind CSSプロジェクトのワークフローをスピードアップしたいですか？この素晴らしいTailwindプラグインのリストをチェックして、あなたのワークフローを楽にしましょう。

Tailwindとは？なぜ人気なのか？
- Tailwindのメリット
Tailwindプラグインとは?
- Tailwindでプラグインを使う方法
- プラグイン関数とは?
公式Tailwindプラグインリスト
Tailwind CSS Plugins List
まとめ

Tailwindとは？なぜ人気なのか？

Tailwind CSSは、HTMLを離れることなく、カスタムデザインを作成できるユーティリティ優先のCSSフレームワークです。Adam Wathan、Jonathan Reinink、David Hemphill、Steve Schogerによって作られ、以下の理由から急速に人気が高まっています。

ユーティリティ優先のアプローチ: 開発者がHTMLに直接デザインを構築できるようになります。
レスポンシブ: モバイルファーストのクラスにより、レスポンシブデザインの作成が簡単になります。
カスタマイズ性: 設定ファイルを通して高度なカスタマイズが可能です。
CSSの肥大化の削減: スタイルシートのサイズを最小限に抑えるのに役立ちます。
迅速な開発: カスタムCSSの必要性を減らすことで、開発プロセスを加速させます。
コミュニティとエコシステム: 強力なコミュニティサポートと、プラグインやツールが成長するエコシステムを持っています。
統合: React、Vue、Angularなどの人気のフロントエンドフレームワークとの統合が簡単です。

Vueに関して言えば、VueプラグインとVueの管理テンプレートを使うことで、ワークフローを強化できます。

Tailwindのメリット

迅速なプロトタイピングと開発
高度にカスタマイズ可能なデザインシステム
プロジェクト間での一貫したスタイリング
ダイレクトなスタイリングのためのユーティリティ優先アプローチ
CSSの肥大化の削減とファイルサイズの縮小
生産性とワークフローの向上
レスポンシブデザインの容易さ
強力なコミュニティサポートとリソース
最新のフレームワークとのシームレスな統合
プロジェクトの保守性と拡張性の実現

Tailwindプラグインとは?

Tailwindプラグインは、フレームワークに新しいユーティリティ、コンポーネント、カスタム設定を追加することで、Tailwind CSSの機能と柔軟性を拡張するパッケージです。Tailwindのコア機能を超えた拡張性とカスタマイズ性が得られます。

Tailwindでプラグインを使う方法

最初のプラグインを使い始めるには、tailwindcss/pluginからplugin関数をインポートします。次に、plugins配列内で、インポートしたplugin関数に無名関数を第1引数として渡します。

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities, addComponents, e, config }) {
      // Add your custom styles here
    }),
  ]
}

プロジェクトにプラグインを追加するには、npmでインストールした後、tailwind.config.jsファイルに追加します。

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities, addComponents, e, config }) {
      // Add your custom styles here
    }),
  ]
}

プラグイン関数とは?

プラグイン関数は、単一のオブジェクト引数を受け取り、次のヘルパー関数に分解できます:

addUtilities() - 新しい静的ユーティリティスタイルを登録
matchUtilities() - 新しい動的ユーティリティスタイルを登録
addComponents() - 新しい静的コンポーネントスタイルを登録
matchComponents() - 新しい動的コンポーネントスタイルを登録
addBase() - 新しいベーススタイルを登録
addVariant() - カスタムの静的バリアントを登録
matchVariant() - カスタムの動的バリアントを登録
theme() - ユーザーのテーマ設定の値を参照
config() - ユーザーのTailwind設定の値を参照
corePlugins() - コアプラグインが有効かどうかを確認
e() - クラス名で使用される文字列をエスケープする

公式Tailwindプラグインリスト

プラグインを使えば、JavaScriptでユーザーのスタイルシートにTailwindの新しいスタイルを登録できます。

以下はTailwindによって開発された、公式Tailwindプラグインリストです。

Tailwind CSS Typography

@tailwindcss/typographyプラグインは、proseというクラスセットを追加します。このクラスは、マークダウンやCMS データベースなどのソースから来るコンテンツブロックに、賢明な組版スタイルを素早く適用するのに使えます。

このプラグインは、ブログ、ドキュメンテーションウェブサイト、オンライン出版物など、テキストコンテンツが中心のコンテンツ豊富なアプリケーションで特に役立ちます。さらに、ユーティリティクラスを活用することで、開発者はスタイルをさらにカスタマイズできます。これにより、組版がプロジェクトのデザインシステムと完全に調和するようになります。

実際の動作を確認するには、Tailwind Playのライブデモをチェックしてください。

機能:

HTMLのプロースコンテンツにデフォルトのスタイルを提供
見出し、段落、リスト、引用をスタイリングします。
ブログ、ドキュメンテーションサイト、オンライン出版物に最適
Tailwindのユーティリティクラスでカスタマイズ可能
テキスト主体のページの読みやすさと視覚的な魅力を向上
レスポンシブ組版調整をサポート
テーマカスタマイズオプションで拡張可能

インストール方法

npmからプラグインをインストール:

npm install -D @tailwindcss/typography

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

Tailwind CSS Aspect Ratio

Tailwind CSS Aspect Ratioプラグインは、Tailwindプロジェクト内で要素のアスペクト比を直接制御する簡単な方法を提供します。このプラグインを使うことで、開発者は画像、動画、iframeなどの要素の幅と高さの比率を簡単に維持でき、さまざまな画面サイズや解像度で正しく表示されます。

これは主にレスポンシブデザインにおいて有益で、アスペクト比を維持することでより一貫性のあるビジュアル体験につながります。さらに、このプラグインは要素にアスペクト比を指定するユーティリティクラスのセットも提供するため、レスポンシブでビジュアル的に一貫したWebインターフェイスを作るデザイナーや開発者にとって非常に価値があるツールとなります。

機能:

要素のアスペクト比を簡単に制御可能
幅広い定義済みアスペクト比クラスをサポート
Tailwindのテーマ拡張を通じてアスペクト比をカスタマイズ可能
レスポンシブで一貫した要素の表示を保証
画像、動画、iframeに最適
デバイス間でのビジュアルの一貫性の維持を簡素化
Tailwind CSSのユーティリティ優先アプローチとシームレスに統合

インストール方法

npmからプラグインをインストール:

npm install -D @tailwindcss/aspect-ratio

次にtailwind.config.jsファイルにプラグインを追加し、Tailwind CSS v3.0に含まれるネイティブのaspect-ratioユーティリティとの競合を避けるため、aspectRatioコアプラグインを無効化します:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  corePlugins: {
    aspectRatio: false,
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
    // ...
  ],
}

Tailwind CSS Container Queries

Tailwind CSS Container Queriesプラグインは、Tailwindにコンテナクエリの機能を拡張します。これにより、ビューポートの幅ではなく、親コンテナの幅に基づいてレスポンシブデザインを実現できます。

このプラグインを使えば、さまざまなレイアウトに柔軟に適応するコンポーネントを簡単に作成でき、Web プロジェクト全体でUIの柔軟性と再利用性が向上します。

機能:

Tailwind CSSにコンテナクエリの機能を追加
親コンテナの幅に基づくレスポンシブデザインを可能に
適応力のあるコンポーネントの作成を容易に
さまざまなコンテナベースのレスポンシブユーティリティをサポート

インストール方法

npmからプラグインをインストール:

npm install @tailwindcss/container-queries

次にtailwind.config.jsファイルにプラグインを追加:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/container-queries'),
    // ...
  ],
}

Tailwind CSS Plugins List

Tailwind Elements

TW Elementsは、MDBootstrapによる有用なTailwindプラグインの1つです。Tailwind CSS専用に設計された包括的なUIコンポーネントスイートで、モーダル、ドロップダウン、カルーセル、アコーディオンなどの事前にスタイリングされたコンポーネントやインタラクティブな要素を豊富に提供し、Tailwindのエコシステムを強化しています。

さらに、これらのコンポーネントはTailwind CSSとのシームレスな統合を念頭に作られており、開発者はユーティリティファーストのアプローチを維持しつつ、開発プロセスを大幅に加速できます。

加えて、TW Elementsは、Tailwind CSSのカスタマイズ性とユーティリティの利点を活かしながら、高度にカスタマイズ可能な既製のUIコンポーネントの利便性を求める開発者にとっても理想的な選択肢です。

機能:

幅広い事前にスタイリングされたUIコンポーネント
モーダル、ドロップダウン、カルーセルなどのインタラクティブ要素
Tailwind CSSとのシームレスな統合
開発プロセスの高速化
高度にカスタマイズ可能なコンポーネント
Tailwind CSSのユーティリティファーストアプローチをサポート
UIデザインとユーザー体験の向上

インストール方法

NPM インストール:

プロジェクトを開始する前に、Node.js (LTS) とTailwindCSSをインストールしてください。
次のコマンドを実行してNPMでパッケージをインストール:

npm install tw-elements

TW Elementsはプラグインなので、tailwind.config.jsファイルに含める必要があります。また、動的コンポーネントクラスを読み込むJSファイルを追加してcontentの配列を拡張することが推奨されています:

module.exports = {
  content: ["./src/**/*.{html,js}", "./node_modules/tw-elements/js/**/*.js"],
  plugins: [require("tw-elements/plugin.cjs")],
  darkMode: "class",
};

JSファイルを追加すれば動的コンポーネントが動作します:

<script src="./TW-ELEMENTS-PATH/js/tw-elements.umd.min.js"></script>

代替として、バンドラーバージョンでは次のように読み込めます:

import 'tw-elements';

MDB/CLIを使ってtw elementsをインストールすることもできます。さらに、パッケージをインストールせずに、クラシックなHTMLテンプレートにCDNスクリプトを追加するだけで、TW Elementsを簡単にテストできます。

FormKit Tailwind CSS

@formkit/tailwindcssパッケージは、クラスリストでご利用いただけるいくつかのバリアントを提供しており、入力やフォームの状態に動的に応答することができます。

FormKit Tailwind CSSプラグインは、FormKitの高度なフォーム構築機能をTailwindエコシステムに統合する強力な連携ツールです。このTailwindプラグインにより、FormKitのフォームと入力フィールドが自動的にTailwindのユーティリティクラスを継承するため、スタイリングの統合が簡単になり、カスタマイズ性が高まります。

さらに、Tailwindベースのプロジェクト内でレスポンシブでアクセシビリティの高い、ビジュアル的に一貫したフォームを作成するプロセスを簡素化し、FormKitの使いやすさとTailwindのデザインの柔軟性を組み合わせています。

機能:

Tailwind CSSとのシームレスな統合
フォームと入力フィールドに対するTailwindユーティリティクラスの自動継承
レスポンシブでアクセシビリティの高いフォームの作成を簡素化
フォームのカスタマイズと一貫性の向上
FormKitの高度なフォーム構築機能を活用

インストール方法

npm インストール

npm install @formkit/tailwindcss

次にtailwind.config.jsファイルにプラグインを追加:

// tailwind.config.js
module.exports {
  ...
  plugins: [
    require('@formkit/tailwindcss')
  ]
  ...
}

Tailwindcss Radix

Tailwind CSS RadixUIプラグインは、Tailwind CSSのユーティリティ優先のアプローチとRadix UIのアクセシブルなコンポーネントライブラリの橋渡しをする、カスタマイズされたソリューションです。

このTailwindプラグインを使えば、開発者はTailwind CSSのユーティリティをRadix UIコンポーネントに直接適用できます。これにより、Radixのアクセシビリティと機能性とTailwindのデザインの柔軟性とカスタマイズオプションを組み合わせたシームレスな統合が実現します。

高いアクセシビリティと機能性を備え、デザインやユーザビリティを妥協することなく、視覚的に魅力的なWebアプリケーションを作成したい開発者にとって非常に価値のあるツールです。

機能:

Tailwind CSSとRadix UIコンポーネントを橋渡し
TailwindユーティリティをRadix UIコンポーネントに適用
デザインの柔軟性を備えたシームレスな統合
Webアプリケーションのアクセシビリティと機能性の向上
視覚的に魅力のあるインターフェースの開発を簡素化
ユーザビリティを損なうことなくカスタマイズをサポート

インストール:

npm または yarn でインストール

npm i tailwindcss-radix

または

yarn add tailwindcss-radix

Copy code

プラグインを plugins 配列に追加:

module.exports = {
  theme: {
    // --snip--
  },
  variants: {
    // --snip--
  },
  plugins: [
    // Initialize with default values (see options below)
    require("tailwindcss-radix")(),
  ],
};

Tailwind CSS Fluid Type

Tailwind CSS Fluid Typeプラグインは、Tailwind CSSフレームワーク内で反応型の組版にダイナミックなアプローチを導入します。ビューポート幅に基づいてテキストサイズをフルイドにスケーリングできるようになるため、フルイド組版を簡単に実装でき、あらゆるデバイスサイズで読みやすく美しいテキストを実現できます。

さらに、このプラグインはTailwindのユーティリティファースト哲学を組版にも拡張し、スケーラブルなテキストサイズをユーティリティクラスに直接定義できるようになります。これにより、Webプロジェクトのレスポンシブ性と読みやすさが向上します。

機能:

テキストサイズのフルイドスケーリングを可能に
ビューポート幅に基づく反応型の組版
Tailwind CSSのユーティリティファーストアプローチを組版に拡張
読みやすく、スケーラブルなテキストの実装を簡素化
デバイスを越えた読みやすさの向上

インストール方法

npmからプラグインをインストール: npmの場合

npm install tailwindcss-fluid-type

Yarnの場合

yarn add tailwindcss-fluid-type

次にtailwind.config.jsファイルにプラグインを追加し、デフォルト設定に満足できない場合は設定を行います:

// tailwind.config.js
module.exports = {
    // You can disable the fontSize core plugin if you don't need non fluid font sizes. 
    // If you don't disable it, the fluid-type plugin simply overrule the default font-sizes if the keys are the same.
    // Or you can use both alongside when you set an prefix in the settings
    corePlugins: {
        fontSize: false,
        // ...
    },
    plugins: [
        require('tailwindcss-fluid-type'),
        // ...
    ],
};

Tailwind CSS Theme Swapperプラグインは、Tailwindプロジェクト内でダイナミックなテーマ切り替えを実現します。これにより、カラースキームやタイポグラフィーを簡単にカスタマイズできます。ユーザー定義のテーマをサポートしているため、ダーク/ライトモードの設定や、カスタマイズ可能なインターフェースを持つアプリケーションに最適です。このプラグインを使えば、ユーザーの好みに合わせて適応可能なWebデザインを作成しやすくなり、全体的なユーザー体験が向上します。

機能:

Tailwindプロジェクトでのダイナミックなテーマ切り替え
カラースキームとタイポグラフィーの簡単なカスタマイズ
ユーザー定義のテーマをサポート
ダーク/ライトモードやカスタマイズ可能なインターフェースに最適
適応可能なWebデザインの作成を簡素化
柔軟なテーマオプションによりユーザー体験を向上

インストール方法

npm/yarnでインストール

yarn add tailwindcss-theme-swapper

または

npm install tailwindcss-theme-swapper --save-dev

Tailwind CSS Themer

Tailwind CSS Themer プラグインは、プロジェクト内で複数のテーマを簡単に作成して適用することを可能にし、動的なテーマの切り替えをサポートします。

さらに、ダークモード/ライトモードやさまざまなビジュアルスタイルを必要とするインターフェイスに最適であり、シームレスなテーマ管理を通じてウェブデザインの柔軟性とユーザーエクスペリエンスを向上させます。

特徴:

複数のテーマの作成と適用を可能にします
動的なテーマの切り替えをサポートします
ダーク/ライトモードの実装に最適です
さまざまなビジュアルスタイルを持つインターフェイスの構築を容易にします
ウェブデザインの柔軟性を向上させます
シームレスなテーマ管理により、ユーザーエクスペリエンスを向上させます

インストール方法:

npm を使用して tailwindcss-themer をインストールします:

# npm の場合:
npm install --save-dev tailwindcss-themer

# yarn の場合:
yarn add --dev tailwindcss-themer

tailwind.config.js ファイルに、tailwindcss-themer をプラグインの配列に追加します:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-themer')
    // ...
  ]
}

Tailwind Bootstrap Grid

Tailwind Bootstrap Grid プラグインは、Tailwind CSS を Bootstrap のグリッドシステムと統合します。さらに、Tailwind プロジェクト内でレスポンシブレイアウトの機能も提供します。

さらに、Bootstrap のグリッドの堅牢さと Tailwind のカスタマイズ性を求める開発者に対応し、複雑なレイアウトを簡単に作成できます。

特徴:

Bootstrap のグリッドシステムを Tailwind CSS に統合します
レスポンシブかつ適応性のあるレイアウトを可能にします
Bootstrap から Tailwind への移行を希望する開発者に最適です
複雑なレイアウトを簡単に作成できます
Tailwind のカスタマイズ性と Bootstrap のグリッドの堅牢さを組み合わせます

Bootstrap について話題にするなら、Bootstrap Admin テンプレートを使用してワークフローを向上させることを検討してみてください。プラグインと同様に、事前に設計された管理用テンプレートを使用すると、ワークフローを加速し、多くの時間を節約できます。

たとえば、Materio Bootstrap Admin Template Free をチェックできます。

インストール方法:

npm install
npm i -D tailwind-bootstrap-grid

tailwind.js ファイルにプラグインを追加してください:

module.exports = {
  plugins: [
    require('tailwind-bootstrap-grid')({
      containerMaxWidths: {
        sm: '540px',
        md: '720px',
        lg: '960px',
        xl: '1140px',
      },
    }),
  ],
};

Tailwind CSS 3d

Tailwind CSS 3D プラグインは、Tailwind CSS フレームワークに3D変換ユーティリティを提供します。これにより、開発者は簡単にウェブプロジェクト内で3D効果を実装できます。

さらに、この Tailwind CSS プラグインは、Tailwind のユーティリティファーストのアプローチを拡張し、単純な回転から複雑な透視変換まで、新しいデザインの可能性の次元を追加します。

また、このプラグインは、インターフェイスに奥行きと動きを追加したい開発者を対象としており、視覚的に魅力的な3D要素を通じてユーザーエンゲージメントを向上させます。さらに、Tailwind CSS と直接統合されているため、動的でインタラクティブな、見栄えの良いウェブエクスペリエンスを作成するためのシームレスなワークフローを提供します。ぜひお試しください。

特徴:

Tailwind CSS に3D変換ユーティリティを導入します
3D効果の簡単な実装を可能にします
単純な回転から複雑な透視変換までサポートします
インターフェイスに奥行きと動きを追加するために設計されています
視覚的に魅力的な3D要素でユーザーエンゲージメントを向上させます
Tailwind CSS とシームレスに統合されたスムーズなワークフローを提供します

インストール:

npm またはお好みのパッケージマネージャーを使用してプラグインをインストールします:

# npm
npm install -D tailwindcss-3d

# yarn
yarn add -D tailwindcss-3d

# pnpm
pnpm add -D tailwindcss-3d

次に、プラグインを tailwind.config.js ファイルに追加します:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-3d'),
    // ...
  ],
}

まとめ

以上、Tailwind CSSプラグイン集でした。上記のリストに含まれるプラグインは、フレームワークの多用途性と拡張性を示し、開発者にウェブプロジェクトのデザインと機能性を強化するための幅広いツールを提供します。レスポンシブレイアウトやダイナミックなテーマ設定から、タイポグラフィの強化や3D変換まで、これらのプラグインは、適応性が高く、インタラクティブで、視覚的に魅力的なウェブインターフェースの作成を可能にします。

各プラグインは、Bootstrapのグリッドシステムを統合したり、テーマの切り替えを容易にしたり、3Dエフェクトを導入したりと、Tailwindの実用性第一のアプローチを拡張し、開発者にデザインプロセスにおけるより多くのコントロールと創造性を提供します。これらのプラグインを活用することで、開発者は特定のデザイン課題に効率的に対処し、ユーザーエクスペリエンスを向上させ、際立ったユニークなウェブアプリケーションを作成することができます。

これらのプラグインによって強化されたTailwind CSSエコシステムは、開発者が簡単かつ正確に、モダンでレスポンシブ、そして美しいウェブサイトやアプリケーションを構築できるようにします。

このコレクションがお役に立つことを願っています。

コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

Tailwind CSSの開発をより効率的に！おすすめのTailwind Pluginsリスト

Tailwindとは？なぜ人気なのか？

Tailwindのメリット

Tailwindプラグインとは?

Tailwindでプラグインを使う方法

プラグイン関数とは?

公式Tailwindプラグインリスト

Tailwind CSS Forms

インストール方法

Tailwind CSS Typography

インストール方法

Tailwind CSS Aspect Ratio

インストール方法

Tailwind CSS Container Queries

インストール方法

Tailwind CSS Plugins List

Tailwind Elements

インストール方法

FormKit Tailwind CSS

インストール方法

Tailwindcss Radix

Tailwind CSS Fluid Type

インストール方法

Tailwind CSS Theme Swapper

インストール方法

Tailwind CSS Themer

Tailwind Bootstrap Grid

Tailwind CSS 3d

まとめ