Laravel8✖️Reactアプリにtailwindcssを導入する手順

前置き

公式ドキュメントにフレームワーク・ライブラリ別でインストール方法がわかりやすく記載されているドキュメントがありました。

tailwindは、あらかじめ用意されたclass名をhtmlに適用することで、基本的にはcssファイルの管理やクラス名の設計に時間を取られることがなくなる便利なcssフレームワークです。

本記事では、Laravel✖️Reactアプリにtailwindを導入する方法について紹介します。

tailwindをインストール

postcssはNode.js製のモジュールでCSSをコンパイルできるツールです。

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

tailwindのconfigファイルを作成

下記コマンドを実行すると、configファイルが作成されます

npx tailwindcss init

tailwindのconfigファイルを編集

purgeは、設定したファイルに対し、実際に使用されているcssを抽出し、必要のないcssを削除してくれる機能です。(ビルド高速化、ファイルサイズの縮小が期待できる)

tailwind.config.js

module.exports = {
  purge: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.jsx",
  ],
};

webpack.mix.jsを修正

Laravel Mixを使用してフロントエンドをコンパイル・バンドルしているので、
webpack.mix.jsを編集する

Laravel Mixとは、フロントエンドのアセットをコンパイル、バンドルしてくれるツール
で、ツールの中身はwebpackを利用している

webpack.mix.js

mix.js("resources/js/index.js", "public/js")
.react()
// .sass('resources/sass/app.scss', 'public/css');
.postCss("resources/css/app.css", "public/css", [require("tailwindcss")]);

cssにtailwindを読み込み

resources/css/app.cssにtailwindをインクルードする

resources/css/app.css

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

cssをreactにインポート

resources/css/app.cssをapp.jsにインポートする

resources/css/app.css

require("./bootstrap");
import React from"react";
import ReactDOM from"react-dom";
import"../css/app.css";

if (document.getElementById("root")) {
  ReactDOM.render(
    document.getElementById("root")
  );
}

以上です。次回は実際の使用方法について説明していければと思います。

まとめ

いかがでしたでしょうか。tailwindは、あらかじめ用意されたclass名をhtmlに適用することで、基本的にはcssファイルの管理やクラス名の設計に時間を取られることがなくなる便利なcssフレームワークです。本記事では、Laravel✖️Reactアプリにtailwindを導入する方法について紹介します。