どんなLaravelサイトにも見栄えの良いスタイルが必要です。そこで便利なのが、Tailwind CSS。ユーティリティを優先したCSSフレームワークであり、定義済みのクラスを利用して、HTML要素のスタイルを調整することができます。CSSコードの記述が簡素になり、カスタムウェブページを素早く構築し、スタイルシートを簡単に維持、拡張できます。

Tailwindは、Alpine.jsとLivewireとともにTALLスタックの一部を成します。Laravelコミュニティの尽力により、このフルスタック開発ソリューションが実現し、あらゆるスキルレベルの開発者がウェブアプリケーションのプロトタイプを素早く作成できるようになりました。フロントエンドやバックエンドについての深い知識がなくても簡単に利用できます。

今回の記事では、Tailwind CSSを使ってLaravelプロジェクトにスタイルを施しながら、MyKinstaを使って最終的にデプロイを行う方法をご紹介します。

Tailwindを使ってLaravelプロジェクトを次のレベルに引き上げる

まずは、基本的なLaravelページを作成し、Tailwind CSSを使って簡単にスタイルを設定してみましょう。

前提条件

ここからの説明を理解するには、以下が必要です。

    • LaravelとComposerがインストールされていること。
    • Node.jsとnpmがインストールされていること。
    • デプロイ用のMyKinstaアカウントがあること。アカウントをまだお持ちでない場合は、早速ご利用ください。

最終的なプロジェクトについては、こちらのコードをご覧ください。

LaravelプロジェクトとTailwindのセットアップ

Composerを使用して新しいLaravelプロジェクトを作成します。

  1. ターミナルを開き、プロジェクトのあるディレクトリで以下を実行します。
composer create-project laravel/laravel my-project
  1. my-projectディレクトリに移動し、必要なパッケージをインストールします。
cd my-project
  1. Tailwindで機能するパッケージをインストールします。
npm install -D tailwindcss postcss autoprefixer
  1. 以下のコマンドを実行して、Tailwindの設定ファイルをセットアップします。
npx tailwindcss init -p

これにより、tailwind.config.jsとpostcss.config.jsの2つのファイルがプロジェクトのルートに配置されます。

テンプレートパスの設定

  1. 次に、tailwind.config.jsファイルでテンプレートパスを設定します。LaravelはデフォルトでpublicディレクトリにあるCSSファイルを探します。テンプレートパスは、アプリケーションのCSSファイルがどこにあるかをLaravelに伝えるものです。
  1. tailwind.config.jsファイル内のコードを次のように置き換えます。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}

Tailwind CSSディレクティブのプロジェクトCSSへの追加

  1. Tailwind CSSのディレクティブを追加するには、resources/cssフォルダに移動し、app.cssファイルを開きます。
  1. そして、以下のコードを追加します。
@tailwind base;
@tailwind components;
@tailwind utilities;

アプリケーションのビルド

アプリをローカル環境で実行する前に以下を行ってください。

  1. Vite開発サーバーを起動します。
npm run dev

このコマンドにより、Tailwind CSSを含む静的アセットファイルがバンドルされ、Viteローカルサーバーが起動します。

  1. Artisanを使用してLaravelアプリを実行します。
php artisan serve

アプリがhttp://127.0.0.1:8000/で実行されます。作成したLaravelアプリケーションのデフォルトの出力が表示されます。

resources/views/welcome.blade.phpルートビューファイルを開くと、すでにTailwindユーティリティクラスが使用されていることがわかります。

簡単なTailwindコンポーネントの作り方

Tailwindがどのように動作するのかを理解するために、Tailwindコンポーネントを作成する方法を見てみましょう。

  1. resources/views/welcome.blade.phpを開きます。
  1. アプリケーションのウェルカムビューからコードを削除します。
  1. カードコンポーネントをレンダリングする以下のコードに置き換えてください。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      @vite('resources/css/app.css')
    <title>Document</title>
  </head>
  <body>
    <div class="max-w-md  m-24 rounded overflow-hidden shadow-lg">
      <img class="w-full" src="https://picsum.photos/400/300" alt="Blog Image">
      <div class="px-6 py-4">
        <h2 class="font-bold text-2xl mb-2">This is My Blog Title</h2>
        <p class="mt-3 text-gray-600 text-base">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque,
                exercitationem praesentium nihil.
        </p>
        <button class="mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded">
            Read More
        </button>
      </div>
    </div>
  </body>
</html>

上のコードでは、Viteを使ってapp.cssファイルを@vite('resources/css/app.css')経由でインポートしています。また、Tailwindもインポートしています。以下のTailwind CSSユーティリティクラスを使って、ブログカードをモックアップする基本的なマークアップコンポーネントを作成します。

  • max-w-sm：コンテナの最大幅をsm（小）ブレークポイントサイズに設定
  • m-24 ：コンテナの全辺に24単位（96pxまたは6rem）のマージンを追加
  • rounded：コンテナの角を丸くするためにborder-radiusを追加
  • overflow-hidden：コンテナからはみ出したコンテンツを非表示にする
  • shadow-lg：コンテナにシャドウ効果を追加
  • w-full：画像の幅をコンテナの100％に設定
  • px-6 py-4：x軸に6単位（24pxまたは1.5rem）、y軸に4単位（16pxまたは1rem）のパディングを追加
  • font-bold：テキストのfont-weightをboldに設定
  • text-xl：テキストのfont-sizeをextra-largeに設定
  • mb-2：要素に2単位（0.5remまたは8px）の下部マージンを追加
  • text-gray-600：テキストの色を濃い灰色に設定
  • text-base：テキストのフォントサイズをデフォルトに設定

ブラウザでアプリケーションをプレビューすると、以下のような出力が表示されるはずです。

ウェブページ上のサンプルコンポーネント
ウェブページ上のサンプルコンポーネント

LaravelのTailwindプロジェクトをKinstaにデプロイする

Kinstaを使用してLaravelアプリケーションをデプロイ、ホスティングする前に、ホスティング時に適切に動作するように、さらにいくつかの変更を行います。

  1. app/Http/Middleware/TrustProxies.phpを開いてください。protected $proxiesの値を変更して、Laravelアプリがすべてのプロキシを信頼できるようにします。
protected $proxies = '*';
  1. プロジェクトのルートディレクトリに新しい.htaccessファイルを作成し、以下のコードを貼り付けます。
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^(.*)$ public/$1 [L]
</IfModule>
  1. 新しいGitリポジトリを作成し、コードをそこにプッシュします（KinstaはGitHub、GitLab、Bitbucketをサポートしています）。
  1. Kinstaアカウントにサインインするか、新規アカウントを作成します。MyKinstaで、「サービスを追加」ボタンをクリックし、下のスクリーンショットのように「アプリケーション」を選択します。
MyKinstaにアプリケーションを追加する
MyKinstaにアプリケーションを追加する

MyKinstaとGitアカウントの接続を行います。指示のとおりに認証を完了し、対応するリポジトリと使用するブランチを選択します。

Kinstaでアプリケーションを追加する（詳細を設定）
Kinstaでアプリケーションを追加する（詳細を設定）
  1. 「環境変数」セクションにLaravel APP_KEYを追加します。キーはローカルプロジェクトディレクトリの.envファイルにあります。
Kinstaでアプリケーションの環境変数を設定する
Kinstaでアプリケーションの環境変数を設定する
  1. 「続行」をクリックし、好みに応じてビルド環境を選択します。
  1. 「リソース」セクションのstartコマンドはとりあえず空白のままにしておき、「続行」クリックして次に進みます。
  1. 最後に、お支払い情報を入力します。デプロイがすぐに開始されます。

アプリケーションを正しく実行するには、2つのビルドパックが必要です。PHPはphp、Node.jsはnpmとなります。そのためには以下の手順に従ってください。

  1. アプリケーションにアクセスし、左側のナビゲーションから「設定」をクリックします。
  1. 「ビルドパックを追加」をクリックし、Node.jsとPHPのビルドパックを追加します。ただし、PHPベースのアプリケーションなので、PHPのビルドパックは最後に追加するようにしてください。
  1. ビルドパックを追加した後に表示される「今すぐデプロイ」ボタンをクリックします。
Kinstaでビルドパックを追加した後にアプリをデプロイする
Kinstaでビルドパックを追加した後にアプリをデプロイする
  1. 最後に、アプリケーションの「プロセス」タブに移動し、デフォルトのウェブプロセスを編集し、その「startコマンド」を以下のように置き換えます。
npm run build && heroku-php-apache2
Kinstaでプロセスstartコマンドを設定する
Kinstaでプロセスstartコマンドを設定する

startコマンドを設定すると、自動的に新しいコマンドでの再デプロイが行われます。デプロイが成功したら、ドメインにアクセスして作成したカードコンポーネントを確認し、アプリケーションのテストと開発を開始できます。

まとめ

Tailwindを活用することで、Laravelプロジェクトを基本的なものから魅力的なデザインへと生まれ変わらせることができます。使い方は簡単で、大量のコードを記述することなく、思い通りの外観を実現可能です。

基本がわかったところで、おしゃれなフォントや魅惑的なエフェクトでアプリケーションの外観を整えるTailwindの機能を色々と試してみることをおすすめします。そして準備が整ったら、MyKinstaを使ったデプロイをお忘れなく。

Marcia Ramos Kinsta

Kinstaのエディトリアルチームリード。大のオープンソース＆コーディング好き。IT業界向けのテクニカルライティングと編集に7年以上携わり、的確かつ簡潔なコンテンツを制作しながら、チームで協力し合い、ワークフローの改善を行っている。