[ 目次 ]

• はじめに
• Tailwind CSSインストール
• Tailwind CSSの初期設定
• laravel-mix のbuild設定を変更
• エントリーポイント（`resources/assets/sass/app.scss`）で、Tailwind CSSを読み込む

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

現在運用を担当しているLaravel案件ですが、CSSフレームワークが導入されておらず冗長な状態で、新しい画面を作るのが大変です・・・
なので、今回は既存のLaravelプラジェクトにTailwind CSSを導入してみました。
以前の投稿「LaravelにTailwind CSSを導入する 」で、新規LaravelプロジェクトにTailwind CSSを導入する方法をまとめました。
その時と一部手順が異るため、振り返りつつまとめていきます

LaravelにTailwind CSSを導入する

■ 検証環境

PHP	Laravel	Tailwind CSS
^7.2.4	5.5.*	0.7.4

■ 前提条件
既存のLaravelプロジェクトはSass（Scss）でスタイルを定義し、エントリーポイントは、resources/assets/sass/app.scssとします。

Tailwind CSSインストール

■ npmを利用する場合

$ npm install tailwindcss --save-dev

■ yarnを利用する場合

$ yarn add tailwindcss --dev

Tailwind CSSの初期設定

Tailwind CSSの設定ファイルを生成します。公式ドキュメントのこちら の内容になります。

$ ./node_modules/.bin/tailwind init

プロジェクトルートに tailwind.js が生成されます。
tailwind.js というファイル名がデフォルトになります。変更したい方は、

$ ./node_modules/.bin/tailwind init [filename]

のようにファイル名を指定してください。
ファイルの内容は今回変更しません。生成されたファイルをご確認ください。

laravel-mix のbuild設定を変更

Sassを利用しながらTailwind CSSを読み込むので、webpack.mix.jsの設定を以下のように変更します。

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.js') ],
    })
;
mix.version();

optionsでTailwindCSSの設定をしています。設定は TailwindCSS公式 - Laravel Mix を参考にしました。
tailwind.jsのパスはwebpack.mix.jsからみた相対パスを指定しています。webpack.mix.jsと同じディレクトリに配置しているので、./tailwind.jsとしています。

エントリーポイント（resources/assets/sass/app.scss）で、Tailwind CSSを読み込む

以下のようにapp.scssに@tailwindの定義を追加します。

// 以下の３行を追加
@tailwind preflight;
@tailwind components;
@tailwind utilities;


@import '_utility/_margin.scss';
@import '_utility/_padding.scss';
・・・

これでTailwind CSSのclassが読み込まれるようになりました。
あとは、blade内で定義していくだけです！