概要

この記事では、LaravelプロジェクトにTailwind CSSをインストールし、使う方法について解説します。Tailwind CSSは、高度なフロントエンドデザインを実現するための効果的なCSSフレームワークです。
私は実際のプロジェクトでは使用したことがないのですが、予備知識として調べたものを、ここに記録として残すことにいたします。

さいごに簡単な確認問題を用意しています。
この記事がもしよければ、内容の確認として是非お試しください！

前提条件

Laravelプロジェクトがセットアップ済みであること
Node.jsとnpmがインストールされていること

ステップ1: Tailwind CSSのインストール

まず、Laravelプロジェクトのルートディレクトリに移動し、以下のコマンドを実行してTailwind CSSをインストールします。

npm install tailwindcss

ステップ2: Laravel Mixの設定

Laravel Mixを使用してTailwind CSSをビルドするために、webpack.mix.jsファイルを編集します。以下のコードを追加してください。

webpack.mix.js

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        tailwindcss('./tailwind.config.js'),
    ]);

ステップ3: Tailwind CSSの設定ファイル作成

次に、Tailwind CSSの設定ファイルを作成します。ルートディレクトリにtailwind.config.jsファイルを作成し、以下の内容をコピーします。

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

ステップ4: CSSのビルド

最後に、CSSをビルドするために以下のコマンドを実行します。

npm run dev

これにより、resources/css/app.cssファイルがpublic/cssディレクトリにコンパイルされます。

使い方

Tailwind CSSは、ビューのHTML要素にクラスを追加することでスタイルを適用します。例えば、以下のようにボタンにクラスを追加してスタイルを適用できます。

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  ボタン
</button>

クラスの詳細な情報やスタイルのカスタマイズ方法については、公式ドキュメントを参照してください。
Tailwind CSS公式ドキュメント

まとめ

Tailwind CSSのインストールからLaravel Mixの設定、設定ファイルの作成、そしてCSSのビルドまでの手順を順番に説明し、使い方についても少し触れました。

Tailwind CSSを使えば、HTML要素に適用するクラスを追加することで、簡単にスタイルを適用することができます。

LaravelとTailwind CSSの組み合わせは、効率的なフロントエンド開発を可能にし、美しいデザインを実現するための強力なツールです。ぜひこの組み合わせを活用し、魅力的なWebアプリケーションを開発してください。

さいごに

簡単な確認問題を用意しました。
この記事がもしよければ、内容の確認として是非お試しください！