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が取り除かれていることがわかります。
以下に他のデフォルトスタイルも記載されています。

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

global.css

@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;
  }
}

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

参考、チートシート等

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

https://tailwindcss.com/docs/installation

チートシート2つ↓

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

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