LaravelでTailwind CSSを使ってみよう

LaravelはPHPで書かれた、モダンなバックエンドフレームワークです。その美しい構文、セキュアな機能、そして豊富なライブラリが魅力で、幅広い種類のアプリケーション開発に利用されています。Laravel 10では、ビルドシステムにViteを採用しており、開発者にとってさらに便利な環境が整っています。

Tailwind CSSは、カスタマイズが容易で、レスポンシブデザインを簡単に実装できるユーティリティファーストのCSSフレームワークです。クラス名を組み合わせることで迅速にスタイルを適用でき、煩雑なCSSの記述を減らすことができます。

LaravelでTailwind CSSを使用するには、まず依存関係をインストールします。Viteを用いることで、設定は非常に簡単です。以下は基本的なステップです

1. Laravelプロジェクトを作成します。
2. コマンドラインで npm install -D tailWindcss postcss autoprefixerを実行し、必要なパッケージをインストールします。
3. npx tailwindcss init を実行して、tailwind.config.js と postcss.config.js を生成します。
4. resources/css フォルダ内にある app.css ファイルでTailwindのディレクティブ（@tailwind base; @tailwind components; @tailwind utilities;）を使用します。
5. 最後に、Viteの設定を確認し、npm run dev でプロジェクトをビルドします

tailwind.config.jsはJavaScriptファイルで、通常次のような基本的な構造を持っています

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';

/** @type {import('tailwindcss').Config} */
export default {
    content: [              
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms, typography],
};

1. content: ここには、Tailwind CSSがスタイルを適用するファイル（HTML, JavaScript, PHPファイルなど）のパスを指定します。※JetStreamをインストールしてあるので、ここに記載されています。
2. theme: ここで、デザインシステム（フォント、色、間隔など）をカスタマイズします。
3. extend: 既存のテーマを拡張するために使用します。ここに設定を追加することで、デフォルトのテーマを上書きせずにカスタムスタイルを追加できます。
4. plugins: Tailwind CSSのプラグインを追加するための配列です。

色のカスタマイズ

デフォルトの色パレットを変更するには、theme.colorsを編集します。

例えば、新しいプライマリカラーを追加するには次のようにします

theme: {
    extend: {
      colors: {
        primary: '#ff6363',
      },
    },
  },

レスポンシブブレークポイントのカスタマイズ

ブレークポイントをカスタマイズするには、theme.screensを編集します。

例えば、カスタムブレークポイントを追加するには

theme: {
    extend: {
      screens: {
        'custom-breakpoint': '900px',
      },
    },
  },

Tailwind CSSは、さまざまなプラグインによって拡張することができます。

プラグインを追加するには、import文で、import先を記述してから、plugins 配列にプラグインを追加します。

デフォルトで導入されている例を見れば

import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';

export default {
// ...
plugins: [forms, typography],
};

Tailwind CSSは、その機能を拡張するための多くの便利なプラグインを提供しています。以下に、よく使われるいくつかのプラグインを紹介します。

1. @tailwindcss/forms
   • これはフォーム要素のデフォルトスタイリングを提供します。フォーム要素の見た目を簡単に整えるのに役立ちます。
   • リンク: tailwindcss/forms
2. @tailwindcss/typography
   • プローゼステキスト（ブログポスト、記事など）に最適化された美しいデフォルトスタイルを提供します。
   • リンク: tailwindcss/typography
3. @tailwindcss/aspect-ratio
   • アスペクト比を維持するコンテナを作成するのに便利なユーティリティクラスを提供します。画像やビデオなどで特に有用です。
   • リンク: tailwindcss/aspect-ratio
4. @tailwindcss/line-clamp
   • テキストの行数を制限して、’…’で切り詰めるスタイリングを提供します。例えば、長いテキストをプレビュー表示する際に便利です。
   • リンク: tailwindcss/line-clamp
5. daisyUI
   • Tailwind CSSのコンポーネントライブラリで、ボタン、カード、モーダルなどのレディメイドコンポーネントを提供します。
   • リンク: daisyUI
6. tailwindcss-animatecss
   • animate.cssライブラリのアニメーションをTailwind CSSで利用できるようにするプラグインです。
   • リンク: tailwindcss-animatecss
7. tailwindcss-custom-forms
   • カスタムフォーム要素のスタイリングをさらに細かく制御することができます。@tailwindcss/formsよりもカスタマイズの自由度が高いです。
   • リンク: tailwindcss-custom-forms

これらのプラグインは、Tailwind CSSの機能を拡張し、開発プロセスをより効率的かつ快適にします。プロジェクトのニーズに応じて、これらのプラグインを組み合わせて使用することをお勧めします。

例として、DaisyUIの設定方法と、使い方を説明します。

DaisyUIはTailwind CSSのためのコンポーネントライブラリで、多種多様なUIコンポーネントを簡単に実装できるように設計されています。

インストール

まず、プロジェクトにDaisyUIをインストールする必要があります。npmやyarnを使用してインストールできます。

# npmを使用する場合
npm install daisyui

# yarnを使用する場合
yarn add daisyui

Tailwind CSS設定にプラグインを追加

インストール後、tailwind.config.jsファイルにDaisyUIをプラグインとして追加します。

export default {
    // ...

    theme: {
        // ...
    },

    plugins: [
      forms, 
      typography,
      require('daisyui'),
      // 他のプラグイン...
    ],
    
};

コンポーネントの使用

DaisyUIは、ボタン、カード、モーダルなど、多くの事前にスタイル付けされたコンポーネントを提供します。これらのコンポーネントは、クラス名をHTML要素に追加するだけで使用できます。

例えば、ボタンコンポーネントは次のように使用できます

<button class="btn btn-primary">プライマリボタン</button>

カスタムテーマ

DaisyUIはカスタテーマをサポートしています。tailwind.config.jsファイルで、daysiuiセクションを編集してテーマをカスタマイズできます。

export　default {
  // ...
  daisyui: {
    themes: [
      {
        mytheme: {                          // テーマ名
          "primary": "#a991f7",             // プライマリカラー
          "secondary": "#f6d860",           // セカンダリカラー
          "accent": "#37cdbe",              // アクセントカラー
          "neutral": "#3d4451",             // ニュートラルカラー
          "base-100": "#ffffff",            // ベースカラー
          // その他のカラー設定...
        },
      },
      "light",                             // 他の標準テーマ
      "dark",                              // ダークテーマ
    ],
  },
  // ...
  plugins: [
    require('daisyui'),
    // 他のプラグイン...
  ],
}

このように、DaisyUIを使えば、Tailwind CSSの利点を活かしつつ、さまざまなUIコンポーネントを迅速かつ容易に実装することができます。ウェブサイトやアプリケーションのデザインを素早く構築する際に非常に便利です。詳細なドキュメントやコンポーネントの一覧は、DaisyUIの公式ウェブサイト（daisyui.com）で確認できます。

マージンとパディング

1. マージン（Margin）:
   • m-{size} の形式で提供されます。ここで {size} はスペースの大きさを表し、例えば m-1 から m-12 まで、または m-auto のように使用できます。
   • 特定の方向にのみマージンを適用する場合、mt-{size}（上）、mb-{size}（下）、ml-{size}（左）、mr-{size}（右）という形式を使用します。
2. パディング（Padding）:
   • パディングには p-{size} の形式を使用します。マージンと同様、{size} はスペースの大きさを示します。
   • 方向指定子を使用して、pt-{size}, pb-{size}, pl-{size}, pr-{size} のように特定の方向にパディングを適用することができます。

サイズ

1. 幅（Width）:
   • w-{size} クラスを使用して要素の幅を設定します。{size} には具体的な数値、パーセンテージ、auto、full（親要素の幅いっぱい）、screen（ビューポートの幅いっぱい）などが使えます。
2. 高さ（Height）:
   • h-{size} クラスで要素の高さを設定。幅と同様に、具体的な数値、auto、full、screen などが使用できます。

ディスプレイ

1. ディスプレイ（Display）:
   • 要素の表示タイプを設定するために block、inline-block、inline、grid などのクラスがあります。
   • 非表示にする場合は hidden クラスを使用します。

位置

1. 位置（Position）:
   • 要素の位置を指定するために relative、ablolute、fixed、sticky などのクラスがあります。
   • これらの位置指定クラスは、top-{size}, right-{size}, bottom-{size}, left-{size} と組み合わせて使用することで、要素の具体的な位置を調整できます。

フレックスボックス

1. フレックスコンテナ（Flex Container）:
   • フレックスコンテナを作成するために flex クラスを使用します。追加のクラス（例：flex-row、flex-col）でアイテムの方向を制御します。
2. フレックスアイテム（Flex Item）:
   • 個々のフレックスアイテムに対して flex クラス（例：flex-1）を適用し、アイテムの伸縮性を制御します。
3. ジャスティファイとアライン（Justify and Align）:
   • コンテナ内のアイテムの配置には justify-{keyword} と items-{keyword} クラスを使用します。例えば、justify-center（中央寄せ）、items-end（末尾揃え）などがあります。

1. フォントサイズ（Font Size）:
   • text-{size} の形式で、{size} には xs、sm、base、lg、xl などがあります。例：text-lg。
2. フォントウェイト（Font Weight）:
   • font-{weight} で指定し、{weight} には light、normal、bold などがあります。例：font-bold。
3. テキストアラインメント（Text Alignment）:
   • テキストの配置は text-center、text-left、text-right などで指定します。

Tailwind CSSでは色彩を制御するための多様なクラスが提供されています。これらのクラスを使用することで、テキスト、背景、ボーダー、さらには疑似クラス（ホバー時など）の色を簡単に指定できます。以下に、色彩関連の主要なクラスについて詳しく説明します。

テキストカラー

• 基本的な使用法： text-{color} 形式のクラスを使用して、テキストの色を設定します。ここで {color} は Tailwind CSS が提供するカラーパレットから選ぶことができます。例えば、text-blue-500、text-gray-700 などがあります。
• 透明度の指定： 色に透明度を加えたい場合は、text-{color}-{opacity} 形式を使用します。例：text-blue-500/50 は50%透明度の青色を指定します。

背景カラー

• 基本的な使用法： bg-{color} 形式のクラスで背景色を設定できます。テキストカラーと同様に、Tailwind CSS が提供するカラーパレットを利用できます。例：bg-green-300、bg-red-500。
• グラデーション： 背景のグラデーションを作成するには、bg-gradient-to-{direction} クラスと、from-{color}, via-{color}, to-{color} クラスを組み合わせます。例：bg-gradient-to-r from-blue-500 to-green-500 は青から緑への右向きグラデーションです。

ボーダーカラー

• 基本的な使用法： border-{color} 形式のクラスでボーダーの色を指定します。色の指定はテキストカラーや背景カラーと同様です。例：border-purple-400。
• 透明度の指定： ボーダーの色に透明度を加える場合は、border-{color}-{opacity} 形式を使用します。例：border-blue-500/50。

その他の色彩関連クラス

• ディバイダーカラー（Divider Color）: divider-{color} クラスを使用して、フレックスやグリッドアイテム間の区切り線の色を指定できます。
• プレースホルダーカラー（Placeholder Color）: placeholder-{color} クラスを使用して、入力フォームのプレースホルダーテキストの色を設定します。

疑似クラスによる色の制御

• ホバー（Hover）: hover:{class} 形式を使用して、要素にマウスがホバーした際の色を変更できます。例：hover:bg-blue-500 はマウスホバー時に背景色を青に変更します。
• フォーカス（Focus）: forcus:{class} 形式で、要素がフォーカスされたときの色を指定できます。例：forcus:border-red-500 は要素がフォーカスされた際にボーダーを赤にします。

これらの色彩関連のクラスを利用することで、ウェブページに色彩を効果的に適用し、ビジュアルアピールを高めることができます。Tailwind CSSのカラーパレットは非常に広範にわたり、細かい色の調整が可能であり、デザインのニーズに応じた柔軟な色の適用が可能です。

Tailwind CSSのユーティリティクラスは、デザインに必要なさまざまなスタイルを提供します。これらは一般的に、以下のようなカテゴリに分類されます

1. レイアウト: フレックスボックス、グリッド、スペーシング（マージンとパディング）、サイズ（幅と高さ）、ディスプレイ、ポジションなどのレイアウトに関連するスタイル。
2. タイポグラフィ: フォントサイズ、フォントウェイト、テキストアラインメント、リストスタイル、テキストカラーなど、テキスト関連のスタイル。
3. 背景: 背景色、背景画像、グラデーションなどの背景スタイル。
4. ボーダー: ボーダーの幅、スタイル、色、半径（角丸）などのボーダースタイル。
5. エフェクト: 影、不透明度、スケール（拡大・縮小）、回転、カーソルスタイルなどの視覚効果。
6. その他: アニメーション、トランジション、変形など、その他の視覚的要素。

Tailwind CSSでは、レスポンシブデザインを簡単に実装できるように設計されています。これは主に、メディアクエリに基づくクラスのプレフィックスを使用して実現されます。以下で、Tailwind CSSにおけるレスポンシブデザインのアプローチについて詳しく説明します。

レスポンシブプレフィックス

Tailwind CSSでは、特定のビューポートサイズでスタイルを適用するために、次のようなプレフィックスが用意されています：

• sm: – 小さいデバイス（スマートフォンなど）
• md: – 中くらいのデバイス（タブレットなど）
• lg: – 大きいデバイス（デスクトップなど）
• xl: – より大きいデバイス
• 2xl: – さらに大きいデバイス

これらのプレフィックスは、Tailwind CSSが用意している標準のブレークポイントに基づいていますが、カスタムブレークポイントを設定することも可能です。

レスポンシブデザインの実装

レスポンシブデザインを実装する際、基本的には以下のようにプレフィックスを使用します：

1. 基本スタイルの定義： 最初にモバイルビュー（最小幅）用のスタイルを定義します。
2. プレフィックス付きクラスの追加： より大きなビューポートサイズで適用されるスタイルには、適切なプレフィックスを前に付けます。

例えば、以下のHTMLは、異なるビューポートサイズで異なるテキストサイズを適用する方法を示しています。

<div class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl">
  これはレスポンシブテキストです。
</div>

この例では、基本的には text-base サイズが適用されますが、画面サイズが sm ブレークポイントを超えると text-lg に、md を超えると text-xl に、というように段階的にテキストサイズが大きくなります。

カスタムブレークポイントの設定

tailwind.config.js ファイルでカスタムブレークポイントを定義することもできます。たとえば、以下のように新しいブレークポイントを追加できます。

module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px',
      },
    },
  },
  // 他の設定...
}

この設定により、3xl: プレフィックスを使って、1600px以上のビューポートサイズに特有のスタイルを適用できるようになります。