Laravel6でTailwindcssを使おうとしたら大変だった

laravel
スポンサーリンク

はじめに

こんにちは、せぃゆーです。

Laravel6でTailwindcssをインストールしようとしたらエラーでうまくいかなかったが、なんとか解決できたので自分なりの解決策を書こうと思います

出力されるエラー

Error: PostCSS plugin posModule build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin postcss-purgecss requires PostCSS 8.

どうやらPostCSS 8が必要らしい(この辺よくわかってないです。)

解決策

プロジェクト作成/laravel/uiのインストール/vueインストール

この部分は今回の件とは関係ないので特に説明は行わず次に行きます

php artisan ui vue –authはログイン機能が欲しいだけなのでbootstrapでも問題ないです。

(最終的にはTailwindcssを使いのでテンプレートの書き換えは必要になります)

cd my-project
composer create-project --prefer-dist laravel/laravel . "6.*"
composer require laravel/ui:^1.0 --dev
php artisan ui vue --auth

bootstrapはいらないので削除

  • ./resources/sass/_variables.scssの削除
  • ./resources/sass/app.scssからbootstrapの記述削除
  • ./package.jsonから削除
  • ./resources/js/bootstrap.jsのbootstrapの読み込みを削除

./resources/sass/app.scssからbootstrapの記述削除

--- ./resources/sass/app.scss
+++ ./resources/sass/app.scss
@@ -1,9 +1,4 @@
 // Fonts
 @import url('https://fonts.googleapis.com/css?family=Nunito');

-// Variables
-@import 'variables';
-
-// Bootstrap
-@import '~bootstrap/scss/bootstrap';

./package.jsonから削除

--- ./package.json
+++ ./package.json
@@ -11,7 +11,6 @@
     },
     "devDependencies": {
         "axios": "^0.19",
-        "bootstrap": "^4.0.0",
         "cross-env": "^7.0",
         "jquery": "^3.2",
         "laravel-mix": "^5.0.1",

./resources/js/bootstrap.jsのbootstrapの読み込みを削除

--- ./resources/js/bootstrap.js
+++ ./resources/js/bootstrap.js
@@ -10,7 +10,6 @@
     window.Popper = require('popper.js').default;
     window.$ = window.jQuery = require('jquery');

-    require('bootstrap');
 } catch (e) {}

 /**

bootstrapを削除したのでいったんnpm install

npm install

 Tailwindと必要なパッケージの追加

  • Tailwindcss
  • postCSS8
  • postCSS8を使うためにlaravel-mix6(ベータ版) 6がでてました
  • 使用していないcssを削除するpurgecss(laravel-mix-purgecss)

Laravel-mixを5 -> 6にすることでpostCSS8に対応できるらしい

npm install tailwindcss postcss@^8.1 laravel-mix@^6 laravel-mix-purgecss --save-dev

Tailwindのコンフィグファイル作成

npx tailwindcss init

webpack.mix.jsを修正

  • Tailwindcssを使う準備
  • Laravel-mix6ではVueの利用を明示的に記載
  • purgecssの追加

./resources/sass/app.scssにTailwind追加

--- ./resources/sass/app.scss
+++ ./resources/sass/app.scss
@@ -1,3 +1,7 @@
 // Fonts
 @import url('https://fonts.googleapis.com/css?family=Nunito');

+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";

laravelmix6ではVueの使用を明示的に記載/purgecssでファイルを小さく

--- ./webpack.mix.js
+++ ./webpack.mix.js
@@ -1,4 +1,6 @@
 const mix = require('laravel-mix');
+const tailwindcss = require('tailwindcss');
+require('laravel-mix-purgecss');

 /*
  |--------------------------------------------------------------------------
@@ -12,5 +14,10 @@
  */

 mix.js('resources/js/app.js', 'public/js')
-   .sass('resources/sass/app.scss', 'public/css');
+    .vue()
+    .sass('resources/sass/app.scss', 'public/css')
+    .options({
+      processCssUrls: false,
+      postCss: [ tailwindcss('./tailwind.config.js') ],
+    })
+    .purgeCss();

laravel-mix6用にpackage.jsonを修正

--- ./package.json
+++ ./package.json
@@ -2,12 +2,12 @@
     "private": true,
     "scripts": {
         "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "npm run development -- --watch",
-        "watch-poll": "npm run watch -- --watch-poll",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "development": "mix",
+        "watch": "mix watch",
+        "watch-poll": "mix watch -- --watch-options-poll=1000",
+        "hot": "mix watch --hot",
         "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --config=node_modules/laravel-mix/setup/webpack.config.js"
+        "production": "mix --production"
     },
     "devDependencies": {
         "axios": "^0.19",

npm run dev / npm run prodでビルドできるか確認しましょう

まとめ

私の環境ではひとまずこれでTailwindcssが使えるようになりました。

Laravel-Mixを6にする影響などがはっきりしていませんが、とりあえずこれで進めようと思います。

コメント