【ISSUE】Tailwind CSSの特徴について
2024年12月23日 8:40
個人開発で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つの要素にたくさんのクラス名をつけると、かなりクラス名が長くなってしまい、コードの可読性が悪くなってしまうことがあります。
以下がインストールするコマンドになります。
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]
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。