Zenn
😺

Laravel6.*にTailwind CSSを導入する

2022/01/03に公開
Laravel
Tailwind CSS
tech

環境

Laravel: 6.20.32
Tailwind CSS: 3.0.8
laravel-mix: 6.0.18
webpack-cli: 4.5.0
webpack: 5.9.0

Tailwind CSSをインストール

$ npm install tailwindcss

設定ファイルの作成

Tailwind CSSのインストール完了後、設定ファイルを作成。
こちらでカスタマイズが行えます。

$ npx tailwind init
  
✅ Created Tailwind config file: tailwind.config.js

設定ファイル（tailwind.config.js）の編集

contentの項目にTailwindCSSのスタイルを参照するファイルを全て記述します。
(バージョン2系の場合はpurge)
※この記述がないとTailwindCSSは反映されません。

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

webpack.mix.jsファイルの更新

webpack.mix.js
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

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

Laravel Mixの更新

Laravel Mix6系〜　scriptsの書き方が異なります。

package.json
"scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production
	}

app.scssファイルの更新

8系からデフォルトでTailwindCSSが搭載されているそうです。
6系はbootstrapがデフォルトなのでbootstrapの記述はコメントアウトして構いません。

app.scss
// Tailwond CSS
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

npm run watchコマンドを実行してビルドを行い、tailwindの設定が反映されているのか確認を行います。(npm run watchコマンドで反映されない場合は、npm run watch-pollコマンド)

$ npm run watch

正しく反映されれば、TailWind CSSの導入が完了です！

もし、正しく行えない場合
各種パッケージ同士のバージョンの互換性がない可能性があります！
package.jsonでインストールされているバージョンの互換性を確認し、再度インストールを行ってください。

npmを再度インストールする際の手順

// node_modulesを削除
$ rm -rf node_modules

// バージョン情報を削除
$ rm package-lock.json

// npmのキャッシュをクリア
$ npm cache clear --force

$ npm install

引用

LaravelでTailwindCSSを使う方法
LaravelでのTailwind CSSの設定方法

Discussion