エンジニア歴1年未満の初心者がTailwind CSSについてまとめてみた #初心者

はじめに

はじめまして！
今年の4月に新卒で株式会社アンティー・ファクトリーに入社いたしました、ささかまです！

今回は業務を行っている中で出会ったTailwind CSSがとても便利だと感じ、いろいろ調べてみたのでその結果をまとめていきたいと思います！
初心者なりに頑張ってまとめてみたので温かい目で見ていただけると嬉しいです。🙇‍♂️

そもそもTailwind CSSってなに？

まずはじめにTailwind CSSについて軽く説明していきたいとおもいます！
Tailwind CSSの公式サイトには

HTMLから離れることなく、モダンなウェブサイトを素早く構築。
flex、pt-4、text-center、rotate-90のようなクラスが詰まったユーティリティ優先のCSSフレームワークで、マークアップの中で直接、どんなデザインにも対応できます。

と書かれています。

上記の通りTailwind CSSは、HTML内で直接スタイリングを行うことができるユーティリティファーストのCSSフレームワークです。

ユーティリティファーストとは、CSSは使わずにTailwind CSSが提供しているクラスのみを使用してスタイリングする考え方のことです。
上記のflexやpt-4、text-centerなどのクラスを追加するだけで定義することができるため、コードの量を少なくすることができ、クラスについて覚えてしまえばより効率的に作業することができるという利点があります。

調べていて初めて知ったのですが、OpenAI WebサイトとChatGPTのチャットインターフェイスは、Tailwind CSS を使用して構築されているみたいです。ChatGPTを使ったことはありましたが気付きませんでした。

次に私が実際に使っている中で感じたメリット、デメリットについてまとめていきます。

メリット

クラス名を考えなくていい

個人的にこのメリットが大きく、私がTailwind CSSを好きになった１番の理由です！
Tailwind CSSは全てHTMLファイルに直接ユーティリティクラスを書き込みCSSを実装するため、クラス名を考える必要がありません！

クラス名をどうするか悩むという無駄な時間をなくすことができ、効率的に作業することができます。私は英語力もあまり無く、毎回クラス名をつけるのに時間をかけてしまっていたので、Tailwind CSSに初めて出会った時は感動を覚えました。

See the Pen Untitled by 佐々木悠真 (@ixeujzbc-the-solid) on CodePen.

このようにクラス名を追加するだけで簡単にボタンを実装することができます。

また、Tailwind CSSはホバー時の挙動や擬似要素（例: :hover、::before、::after）に対しても簡単にスタイルを適用できます。
先ほどのボタンの例にホバー時に背景色をかえる処理を追加してみます。

See the Pen Untitled by 佐々木悠真 (@ixeujzbc-the-solid) on CodePen.

hover:bg-blue-700

上記のように背景色を指定する bg-blue-700 に hover: プレフィックスを使うことで簡単にホバー時の処理を追加することができます。

CSSとHTMLファイルが別々

ユーティリティクラスを利用することで、スタイリングのための独自のCSSクラスやスタイルシートを用意する手間が省け、HTMLファイルとスタイルシートを行き来する必要がなくなります。
さらに、記述量も少なくなるため、実装にかかる時間が短くなり、作業効率の向上に期待できます。

デメリット

クラス名の部分が長くなってしまい可読性が低下する

私が唯一感じていたデメリットはクラス名が長くなってしまうことです。
Tailwind CSSは一つずつユーティリティクラスを追加していくので、最終的にクラス名が長くなってしまい情報量が多くなってしまうので、可読性が低下し、分かりづらくなってしまいます。

See the Pen Untitled by 佐々木悠真 (@ixeujzbc-the-solid) on CodePen.

このように少し凝ったデザインやアニメーションのボタンを実装しようとすると大量のクラスを追加することになってしまいます。

インストール方法

CDN経由でインストールする場合

HTMLファイルのヘッダー部分に下記のコードを追加することで使用することができます。

<script src="https://cdn.tailwindcss.com"></script>

npm経由でインストールする場合

まず、下記の二つのコマンドを入力します。

npm install -D tailwindcss
npx tailwindcss init

コマンドを入力した後に tailwind.config.js というファイルが生成されていれば成功です。

tailwind.config.jsを開いてみるとこうなっていると思います。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

ここでは content: [],の部分を編集し、Tailwind CSSを適応するファイルへのパスを追加します。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

次にCSSにTailwindディレクティブを追加します。
Tailwindの各レイヤーの@tailwindディレクティブをメインのCSSファイルに追加します。

src/input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind CLI を使用してビルドプロセスを実行します。
下記のコマンドでCLIツールを実行して、テンプレートファイルのクラスをスキャンし、CSSをビルドします。

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

最後に出力されたCSSを読み込みます。
コンパイルしたCSSファイルを<head>に追加することで、Tailwind CSSが使えるようになります。

src/index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

まとめ

改めて1からTailwind CSSについて調べてまとめてみましたが、思っていたより理解が足りていなかった部分が多く、かなり勉強になりました。公式サイトを見ていた時に、まだ私の知らない内容や使ったことのないクラスなどがいくつかあったので、今後も引き続き調べていき、より理解を深めて新たな武器としてうまく使いこなせるようにしていきたいです。
Qiitaに記事を投稿するのは初めてだったのですが、自分で調べた結果をまとめるのが思っていたより面白かったです。しかし、まだQiitaの使い方や見やすい記事の書き方、文章のまとめ方など課題は多いので、今後も時間があれば積極的に挑戦していきたいです。

参考サイト

最後に参考にさせていただいたサイトを載せておきます。最後まで見ていただきありがとうございました！
Tailwind CSSとは？ユーティリティファーストの意味や使うメリットをくわしく解説！
Tailwind CSS
TailwindCSS入門！メリットと使い方をやさしく解説