BLOG

Tailwind CSSとは？概要や特徴について簡単に解説！

Written by mizuishi

INDEX

Tailwind CSSとは

デザインシステムを表現するユーティリティファーストのCSSフレームワークです。

予め設定されたデザインシステムに則ったユーティリティクラスが用意され、また、自らカスタマイズしたデザインシステムやデザイントークンを元にしたユーティリティクラスを用いてサイトを構築していくことが出来ます。

従来のCSSとの違い

従来のCSSでは、.primary-buttonのようなクラスを作成し、それに対して色や大きさといったプロパティを定義していくというやり方が一般的です。

<button　class="primary-button">ボタンです！</button>


.primary-button {
	background-color: $color-primary;
	color: $white;
	font-size: 14px;
	font-weight: bold;
	padding-block: 8px;
	padding-inline: 20px;
}

それに対し、ユーティリティファーストは上記と異なるアプローチで、bg-primary、text-sm、text-whiteのように予め用意されたユーティリティクラスでスタイリングをしていきます。

<button　class="bg-primary text-white text-sm font-bold py-2 px-5">ボタンです！</button>

ユーティリティクラスのメリット

クラス名を考えなくて済む

適切なクラス名を都度都度考えることは意外と大変な作業です。また、他のページでも同様のスタイルがあり、あとからコンポーネント化する場合、そのページ固有のクラス名が付いている場合が多いので、再度クラス名を変更する必要が生じてしまいます。ユーティリティクラスであれば、クラス名を考えなくて済むため、命名の苦労が大きく削減されます。

HTMLファイル等のスタイリングする箇所のファイルだけで済む

通常、Web制作のコーディングではHTMLファイルとCSSファイルを交互に行き来しながら作業することが多いかと思います(CSS in JS等の技術もあります。)。

CSSがもともとHTMLとの「関心の分離」をするための技術として登場したため、当然の結果ではあります。

ユーティリティクラスであれば、基本的にはHTMLファイルのみでスタイルが完結するため、開発時のコーディングや修正が行いやすくなります。

スタイルの影響範囲が明確

CSSのクラス名は基本的にグローバルに影響します。もし他のページで同じクラスが使われていた場合、新たにコードを記述した際に他のページにも影響を与えてしまう可能性があります。

この問題に対処するために、BEMのようなCSS設計であったり、スコープを閉じる技術が生まれてきた背景があります。

ユーティリティクラスであれば、これらの問題は無くなり、あとから更新や修正する際にも意図しない影響を考慮しなくて良くなります。

Tailwind CSSの特徴

予め設定されたデザインシステムに則ったユーティリティクラスが用意される

予め設定されたデザインシステムに則ったユーティリティクラスが用意されているため、それに則ってコーディングすることで、フォントサイズや余白等、秩序を保ったサイトを構築することが出来ます。

静的なCSSを使用している必要なクラスだけ出力する

コーディングで使用されたユーティリティクラスのみを出力するため、CSSのファイルサイズを大きく削減することが出来ます。CSSのクラス名は基本的にグローバルに影響するため、削除し忘れた未使用のスタイルがあった場合でも、予期しないサイト崩れを考えそのままになっているケースもあったりします。メンテナンス性やCSSファイルのサイズの面から見ても望ましくないため、使用している必要なクラスだけ出力するTailwind CSSは理にかなっています。

カスタマイズすることを念頭に置いて設計されている

予め設定されたデザインシステムに則ったユーティリティクラスが用意されていますが、プロジェクトのデザインで定義されたデザイントークンを元にして、独自のクラスを定義することが出来ます。これにより、デザイン原則を定めそこから逸脱しないようサイトを構築していくことができます。

Tailwind CSSのデメリット

HTMLの可読性の低下

ユーティリティクラス全般に言えることでもありますが、クラス名が多く付与されることによって

、HTMLの可読性の低下してしまいます。コンポーネント化やエディタの設定によって、開発時の読みやすさは多少改善することが出来ますが、ブラウザから確認するHTMLは、非常に見にくくなってしまいます。

Tailwind CSSのクラス名を覚える必要がある。

使用する際にTailwind CSS特有のクラス名を覚える必要があります。Emmet記法に慣れている方であれば、比較的近い書き方にはなるのですぐに慣れてくるとは思います。

ただ、Tailwind CSSのチートシートもあるため、こちらを使用しながら徐々に覚えていくと良いかと思います。

Tailwind CSS Cheat Sheet

Tailwind CSSの導入方法

Tailwind CSSの導入方法は、公式サイトに記載があるためそちらに沿って進めていけば導入できます。

以下の例はコンテンツ駆動のウェブサイトを作成するためのウェブフレームワークであるAstroに導入する方法です。

1.プロジェクトの作成 まだプロジェクトがセットアップされていない場合は、新しいAstroプロジェクトを作成することから始めます。

npm create astro@latest my-project
cd my-project

2.Tailwind CSSをインストールする

astro addコマンドを実行して、tailwindcssと@astro/tailwindの両方をインストールし、tailwind.config.cjsファイルを生成します。

npx astro add tailwind

3.ビルド・プロセスの開始

npm run devでビルドプロセスを実行します。

npm run dev

4.プロジェクトでTailwindを使い始める

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

おすすめ設定

Tailwind CSSのクラス名を自動補完

Tailwind CSSのVSCode公式プラグインである「Tailwind CSS IntelliSense」を入れるとクラス名を自動補完してくれます。

Tailwind CSSのクラス名自動ソート

「Prettier plugin for Tailwind CSS」を入れることによって、クラス名の自動ソートが効くようになります。複数人でコーディングしていても、クラス名の記述順が自動で並び替えられるため、統一感のあるコードとなります。

■astro.config.mjs

import { defineConfig } from 'astro/config';

import tailwind from '@astrojs/tailwind';

// <https://astro.build/config>
export default defineConfig({
  integrations: [tailwind()],
});

■.prettierrc

{
  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"]
}

■settings.json

{
  "[astro]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Tailwind CSSの入力補完設定

例えばbg-blue-400をredにしたい場合、通常だとblue-400を消してred-400と入力しても補完が効かないですが、VSCodeのsettings.jsonに以下の設定を行うと補完が効くようになります。

{
	"editor.quickSuggestions": { "strings": true },
}

※ただ、記号と数字の箇所では補完が出ないのでそこだけ注意です。

まとめ

Tailwind CSSというユーティリティファーストのCSSフレームワークについてご紹介しました。

ユーティリティクラスでスタイルを構築するだけかと思いきや、実は様々な面で効果的に使用出来ることが少しお分かり頂けたのではないでしょうか。

Tailwind CSSのメリット・デメリットをしっかり考慮したうえでプロジェクトに導入を考えてみて頂ければと思います！

参考

Tailwind CSS

Installation - Tailwind CSS

Setup Astro 3.0 with Tailwind CSS Prettier Plugin

tailwindlabs/prettier-plugin-tailwindcss

Tailwind CSS実践入門 第1章 ユーティリティファーストとは何か ──従来の課題を解決する大胆なアプローチ | gihyo.jp

Tailwind CSS実践入門 第2章 Tailwind CSSの基本 ──開発環境へのインストール、設定ファイルの記述、エディタの設定 | gihyo.jp

Tailwind CSS実践入門 第3章 Tailwind CSSの活用 ──ユーティリティクラス、修飾子、カスタムスタイル | gihyo.jp

Tailwind CSS実践入門 第4章 Tailwind CSSとデザイン ──より良いデザインのためにCSSはどうあるべきか | gihyo.jp

Tailwind CSS Cheat Sheet

PICK UP