はじめに

個人開発でTailwind CSSを使っているので、特徴と使用感を書いていきたいと思います。

Tailwind CSSとは

ChatGPTに解説してもらいました。

Tailwind CSSは、プロのウェブ開発者向けに設計された高度なCSSフレームワークです。従来のCSSフレームワークとは異なり、予め定義されたスタイルやコンポーネントが用意されているのではなく、必要なスタイルをクラスベースで直接HTML要素に適用することで、柔軟なデザインを実現します。

Tailwind CSSの特徴は以下の通りです：

・ユーティリティファースト:
Tailwind CSSは、個々のスタイルをクラスとして提供します。これにより、デザイナーと開発者が必要なスタイルを直接指定し、再利用可能なカスタムスタイルを作成できます。
・カスタマイズ可能: Tailwind CSSは、デフォルトのスタイルセットを提供しますが、プロジェクトに合わせてカスタマイズすることができます。色、フォント、スペーシングなど、さまざまなスタイル要素を調整できます。
・Responsiveness:
Tailwind CSSは、レスポンシブデザインをサポートしており、異なる画面サイズに対応するためのクラスを提供します。
・コンポーネント指向:
Tailwind CSSは、シンプルなビルディングブロックを組み合わせてコンポーネントを構築することに焦点を当てています。これにより、再利用可能なコンポーネントを効果的に作成できます。
・パフォーマンス:
Tailwind CSSは、ビルドプロセス中に未使用のスタイルを自動的に削除することで、最適なパフォーマンスを提供します。この機能により、必要なスタイルのみが最終的なスタイルシートに含まれるため、ページの読み込み時間が短縮されます。
・Tailwind CSSは、デザインから開発までのワークフローを効率的にするためのツールとして、多くの開発者に支持されています。ただし、独自のクラスベースのアプローチと概念に慣れるまでには少し学習のカーブがあるかもしれません。

ということです。

メリットとデメリット

○メリット

・クラス名を考える必要がない
これがかなりでかいです。
画面を作っている中で、CSSを当てるためだけにクラス名を考える要素が出てきますが、Tailwind CSSではクラス名を当てていくので、その必要がなくなります。

・柔軟性を持たせることができる
特にReactやNext.jsにはchakraUIなどのUIコンポーネントもあり、それを使えばかなり楽にUIを構築していくことができますが、要件に従って開発をしていく中で、柔軟的に仕様を決めていくことが困難な場合もあります。
しかし、Tailwind CSSを使えば、柔軟性を持たせてUIを構築していくことができます。

・ビルド時のサイズを小さくできる
公式では以下のような説明がされています。

大きなプロジェクトでも 10kB 以下の CSS ファイルにできる。 さらにファイルサイズを小さくするには cssnano などのツールで CSS を最小化し、Brotli で CSS を圧縮する。

大規模開発では、ファイルサイズを小さくするのは手間なので、それの心配が少なくなるのはとても良いです。

○デメリット

・クラス名が長くなる
1つの要素にたくさんのクラス名をつけると、かなりクラス名が長くなってしまい、コードの可読性が悪くなってしまうことがあります。

Tailwind CSSを使用する手順

以下がインストールするコマンドになります。

Next.jsでは、プロジェクト作成時に、Tailwind CSSを組み込むと、globals.cssファイルに以下ようなコードがあります。

これは、Tailwind CSSがカスタムスタイルを当てているコードです。
例えば、Tailwind CSSが使われていると、h1〜h6タグのスタイルが当たっていません。
以下が、その一部になります。

これを見ると、この要素にはmarginが取り除かれていることがわかります。
以下に他のデフォルトスタイルも記載されています。

https://tailwindcss.com/docs/preflight

もしも、デフォルトのスタイルを指定したい場合には、以下のようにコードを書けば設定することができます。

こうすることで、全ての要素にスタイルが適用させることができます。

参考、チートシート等

以下に参考サイトと、チートシートサイトを載せておきます。

https://tailwindcss.com/docs/installation

チートシート2つ↓

https://segakuin.com/css/tailwind/

https://nerdcave.com/tailwind-cheat-sheet

最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/265c676d17fe21e75242

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]