Tailwind CSSの特徴について
はじめに
個人開発で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を使用する手順
以下がインストールするコマンドになります。
npm install -D tailwindcss
npx tailwindcss init
Next.jsでは、プロジェクト作成時に、Tailwind CSSを組み込むと、globals.cssファイルに以下ようなコードがあります。
@tailwind base;
@tailwind components;
@tailwind utilities;
これは、Tailwind CSSがカスタムスタイルを当てているコードです。
例えば、Tailwind CSSが使われていると、h1〜h6タグのスタイルが当たっていません。
以下が、その一部になります。
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
これを見ると、この要素にはmarginが取り除かれていることがわかります。
以下に他のデフォルトスタイルも記載されています。
もしも、デフォルトのスタイルを指定したい場合には、以下のようにコードを書けば設定することができます。
@layer base {
h1 {
font-size: 2em;
font-weight: bold;
margin: 10px 0;
}
h2 {
font-size: 1.5em;
font-weight: bold;
margin: 12px 0;
}
h3 {
font-size: 1.17em;
font-weight: bold;
margin: 12px 0;
}
h4 {
font-size: 1em;
font-weight: bold;
margin: 12px 0;
}
h5 {
font-size: 0.83em;
font-weight: bold;
margin: 12px 0;
}
h6 {
font-size: 0.67em;
font-weight: bold;
margin: 12px 0;
}
}
こうすることで、全ての要素にスタイルが適用させることができます。
参考、チートシート等
以下に参考サイトと、チートシートサイトを載せておきます。
チートシート2つ↓
Discussion