※記事のURLの一部は広告を含みます。

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

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

2022-05-08

2022-06-15

はじめに

こんにちは、CSS って難しいこふです。

tailwind.css とセットで用いると便利なツールやコンポーネント集を紹介します。

おすすめの Tailwind CSS の便利ツール

便利ツールとひと言で言ってしまいましたが、以下のようなものを紹介します。

  • プラグイン(ライブラリ)
  • コンポーネント集

これらを活用することで、0 から全ての CSS を書く必要がなくなり、個人開発やちょっとしたツール作りの時間を大幅に削減できます。

この世にある全てのものを紹介するわけではありません、自分で使って良かったと感じるもの、使いたいと感じるものだけ紹介です。

プラグイン

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

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

例えばこんな感じ。

terminal
1npm install -D @tailwindcss/typography
tailwind.config.js
1module.exports = { 2 ... 3 plugins: [ 4 require('@tailwindcss/typography'), 5 ], 6 ... 7} 8

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

詳しく解説します。

@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

スクリーンショット

1npm install preline

で使えるプラグインです。

単なる HTML でも Vue でも React でも利用できます。

Examplesというページには、このプラグインで実装されたコンポーネントを活用した実際に利用される例が作られています。

仮にこのプラグインを使わないとしても UI の参考になりますね。

コンポーネント集

これらは基本的に tailwind css 以外の何のライブラリもインストールせず使うことができます。ものによっては JavaScript で書かれたライブラリを必要とする場合もあります。

つまり、無駄がないです。しかし、英語圏で作られたものなので、文字の感覚・行間・フォントは日本語に最適とは言えません。

その点のみ修正することをおすすめします。

詳しく解説します。

Tailblocks - Ready-to-use Tailwind CSS blocks

スクリーンショット

比較的シンプルなデザインでコピペで使えます。

モバイルサイズもボタン 1 つで表示できるため、確認もしやすいです。

JavaScript は不要で、静的なデザインのみで完結しています。

リンク:Tailblocks - Ready-to-use Tailwind CSS blocks

Lofi UI

スクリーンショット

全てのコードが Codepen というサンドボックスで公開されているため、自分で値を変更して、その瞬間に自分の目で確認することができます。

他にないデザインがあるため、たまに重宝しています。

リンク:Lofi UI

Tailwind UI

スクリーンショット

公式の一番有力なコンポーネントに見えますが、ほぼ有料です。

デザインも綺麗で、画面のエフェクトも綺麗です。つまり、綺麗です笑

お金を払えるなら、良いコンポーネントのセットですね。

リンク:Tailwind UI

Tailwind CSS Components. Examples and templates

スクリーンショット

有志で公開されるコンポーネント集です。

当然、数多くの方がコードレビューをして作られたものではないので、コードの信頼性は低いかもしれません。

が、アイデアとしては非常に有効なので、個人的にはサイトを散策することもあります。

リンク:Tailwind CSS Components. Examples and templates

Flowrift

スクリーンショット

個人的に一押しです。

無料・ダークモード対応・サイト自体の UI/UX が良い、と最高です。

リンク:Flowrift

Tailwind CSS UI Component Library and UI Kit | TailGrids

スクリーンショット

これも Tailwind UI と同様なフリーミアム(無料でも使えるが、有料で機能が全開放)です。

そのため、デザインの参考や一部はコピペで利用できます。

Cookie の受け入れ可否のコンポーネントも作られており、万能感は非常に強いと感じました。

実際、Cookie の受け入れ可否は専用のコンポーネントなんてなくても代用できるのであれですが。。。

リンク:Tailwind CSS UI Component Library and UI Kit | TailGrids

TailwindCSS Buttons

スクリーンショット

ボタンのデザインに特化した、コンポーネント集です。

デザインにやりすぎ感(重めのエフェクト)もあり、好みも分かれるかも知れません。

個人的には、参考程度がおすすめです。

リンク:TailwindCSS Buttons

ツール

ツールを使うことで直感的・感覚的にデザインを作ることが可能です。好みもありますが、適切に使うと効果を発揮するでしょう。

Tailwind Ink | AI color palette generator for Tailwindcss]

スクリーンショット

配色のバランスを作成し、コードも生成してくれるツールです。

配色って公式のようなものがあり、感覚的に作るものではありません(素人は特に)。

そのため、こう言ったツールで作ると素人っぽいデザインから抜け出せる気がします。

リンク:Tailwind Ink | AI color palette generator for Tailwindcss

Stitches

スクリーンショット

GUI(画面のマウスでの操作)でページを作れるツールです。

デモ・モックの作成にとっては非常に有効に使うことが可能だと思います。

リンク:Stitches

Tailwind CSS Page Creator - Tails

スクリーンショット

これも似たような感じでページを作ることができます。

モックを作成するには最高です。

リンク:Tailwind CSS Page Creator - Tails

おわりに

以上でツール・プラグインの紹介でした。

会社でデザインを任せられる場合とことなり、個人で何かを行う場合は、いかに楽をして時間を短縮し、価値を届けられるかが勝負なので、技術的に負債となってしまっても使うことを躊躇しない派です。

最後までお読みいただきありがとうございました。




共有する