Tailwindが素晴らしい理由とWeb開発をいかに楽にするか

昔、ウェブサイトのスタイルを設定するためにHTMLとCSSを行き来していたことを覚えていますか？

実際、昨年の私でした。まだ巨大なCSSスタイルシートでHTMLページをスタイル設定している人がいると思います。

これは実際にはウェブページを設計する非常に悪い方法です。これにより、2つのファイルを行き来するたびにエンジニアの生産性が損なわれます。

しかし、このアプローチの最大の問題はこれではありません。このアプローチの主な問題は、スコープです。

CSSスタイルシートがスコープで失敗する理由

別々のページで main というクラスが付いた2つのHTML要素があるとします。1つのページで .main にスタイルを適用すると、意図せず他のページの要素にもスタイルが適用されてしまいます。これは災害のもとです。

この開発方法は、リファクタリングやクリーニングができない大量のレガシーコードも作成します。例えば、要素から main クラスを削除して .main をCSSファイルで不要にするとします。

しかし、アプリケーションの別の場所でそのクラスが適用されているかもしれないので、簡単にスタイルシートからそのクラスを削除することはできません。

この方法では、使用されていないスタイルがスタイルシートに蓄積され、しばらくすると管理が不可能になります。

Tailwindが私たちを救う

Tailwindを使えば、すべてをHTMLファイル内で行うので、もはやCSSファイルを気にする必要はありません。使用しているフレームワークに応じてTailwindをセットアップし、このページの指示に従います。

Tailwindでは、クラスを直接適用することでスタイルを適用できます。たとえば、段落のスタイルを設定する：

TailwindのHTMLファイルで上記のスタイルを実現するのは非常に簡単です。スタイルはTailwindではクラスで表されています。

以下のコードは、上記のテキストを作成する方法を示しています。

<div class="flex flex-col gap-2">
	<p class="font-bold">これは太字の段落です</p>
	<p class="text-red-500">これは赤い段落です</p>
	<p class="italic">これは斜体の段落です</p>
	<p>これは <span class="underline">混合</span> 要素です</p>
</div>

わかりやすいですよね？ Tailwindのクラス構文を知っていれば、すぐに使えます。そしてそれは思っているほど難しくありません。

たとえば、font-bold はテキストを太字にし、italic クラスは要素を斜体にします。

何百ものクラスを知る必要があると思うかもしれませんが、適用したいスタイルを探すとすぐにTailwindの構文を見つけることができます。

Tailwindをプロジェクトで1年間使ってみた結果、ほとんどの場合、スタイルのTailwind構文を探す必要はありません。Tailwindの一貫した構文は覚えやすいです。たとえば、以下の例を見てください。

(なし)

rounded-lg

rounded-3xl

rounded-full

クラス rounded は要素のボーダー半径を制御し、lg、xl、full のサフィックスを追加することで簡単に調整できます。

なぜTailwindを使うのか？

ご覧の通り、Tailwindを使うとHTMLファイルから離れることなくスタイリングを行うことができます。これにより、ウェブ開発は楽しいプラクティスになります。

また、border-radius: 10px や font-size: 16px などのスタイルの詳細に入らずに一貫したウェブアプリを作成できます。なぜなら、クラスはTailwindによって事前に定義されているからです。

たとえば、私は見出しに text-lg と font-bold を使っています。これは、別々のCSSシートにクラスを定義して編集するよりも簡単です。

Tailwindを使用した経験がある場合は、最も好きな/好きでない側面を教えてください。まだ試したことがない場合は、多くを見逃しています。今すぐ何をしているかをやめて、 npm install tailwindcss を実行してください。

引き続き、楽しいコーディングを。