Laravel7にTailwindcssを導入する

Laravel
スポンサーリンク

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

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

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

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

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

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

Install Tailwind CSS with Laravel - Tailwind CSS
Setting up Tailwind CSS in a Laravel project.

しかしながらいま僕が勉強で使っている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

→本番用ビルド

コメント