Laravel7にTailwindcssを導入する

Tailwindcssは２種類使い方がある。

Tailwindcssは２種類使い方がある。

• CDNから読み込む
• ビルドして利用する
  • nodejsを利用する
  • ビルドすることにより、必要最低限のCSSができあがり、サイトへのアクセス速度が早くなる

ビルドして利用するために、ローカルにTailwindcssの環境を作る.

Laravelの最新版へのTailwindcssの導入方法公式

Laravelの最新版へのTailwindcssの導入方法は、Tailwindcssの公式ページに載っている

Install Tailwind CSS with Laravel - Tailwind CSS

Setting up Tailwind CSS in a Laravel project.

tailwindcss.com

しかしながらいま僕が勉強で使っているLaravel7については載っていない。
※Laravel7は2022年11月28日でサポートが終了しているので、本番で使わないように！

Laravel7へのTailwindcss導入方法は？

そこで疑問が湧いたが、

TailwindのsrcなどのディレクトリはLaravelのフォルダのどこに配置すれば良いのか？

調べたので以下に手順をメモする。

TailwindcssをLaravel7に導入する手順

上述の答え：

Laravelのプロジェクトフォルダ直下で作成していけば良い。

以下、手順。

tailwindcssを導入する。

ローカル環境で、（サーバー環境でも良いが）
Laravelのプロジェクトフォルダ直下で、

npm install tailwindcss

↓

Laravelのプロジェクトフォルダ直下で、
Tailwind CSSの設定ファイルtailwind.config.jsを作成。

npx tailwindcss init

↓

resources/sass/app.scss

を編集。

以下を追記する。

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

↓

/tailwind.config.js を編集。

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

purge: [

の中に記述するPathは、未使用のClassを削除するPathを指定している。

↓

webpack.mix.jsファイルを編集する。

Laravel Mixを使ってTailwind CSSをビルドするように設定します。このファイルもプロジェクトのルートディレクトリにあります。

(→Bing AI)

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

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

↓

ビルド実行。

npm run dev

ここで「.vue」をつけておらず以下のエラーが出た。
（webpack.mix.jsファイルの内容は上述の通りで大丈夫だよ。.vue付いているからね。）

ERROR in ./resources/js/components/ExampleComponent.vue

↓

Qiita見て、.vueを追記して、再度npm run dev して、解決

↓

• resources/sass/app.scss

が作成されてればオッケーだぜ！

参考

Qiita

ちなみにcssをビルドするコマンド：

npm run dev

→開発用ビルド

npm run watch

→自動ビルド

npm run build

→本番用ビルド