Laravel9でTailwind cssを設定する方法

ホーム
アプリ関連ニュース
技術情報
Laravel9でTailwind cssを設定する方法

2022年2月18日
技術情報

今回は、tailwind cssという美しいUIコンポーネントライブラリを使って、laravelプロジェクト内にシンプルなカレンダーを作成する方法をご紹介します。

新規プロジェクトの作成

Laravelのプロジェクトがまだない場合は、新規に作成することから始めます。最も一般的な方法は、Laravelインストーラーを使用することです。

laravel new example-app
cd example-app

Tailwind CSSのインストール

tailwindcssをnpmでインストールしたら新しいtailwind.config.jsファイルを作成したことを確認できます。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Laravel Mixの設定にTailwindを追加する

webpack.mix.jsファイルに、tailwindcssを追加します。

mix.js("resources/js/app.js", "public/js")
  .postCss("resources/css/app.css", "public/css", [
    require("tailwindcss"),
  ]);

テンプレートパスの設定

tailwind.config.jsファイルに、すべてのテンプレートファイルへのパスを追加します。

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

CSSにTailwindディレクティブを追加する

./resources/css/app.cssファイルに以下のことを追加します。

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

ビルドプロセスの開始

npm run devでビルドプロセスを実行します。

npm run dev

プロジェクトでTailwindを使い始める

コンパイルされたCSSを<head>に追加します。以下はカレンダー用のシンプルなtailwindのcssです。

<div class="mt-8 flex items-center justify-center">
        <div class="datepicker relative form-floating mb-3 xl:w-96">
          <input type="text"
            class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
            placeholder="Select a date" />
          <label for="floatingInput" class="text-gray-700">Select a date</label>
        </div>
      </div>

本日は以上となります。

最後までご高覧頂きまして有難うございました。

By Ami