【厳選】おすすめのTailwind CSSの便利ツール・プラグイン14選

はじめに

こんにちは。tailwindCSS とセットで用いると便利なツールやコンポーネント集を紹介します。

プラグイン

これらが非常に便利です。

プラグインは、npm/yarn でパッケージをインストールし、tailwind.config.js にプラグイン情報を指定することで使用可能です。

例えばこんな感じ。

npm install -D @tailwindcss/typography

module.exports = {
  ...
  plugins: [
    require('@tailwindcss/typography'),
  ],
  ...
}

入れすぎるとクラス名の衝突が起きる可能性もゼロではないので、使い過ぎには注意です。

詳しく解説します。

@tailwindcss/typography

スクリーンショット

公式プラグインです。具体的には、文章のスタイリングを class に prose と加えるだけで可能です。レスポンシブ対応として、画面幅により適応するスタイリングを変えて利用することが基本です。特定のタグ（h1,img）などにもスタイリングを指定でき、最低限のカスタマイズも可能です。

用途は、簡易的なブログサイト（このページでも利用してます）、利用規約・プライバシーポリシーのスタイリングなどです。当然、カスタマイズしまくるなら、1 からデザインした方が早いので、あくまでカスタマイズはあまりしないことが前提です。

tailwind-typography-playgroundというツールを使うと、どんなデザインになるか簡単にチェックできますよ。

リンク：@tailwindcss/typography

@tailwindcss-forms

スクリーンショット

フォームをデザインするのって結構めんどうじゃないでしょうか？そんなデザインを先ほどの文章のスタイリングと同様に簡単に行えます。

ちなみに、これも公式プラグインなので保守・運用の観点では安心できます。（公式プラグインの OSS が対応されない＝もともとのライブラリが開発中止、だから基本は大丈夫！）

リンク：@tailwindcss-forms

@tailwindcss/line-clamp

これも公式。

css では、1 行の文章の表示を「こんな感じで…」と「…」で続きを隠し、続きがあることを見せることができます。tailwind css ではtruncateを指定することで可能です。しかし、これは 1 行の文章にのみ使えるということです。つまり、3 行などの複数行には適応できない。

イメージ図

上の図のように解決してくれるプラグインです。自前実装も JavaScript を使えば簡単にできますが、個人開発ならそんな時間も惜しいでしょう。そんな方々へおすすめのプラグインでした。

リンク：@tailwindcss/line-clamp

daisyUI - Tailwind CSS Components

スクリーンショット

正直に言うと、あまりおすすめしません。いわゆる全部入りで、癖が強すぎます。 css のテーマを標準で複数用意されている点は素晴らしいのですが、実装された部分のソースコードを読んでも全然理解できません。

というのも css をゴリ押しして擬似要素がゴリゴリに使われているからです。

アクセシビリティの観点からも、微妙なのは事実。ただ、CSS の技術的な観点ではソースコードを読むと勉強になります。自分は CSS の基礎をやっておらず、難しくて断念。それでも、daisyUI使うことで実装時間はほぼ 0 になります。

リンク：daisyUI - Tailwind CSS Components

Preline UI

スクリーンショット

npm install preline

で使えるプラグインです。単なる HTML でも Vue でも React でも利用できます。 Examplesというページには、このプラグインで実装されたコンポーネントを活用した実際に利用される例が作られています。仮にこのプラグインを使わないとしても UI の参考になりますね。

リンク：https://preline.co/index.html
Github：https://github.com/htmlstreamofficial/preline

コンポーネント集

これらは基本的に tailwind css 以外の何のライブラリもインストールせず使うことができます。ものによっては JavaScript で書かれたライブラリを必要とする場合もあります。つまり、無駄がないです。しかし、英語圏で作られたものなので、文字の感覚・行間・フォントは日本語に最適とは言えません。その点のみ修正することをおすすめします。