【備忘録】Laravel8 tailwindをsassで使う

---

１． npmを使ってtailwindのインストール

※確かJetStreamをインストールすると一緒についてくるので不要な場合スキップ
※dockerを使用してる場合は適切なコンテナの中でnpmコマンドを使うこと（ローカルで叩いたり、間違ったコンテナで叩いてハマったので）

$ npm install tailwindcss

---

２． 設定用ファイルを作成

$ npx tailwind init

プロジェクトのルートディレクトリにtailwind.config.jsが出来上がる

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    purge: [
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    variants: {
        extend: {
            opacity: ['disabled'],
        },
    },

    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};

---

3. webpack.mix.jsを編集

tailwind.config.js

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');//追記



mix.sass('resources/sass/app.scss', 'public/css')
    .options({ 
        processCssUrls: false, //公式ドキュメント参照
        postCss: [ tailwindcss('./tailwind.config.js') ], 
    }); 

    //　JetStreamインストール時に生成されてた書き換え前の内容
    //
    // .postCss('resources/css/app.css', 'public/css', [
    //     require('postcss-import'),
    //     require('tailwindcss'),
    //     require('autoprefixer'),
    // ])

if (mix.inProduction()) {
    mix.version();
}

---

4. resource/sass/app.scssを編集（追加）

app.scss

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

---

5. ビルドする

//変更をリアルタイムに表示
$ npm run watch

//押すたび変更を表示
$ npm run dev

---

参考

公式ドキュメント
https://tailwindcss.com/
公式ドキュメント（日本語）
https://tailwindcss-ja.entap.app/

---