Tailwind CSSの始め方ガイド
お前ら、元気か？ 俺はきこにい、株式会社終焉祝祭の代表取締役だ。TikTokでもちょいちょい顔出してるから、知ってるやつもいるかもしれねぇな。元々、年商1.6億まで駆け上がったかと思えば、2億の負債を抱えて自己破産、どん底のうつ病も経験した。そこから這い上がって今がある。
俺がどん底から這い上がれたのは、もちろん、お前ら「アジト」のメンバーを含め、支えてくれる人たちがいたからだ。そして、俺自身が常に新しいことに挑戦し、学び続けてきたことも大きい。ビジネスの世界で生き残るには、変化に対応し、最新の技術を取り入れる貪欲さが必要不可欠なんだ。
今日は、そんな俺が最近特に注目している技術の一つ、「Tailwind CSS」について語ろうと思う。Web開発をやっているやつなら一度は耳にしたことがあるだろうが、「なんか難しそう」「結局、インラインスタイルと何が違うの？」って思ってるやつもいるはずだ。安心しろ。俺も最初はそうだった。でもな、実際に使ってみると、その開発速度と柔軟性に驚かされる。
Tailwind CSSって、そもそも何だ？
簡単に言えば、Tailwind CSSはユーティリティファーストのCSSフレームワークだ。BootstrapとかMaterial-UIみたいな「コンポーネント指向」のフレームワークとは、アプローチが根本的に違う。
Bootstrapはボタン一つにしても、btn btn-primaryみたいなクラスを付与すれば、見た目がある程度決まったボタンがポンと出てくるだろ？それはそれで便利なんだけど、「ちょっとだけ色を変えたい」「角の丸みを調整したい」ってなった時に、結局CSSを自分で上書きする必要が出てくる。これが結構面倒なんだよな。
一方、Tailwind CSSは、p-4（padding: 1rem）、text-center（text-align: center）、bg-blue-500（background-color: #3b82f6）といった、単一のCSSプロパティに対応するクラスを大量に提供している。これらをHTMLの要素に直接組み合わせていくことで、独自のUIを爆速で構築できるんだ。
「それって、結局インラインスタイルと一緒じゃねーか！」って思ったやつ、いるだろ？ 俺も最初はそう思った。でもな、違うんだ。インラインスタイルは完全にその場で値を指定するけど、Tailwind CSSのクラスはプリセットされたデザインシステムに則っている。例えば、bg-blue-500とbg-blue-600では、ちゃんと色のトーンが段階的に定義されていて、デザインの一貫性を保ちやすいんだ。
俺が自己破産してうつ病になった時、マジで何も手につかなかった。でも、そこからTikTok配信で再起を図ろうとした時、Webサイトやランディングページを作る必要があったんだ。以前は外注したり、自分でゴリゴリCSS書いてたんだけど、その時の俺にはそんな時間も気力も体力もなかった。そこで出会ったのがTailwind CSSだった。
本当に驚いたのは、その開発速度だ。慣れてくると、頭の中でデザインをイメージしたら、そのままHTMLにクラスを記述していくだけで、あっという間に形になっていく。正直、俺のTikTokのフォロワーが半年で10万人を突破できたのも、迅速なLP改善やA/Bテストができたからこそだと思ってる。
Tailwind CSSの始め方：爆速スタートアップガイド
じゃあ、実際にどうやって始めるのか、具体的なステップを説明していくぜ。
1. プロジェクトのセットアップ
Tailwind CSSはPostCSSプラグインとして動作するから、Node.jsとnpm（またはYarn）が必要になる。まだ入れてないやつは、先にインストールしておけ。
まずは、新しいプロジェクトを作成するか、既存のプロジェクトに導入する。今回は一から始めるとして、こんな感じでコマンドを叩く。
mkdir my-tailwind-project
cd my-tailwind-project
npm init -y
次に、Tailwind CSSとその依存関係をインストールする。
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npx tailwindcss init -pコマンドを実行すると、tailwind.config.jsとpostcss.config.jsという2つのファイルが生成される。これがTailwind CSSの肝となる設定ファイルだ。
tailwind.config.js: Tailwind CSSのコア設定ファイル。テーマの拡張、プラグインの追加、カスタムユーティリティの定義などを行う。postcss.config.js: PostCSSの設定ファイル。Tailwind CSSやAutoprefixerといったPostCSSプラグインの読み込み順序などを定義する。
2. `tailwind.config.js`の設定
tailwind.config.jsを開いて、contentオプションを設定する。これは、Tailwind CSSがどのファイルからユーティリティクラスを読み取るかを指定するものだ。指定されたファイル内のクラスだけを抽出して最終的なCSSを生成するため、バンドルサイズを最小限に抑えることができる。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,js,ts,jsx,tsx}", // ここにTailwindクラスを使用するファイルのパスを指定
],
theme: {
extend: {},
},
plugins: [],
}
今回は、srcディレクトリ以下のすべてのHTML、JavaScript、TypeScript、JSX、TSXファイルからクラスを読み込むように設定した。プロジェクトの構成に合わせて適宜変更しろ。
3. CSSファイルの作成とインポート
次に、Tailwind CSSのディレクティブをインポートするためのCSSファイルを作成する。例えば、src/input.cssというファイル名で作成し、以下の内容を記述する。
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base: Tailwindのベーススタイル（リセットCSSなど）を読み込む。@tailwind components: Tailwindが提供するコンポーネント（現在はほとんどないが、プラグインなどで追加可能）を読み込む。@tailwind utilities: 最も重要。Tailwindのユーティリティクラスをすべて読み込む。
4. Tailwind CSSのビルド
これで準備は整った。いよいよTailwind CSSをビルドして、最終的なCSSファイルを生成する。
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
-i ./src/input.css: 入力となるCSSファイル（@tailwindディレクティブを記述したファイル）。-o ./dist/output.css: 出力されるCSSファイル。このファイルをHTMLから読み込むことになる。--watch: ファイルの変更を監視し、変更があったら自動的に再ビルドしてくれる。開発時には必須のオプションだ。
このコマンドを実行すると、distディレクトリにoutput.cssが生成されるはずだ。
5. HTMLファイルでCSSを読み込む
最後に、HTMLファイルから生成されたoutput.cssを読み込む。例えば、index.htmlを作成し、以下のように記述する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS 始め方ガイド</title>
<link href="./dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold text-center my-8 text-blue-600">
Tailwind CSSで爆速開発！
</h1>
<div class="max-w-md mx-auto p-6 bg-white rounded-xl shadow-lg flex items-center space-x-4">
<div class="shrink-0">
<img class="h-12 w-12" src="https://tailwindcss.com/_next/static/media/tailwind-mark.3c3c731f.svg" alt="Tailwind Logo">
</div>
<div>
<div class="text-xl font-medium text-black">きこにい</div>
<p class="text-slate-500">お前ら、ついてこい！</p>
</div>
</div>
<div class="mt-10 text-center">
<button class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full transition-all duration-300">
アジトに参加する
</button>
</div>
</body>
</html>
index.htmlをブラウザで開いてみろ。どうだ？ちゃんとスタイルが適用されてるはずだ。
text-3xl font-bold text-center my-8 text-blue-600max-w-md mx-auto p-6 bg-white rounded-xl shadow-lg flex items-center space-x-4
これらのクラスを組み合わせるだけで、こんなにリッチなUIが作れるんだ。まるでパズルのようだが、慣れてくると本当に気持ちいいぞ。
Tailwind CSSのメリットとデメリット
俺が実際に使ってみて感じた、Tailwind CSSのメリットとデメリットを正直に話そう。
メリット
- 開発速度の向上: これが最大のメリットだ。CSSファイルを触ることなく、HTMLだけでスタイリングが完結するから、コンテキストスイッチが激減する。俺がTikTokのLPを量産できたのも、このおかげだ。
- デザインの一貫性: ユーティリティクラスが提供する値は、Tailwindの設定ファイルで定義されたデザインシステムに基づいている。
spacing、colors、fontSizeなどが統一されているため、意図せずデザインが崩れることが少ない。 - バンドルサイズの最適化: PurgeCSSという機能（Tailwind CSSに組み込まれている）が、実際に使われているクラスだけを最終的なCSSファイルに含める。これにより、非常に軽量なCSSファイルが生成される。初期の段階で数百KBあったCSSが、最終的には数KBになることも珍しくない。
- メンテナンス性の向上: コンポーネント指向のCSSだと、「このクラスはどこで使われているんだろう？」「変更したら他に影響が出ないか？」と気にすることが多かった。Tailwind CSSなら、HTML要素に直接クラスが付いているから、その要素のスタイルはそこを見れば完結する。コンポーネント化されたUIであれば、そのコンポーネントを複製するだけで同じスタイルが適用される。
デメリット
- HTMLがごちゃごちゃする: これは避けられない。大量のクラスがHTML要素に付与されるため、最初は「うわ、汚ねぇ！」って感じるかもしれない。しかし、ReactやVueなどのコンポーネントフレームワークと組み合わせることで、この問題はかなり軽減される。コンポーネントとして抽象化してしまえば、呼び出す側はスッキリしたHTMLになるからな。
- 学習コスト: ユーティリティクラスの名前を覚える必要がある。最初はドキュメントと睨めっこになるだろう。でも、現代のIDEにはTailwind CSSの拡張機能があって、オートコンプリートが強力だから、すぐに慣れるはずだ。俺も最初は苦労したが、数日で基本的なクラスは覚えた。
- 特定のデザインに縛られる可能性: デフォルトのTailwind CSSのテーマは、モダンでフラットなデザインに最適化されている。全く異なるデザインシステムを構築したい場合は、
tailwind.config.jsをかなり細かくカスタマイズする必要がある。
まとめ：変化を恐れず、常に学び続けろ
Tailwind CSSは、特にモダンなWeb開発において、強力なツールになりうる。俺がどん底から再起できたのは、変化を恐れず、新しい技術や考え方を貪欲に取り入れてきたからだ。
「俺には関係ねぇ」とか「今までのやり方で十分」なんて言ってたら、あっという間に時代に取り残される。Web開発の世界は特にそうだ。昨日まで当たり前だった技術が、明日には時代遅れになっているなんてザラにある。
Tailwind CSSは、WebサイトやWebアプリケーションのUI開発を爆速で進め、デザインの一貫性を保ち、最終的なプロダクトを軽量にする。これだけのメリットがあるなら、試さない手はないだろ？
お前らも、俺がそうだったように、新しいことに挑戦するのを恐れるな。学び続けろ。そして、何か壁にぶつかったら、アジトに来い。俺もお前らと一緒に、もっと高みを目指していくからな。
じゃあな！