Laravel Mix に Tailwindcss をインストールする

はぁ……これをなぜ書いているのか自分でもよくわからないけれど、Nuxt.jsでフロントエンドを作らず、Laravelだけで作業するときはMixを使わなければならない。何度か作業することになりそうなので、ここにまとめて書いておいて、何度も見返せるようにしておこう。 ``` yarn add tailwindcss --dev yarn add @tailwindcss/ui --dev ``` ``` npx tailwindcss init ``` app.scss ファイルに以下の内容を追加 ``` @tailwind base; @tailwind components; @tailwind utilities; ``` webpack.mix.js ファイルの内容を以下のように修正 ``` const tailwindcss = require('tailwindcss') mix.js('resources/js/app.js', 'public/js'); mix.sass('resources/sass/app.scss', 'public/css') .options({ processCssUrls: false, postCss: [ tailwindcss('./tailwind.config.js') ], }); ``` ``` yarn run prod ``` これで、public/css/app.css に tailwindcss が追加される。 わあ……Laravel Mixを使わなくなってから……もうほぼ1年になる気がする……（単に作業自体をしていないだけなんだけど……） でも、これからいくつか作業する中で、全部をNuxt.jsで作業するのは無理があるし、簡単なものはLaravelだけで全部処理するので、またMixを使う予定だ。 おしまい。 ![](/storage/media/97/conversions/image-45-1024x926-webp.webp) 支払ったものをそのまま使ってみた…… ……実はページはいらないんだけど……ただ作業してみただけ……次の作業では、もう少し詳しい内容を扱えたらいいな。 ## Alpine.js を追加…… ``` yarn add alpinejs --dev ``` app.js ``` require('./bootstrap'); import 'alpinejs' ```

Laravel Mix に Tailwindcss をインストールする

ほかの記事

Alpine.js を追加……#