LaravelでTailwindCSSを使う方法

Laravel

LaravelでTailwindCSSを使う方法と実際に導入して、動作確認してみました。

7ステップで設定は完了します。
簡単に使い始めることができるので確認してみてください。

導入方法についてはTailwindCSS公式サイトの下記に書いています。

npmでTailwindCSSをダウンロードする

Laravelで作成したプロジェクトで下記のコマンドを実行して、フロントエンド周りのライブラリをインストールしておきます。

npm install

TailwindCSS関連のライブラリをダウンロードします。

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

npxコマンドでTailwindCSSの設定ファイルを作成する

npxコマンドを使用して設定ファイルを作成します。

npx tailwindcss init

TailwindCSSの設定ファイル(tailwind.config.js)を編集する

プロジェクトの配下にtailwind.config.jsという設定ファイルができているので、purgeの項目を下記のように変更します。
purgeにはTailwindCSSのスタイルを参照するファイルを全て含む必要があります。

module.exports = {
 purge: [],
 purge: [
   './resources/**/*.blade.php',
   './resources/**/*.js',
   './resources/**/*.vue',
 ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

LaravelMixを修正する

プロジェクト直下にあるwebpack.mix.jsを下記のように修正します。

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

これでnpm run devにて、webpackをビルドしたときにTailwindCSSが含まれるようになります。

CSSファイルを修正してTailwindCSSを読み込む

resources/css/app.cssファイルを下記のように修正します。

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

BladeファイルにCSSを読むように設定しておく

あとは読み込むBladeファイルで、webpackで出力してくれるcssを読み込むようにします。

<!DOCTYPE html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="{{ asset('css/app.css') }}" rel="stylesheet"><!--- これで読み込む --->
  </head>
  <body>
  </body>
</html>

TailwindCSSが効いているか確認するために、下記のボタンを表示する画面のどこかに仕込んで置きましょう。

<body>
    <!--- ここからテスト用 --->
    <button type="button" class="cursor-pointer m-5 p-3 shadow-md rounded-md font-semibold text-white text-base bg-blue-500 hover:bg-blue-700 ring-blue-200 ring-2">
      テスト
    </button>
    <!--- ここまでテスト用 --->
</body>

ボタンに設定しているクラス(bg-blue-500cursor-pointerなど)がTailwindCSSで定義されているクラスになります。

ビルドする

webpackをビルドします。

npm run dev

ビルドすると、下記のようにファイルが出力されたことが確認できます。

DONE  Compiled successfully in 11297ms                                                                                                                                         10:51:30 AM

       Asset      Size   Chunks             Chunk Names
/css/app.css  3.81 MiB  /js/app  [emitted]  /js/app
  /js/app.js   596 KiB  /js/app  [emitted]  /js/app

ビルドが通らない

下記のようなエラーが出てビルドが通らない場合があります。

Error: PostCSS plugin tailwindcss requires PostCSS 8.

公式のこの辺に書いていますが、PostCSS8に依存しているらしいのですが、互換性(?)の問題でエラーが出ることがあるみたいです。
下記のコマンドで一度削除して、互換性のあるものをダウンロードして使うようにすることでビルドが通るようになります。

npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

動作確認する

サーバーを起動したら、ページが表示されるURLにアクセスして画面を確認します。
追加したボタンがこのように表示されていれば、設定完了です。

終わりに

今回はTailwindCSSをLaravelに導入してみました。
TailwindCSSで定義されているクラスは公式のサイトに書いていますので、参照しながら使っていくと良いかと思います。
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Documentation for the Tailwind CSS framework.

コメント

タイトルとURLをコピーしました