Tailwind CSSを使用しておしゃれなウェブサイトを素早く開発する方法

開発者として経験を積んでいくと、少ないコードで、より多くのことを実行できる技術を使用したいと思うようになるもの。Tailwind CSSのような強固なフロントエンドフレームワークは、そんな開発者の望みをかなえる存在です。

この記事では、ウェブページの構築とデザインを支援するCSSフレームワーク、Tailwind CSSについて学びます。Tailwind CSSのインストール方法や、プロジェクトへの統合方法、そしていくつかの実用的なアプリケーションもご紹介します。また、カスタムスタイルやプラグインの作り方についても見ていきましょう。

Tailwind CSSを使ってサイトを構築する方法について、動画での解説もご用意しています

Tailwind CSSとは

Tailwind CSSは、ユーティリティファーストのCSS（カスケーディングスタイルシート）フレームワークです。ウェブページの構築やデザインにおいて、マークアップの中に直接、定義済みのクラスを使用します。つまり、定義済みのクラスの形でHTML内にCSSを記述できます。

Tailwind CSSとは何かを理解する前に、まずフレームワークとは何か、そして「ユーティリティファーストCSS」とは何かをご説明します。

フレームワークとは

一般的なプログラミングにおけるフレームワークとは、既存ツールの機能から構築された、再利用可能かつ即座に使用できるコンポーネント群。開発作業の負担を軽減するのが主な目的です。

フレームワークの意味が分かれば、Tailwind CSSがCSSの機能に基づいて構築されていることも理解できるはず。フレームワークの機能はすべて、クラスとして構成されたCSSスタイルの派生になります。

ユーティリティファーストのCSSフレームワーク

ユーティリティファーストのCSSとは、マークアップ（HTML）内の、定義済み機能を備えたクラスを指します。つまり、あらかじめ定義されたスタイルを持つクラスを記述するだけで、そのスタイルを要素に適用できます。

バニラCSS（フレームワークやライブラリを使わないCSS）を使用する場合、まず要素にクラス名を付け、クラスに様々なプロパティと値を付加して、要素にスタイルを適用します。

例として、「Click me」と書かれた角の丸いボタンを作成します。ボタンは次のようになります。

バニラCSSを使って実装する方法、Tailwind CSSでユーティリティクラスを使用して実装する方法は、それぞれ以下のようになります。

バニラCSSでの実装

<button class="btn">Click me</button>

ボタンのタグにクラスbtnを付与し、外部スタイルシートを使用してスタイルを設定します。

.btn {
  background-color: #000;
  color: #fff;
  padding: 8px;
  border: none;
  border-radius: 4px;
}

Tailwind CSSでの実装

<button class="bg-black text-white p-2 rounded">Click me</button>

Tailwind CSSの場合、これだけでバニラCSSを使用した例と同じ効果が得られます。使用した各クラス名にはすでにスタイルが定義されているため、外部スタイルシートにスタイルを記述する必要はありません。

Tailwind CSSの前提条件

Tailwind CSSを使用するには、以下のような知識が求められます。

• HTMLとその構造、仕組みに関する十分な知識
• CSSの十分な基礎知識（メディアクエリ、flexbox、グリッドシステムなど）

Tailwind CSSを使用できる場所

Tailwind CSSは、フロントエンドのウェブプロジェクトで使用できます。これにはReact.js、Next.js、Laravel、Vite、Gatsbyなどが含まれます。

Tailwind CSSの長所と短所

Tailwind CSSを使用する利点は、以下のようなものが挙げられます。

1. 開発プロセスが高速化できる。
2. ユーティリティがCSSが似ているため、CSSの練習にもなる。
3. ユーティリティとコンポーネントが簡単にカスタマイズできる。
4. 本番用のファイルサイズ全体が常に小さい。
5. CSSの知識があれば、簡単に習得できる。
6. 学習用のドキュメントが充実している。

その一方で、以下のような欠点も見られます。

1. すべてのスタイルがHTMLファイル内にあるため、大規模なプロジェクトではマークアップが乱雑に見える可能性がある。
2. CSSを十分に理解していないと、習得が困難。
3. 要素の入力を含め、すべてをゼロから構築しなければならない（Tailwind CSSをインストールすると、すべてのデフォルトのCSSスタイルが削除される）。
4. ウェブサイトのフロントエンドの開発にかかる時間を最小限に抑え、主にバックエンドのロジックに集中したい場合には向かない。

Tailwind CSSを使用するタイミング

Tailwind CSSでは、コードの記述量を抑えることができるため、開発プロセスが高速になります。Tailwind CSSにはパディングやスペーシングなど、様々なデザイン要件の一貫性を保つデザインシステムが付属しているため、デザインシステムの作成に悩む必要はありません。

Tailwind CSSはまた、簡単に構成可能なフレームワークをお探しの方にもおすすめです。自由に外観を選択でき、他のフレームワークのように常に同じコンポーネント（ナビゲーションバー、ボタン、フォームなど）の使用を強制されません。ただしCSSの知識が十分にあり、使用経験がある場合のみ、使用してください。

Tailwind CSSと他のCSSフレームワークの類似点と相違点

Tailwind CSSと他のCSSフレームワークには、以下のような共通点があります。

1. 開発作業が効率的になる。
2. すぐに使えるクラスが付属している。
3. CSSルールの上に構築されている。
4. CSSの知識があれば簡単に習得、使用できる。

その一方で、他のCSSフレームワークとは以下のような点で異なります。

1. Tailwindでは、コンポーネントを自作しなければならない。例えば、Bootstrapにはナビゲーションバーやボタンなどのコンポーネントが用意されているが、Tailwindにはない。
2. Bootstrapなどのフレームワークはカスタマイズ性に欠け、そのデザインパターンの使用を強制されるが、Tailwindでは、すべてのフローを自分で制御可能。
3. Tailwindを使用するには、CSSの深い知識が必要。クラス名を書くだけでは十分でなく、バニラCSSと同じ結果を得るには、同様にクラス名を組み合わせなければならない。他のほとんどのフレームワークでは、あるクラス名を使用したときにどのコンポーネントが構築されるかを知っているだけで十分。

TailwindCSS入門

Tailwind CSSをインストールし、プロジェクトに統合する前に、必ず以下の作業を行ってください。

1. Node.jsをコンピュータにインストールし、ターミナルでNodeパッケージマネージャ（npm）を使用できる状態にする。
2. 必要なファイルを作成し、プロジェクトのセットアップを行う。

今回例に挙げるプロジェクトのディレクトリ構造は、以下を想定します。

-Tailwind-tutorial
    -public
        -index.html
        -styles.css
    -src
        -styles.css

プロジェクトのターミナルを立ち上げ、コマンドを実行します。

    npm install -D tailwindcss

このコマンドは、依存関係としてTailwind CSSフレームワークをインストールします。次に、以下のコマンドを実行して、tailwind.config.jsファイルを生成します。

    npx tailwindcss init

tailwind.config.jsファイルは作成時には空ですので、何行かコードを追加します。

module.exports = {
  content: ["./src/**/*.{html,js}", "./public/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
};

content配列に指定されたファイルパスにより、ビルド時に未使用のスタイルが削除されます。

次にsrcフォルダのCSSファイル内に「@tailwind」ディレクティブを追加します。ここにすべての定義済みユーティリティスタイルが生成されます。

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

最後にターミナルで次のコマンドを実行して、ビルド処理を始めます。

    npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

上のコードは、Tailwindに対してsrcフォルダ内のスタイルシートを入力とし、使用するすべてのスタイルをpublicフォルダ内の出力ファイルにビルドするよう指示します。--watchにより、ファイルの変更が監視され、自動的にビルド処理が行われます。これを省略すると、コードをビルドして目的の出力を確認するには、毎回スクリプトを実行しなければなりません。

Tailwind CSSの使用

これで、Tailwind CSSをインストールし、プロジェクト用のセットアップが完了です。続いては、例を挙げて適用方法を見ていきます。

Flexboxの例

Tailwind CSSでflexを使用するには、flexクラスとflex項目の方向を追加します。

    <div class="flex flex-row">
      <button> Button 1 </button>
      <button> Button 2 </button>
      <button> Button 3 </button>
    </div>

flex-row-reverseを使用すると、ボタンの表示順が逆になります。

flex-colは縦積みにします。以下はその例です。

    <div class="flex flex-col">
      <button> Button 1 </button>
      <button> Button 2 </button>
      <button> Button 3 </button>
    </div>

前の例と同じように、flex-col-reverseを使用すると順序が逆になります。

グリッドの例

グリッドシステムで行と列を指定する場合は、異なるアプローチを取ります。利用可能なスペースに対し、要素がどのように占めるかを決定する数値を指定します。

<div class="grid grid-cols-3">
      <button> Button 1 </button>
      <button> Button 2 </button>
      <button> Button 3 </button>
      <button> Button 4 </button>
      <button> Button 5 </button>
      <button> Button 6 </button>
    </div>

色

Tailwindには、定義済みの色が多数用意されています。各色には異なるバリエーションがあり、最も明るいバリエーションは50、最も暗いバリエーションは900です。

HTMLの16進数カラーコードは、以下の通りです。

例として上の赤色を使用して、ボタン要素に背景色を設定します。

<button class="bg-red-50">Click me</button>
<button class="bg-red-100">Click me</button>
<button class="bg-red-200">Click me</button>
<button class="bg-red-300">Click me</button>
<button class="bg-red-400">Click me</button>
<button class="bg-red-500">Click me</button>
<button class="bg-red-600">Click me</button>
<button class="bg-red-700">Click me</button>
<button class="bg-red-800">Click me</button>
<button class="bg-red-900">Click me</button>

この構文はTailwindのすべての色について共通ですが、黒と白だけは例外で、bg-blackやbg-whiteのように数字を使わずに記述します。

テキストの色を指定するには、text-{color}クラスを使用します。

<p class="text-yellow-600">Hello World</p>

パディング

Tailwindには、デザイン全体を一貫したスケールに保つデザインシステムがあり、ユーティリティを適用する構文を学ぶだけで使用できます。

以下は要素にパディングを追加するユーティリティです。

• p：要素全体のパディング
• py：padding-topとpadding-bottom
• px：padding-leftとpadding-right
• pt：padding-top
• pr：padding-right
• pb：padding-bottom
• pl：padding-left

要素に適用するには、Tailwindの適切な番号を使用する必要がありますが、これは前節の色のバリエーションを表す番号と少し似ています。以下に例を示します。

<button class="p-0">Click me</button>
<button class="pt-1">Click me</button>
<button class="pr-2">Click me</button>
<button class="pb-3">Click me</button>
<button class="pl-4">Click me</button>

マージン

パディングとマージンの定義済みユーティリティは非常によく似ており、pをmに置き換えます。

• m
• my
• mx
• mt
• mr
• mb
• ml

Tailwind CSSプラグインの作成方法

Tailwind CSSには、最初から多くのユーティリティやデザインシステムが組み込まれていますが、特定の機能を追加してTailwind CSSをさらに拡張することもできます。これにはプラグインを作成します。

水色の背景を設定し、要素をX軸上で150°回転する回転ユーティリティのプラグインを作成してみます。このユーティリティは、tailwind.config.jsファイル内で数行のJavaScriptを使用して実装します。

const plugin = require("tailwindcss/plugin");

module.exports = {
  content: ["./src/**/*.{html,js}", "./public/*.html"],
  theme: {
    extend: {},
  },
  plugins: [
    plugin(function ({ addUtilities }) {
      const myUtilities = {
        ".bg-aqua": { background: "aqua" },
        ".rotate-150deg": {
          transform: "rotateX(150deg)",
        },
      };
      addUtilities(myUtilities);
    }),
  ],

};

このコードを分解してみましょう。まず最初にTailwindのプラグイン機能をインポートします。

const plugin = require("tailwindcss/plugin");

次に、pluginsの配列にプラグインを作成します。

  plugins: [
    plugin(function ({ addUtilities }) {
      const newUtilities = {
        ".bg-aqua": { background: "aqua" },
        ".rotate-150deg": {
          transform: "rotateX(150deg)",
        },
      };
      addUtilities(newUtilities);
    }),
  ],

なお、プラグインの作成後に、ビルドスクリプトを再実行する必要がある可能性もあります。

プラグインの準備ができたら、テストを実行します。

<button class="bg-aqua rotate-150deg">Click me</button>

すべてがうまくいけば、テキストがX軸上で150°回転した水色のボタンが表示されます。

まとめ

フレームワークは、日々のワークフローを高速化してくれる存在です。一貫したデザインを保ちながら、見栄えの良いプロフェッショナルなウェブページを構築できます。Tailwind CSSには、ユーティリティファーストのCSSクラスがあり、ウェブデザインと開発を次のレベルに引き上げてくれます。

この記事では、Tailwind CSSとは何か、フレームワークを構成する要素は何かをご紹介しました。また、インストール手順を確認し、既存の機能を拡張するカスタムプラグインの作成方法も例を挙げてご説明しました。

この記事を通して、Tailwindの基本的な仕組みは理解できたかと思いますが、このようなユーティリティファーストのフレームワークを習得するには、練習を重ねながら、CSSの知識を深めていくことが重要です。

Tailwind CSSや他のCSSフレームワークを使用した経験はありますか？以下のコメント欄でぜひお聞かせください。