Zenn
⛳

オタクくん：「ギャル先輩、Tailwindって使う必要があるんですか？」

2024/05/20に公開
CSS
Tailwind CSS
Tailwind CSS
tech

オタク君「うーん、CSSのフレームワークっていっぱいあるけど、Tailwindって使う必要あるのかな…。Bootstrapで十分なんじゃないかって気もするし。」

ギャル先輩「あれ？オタクくん、また悩んでんの？今度は何？」

オタク君「あ、ギャル先輩！実はTailwind CSSについて調べてたんですけど、他のCSSフレームワークと何が違うのかよくわからなくて…。使う必要があるのか疑問なんです。」

ギャル先輩「ふーん、Tailwindね。あーしが教えてあげるよ。まず、TailwindはユーティリティファーストのCSSフレームワークなんだ。」

Tailwind CSSとは？

オタク君「ユーティリティファースト…ですか？」

ギャル先輩「そうそう。普通のCSSフレームワークは、コンポーネントベースでスタイルが定義されてるけど、Tailwindはユーティリティクラスを使ってスタイルを適用するんだよ。」

オタク君「ユーティリティクラスってなんですか？」

ギャル先輩「例えば、マージンやパディング、フォントサイズなど、特定のスタイルを持つ小さなクラスのことだよ。こんな感じで使うんだ。」

<div class="p-4 m-2 text-lg">
  こんにちは、世界！
</div>

オタク君「なるほど、一つ一つのスタイルを小さなクラスで定義して、それを組み合わせるんですね。」

Tailwind CSSのメリット

ギャル先輩「そうそう。それがTailwindの強みなんだ。例えば、スタイルのカスタマイズが簡単になるよ。CSSを直接編集する必要がないから、クラスを追加するだけでスタイルを変更できるんだ。」

オタク君「確かに、それは便利ですね。」

ギャル先輩「あと、Tailwindはパージ機能があって、使っていないスタイルをビルド時に削除できるから、最終的なCSSファイルが軽くなるんだ。」

オタク君「それは良いですね。読み込み速度が速くなりそうです。」

Tailwind CSSのデメリット

オタク君「でも、Tailwindにもデメリットってありますか？」

ギャル先輩「うん、もちろんあるよ。例えば、初めて使うときにはクラス名が多くて混乱するかもしれないし、HTMLにユーティリティクラスが大量に書かれるから、見た目がごちゃごちゃすることもあるんだ。」

オタク君「確かに、HTMLが見にくくなるかもしれませんね。」

Tailwind CSSの主要な機能

ギャル先輩「でも、慣れると便利な機能がたくさんあるよ。例えば、レスポンシブデザインのクラスも簡単に使えるんだ。」

オタク君「どんな感じですか？」

ギャル先輩「こんな感じで、画面サイズごとにクラスを使い分けることができるんだ。」

<div class="text-sm sm:text-base md:text-lg lg:text-xl">
  レスポンシブテキスト
</div>

オタク君「おお、これで簡単にレスポンシブ対応ができるんですね！」

Tailwind CSSの導入方法

ギャル先輩「じゃあ、実際にTailwindをプロジェクトに導入してみようか。まずは、プロジェクトのセットアップから始めよう。」

# プロジェクトのセットアップ
mkdir tailwind-example
cd tailwind-example
npm init -y
npm install tailwindcss
npx tailwindcss init

オタク君「なるほど、まずはプロジェクトの初期設定を行うんですね。」

ギャル先輩「次に、Tailwindの設定ファイルを編集して、CSSファイルを作成するよ。」

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

オタク君「ふむふむ、これでTailwindのスタイルが使えるようになるんですね。」

Tailwind CSSのカスタマイズ

ギャル先輩「そうそう。それに、Tailwindはカスタマイズも簡単なんだ。例えば、テーマの設定を変更したり、新しいユーティリティクラスを追加することもできるよ。」

オタク君「具体的にはどんな感じですか？」

ギャル先輩「例えば、テーマの色をカスタマイズする場合は、こんな感じで設定するんだ。」

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1DA1F2',
        secondary: '#14171A',
      },
    },
  },
}

オタク君「なるほど、自分のプロジェクトに合ったカスタマイズができるんですね。」

ギャル先輩「そうそう。だから、Tailwindを使うことで、より柔軟で効率的なスタイル管理ができるんだ。」

オタク君「わかりました。ありがとうございます、ギャル先輩！」

ギャル先輩「オタクくん、意外と飲み込み早いじゃん。てーか、ちょっと感心したかも。」

オタク君「え？ありがとうございます。でも、ギャル先輩がわかりやすく教えてくれたおかげですよ。」

ギャル先輩「そ、そんなの当たり前じゃん！ば、バカにしないでよね！」

オタク君「いや、本当に感謝してます。これからもいろいろ教えてください！」

ギャル先輩「う、うん…。まぁ、また困ったら聞いてよね。あーしが教えてあげるからさ。」

オタク君「はい！ギャル先輩、ありがとうございます！」

Discussion