WEB開発

【Laravel8 × Tailwind】背景色とかいろいろ反映されない？

[affi id=2]

Tailwind

Laravel8.xにてCSSフレームワークであるTailwindが使われるようになったみたいです。

全く触ったことのなかった（聞いたこともなかった）ため勉強を始めていますが、普通に触っているときに 「bg-red-400」 というClassを付けても背景色が変わらないことがありました。今回はその原因がわかったので備忘がてらに残しておきます。

npm run [prod/dev]

いつも開発するときに恥ずかしながら区別をつけずに「npm run prod」を使ってしまっていました。

おそらく同じような状況になっている人はこれを使っているのではないでしょうか。

Tailwindでは「npm run prod」でビルドしたときには設定ファイルに書かれている対象ファイルに存在しないスタイルを削除してサイズを小さくしてくれているみたいです。

PERFORMANCE

It’s tiny in production.

Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be. In fact, most Tailwind projects ship less than 10KB of CSS to the client.

https://tailwindcss.com/

そのせいでXXX.blade.phpを書き換えて「npm run [prod/dev]」を行わずに実行結果を見てみると色が変わっていない（ＣＳＳが反映されていない）ように見えるっていうオチでした。

そんな設定どこに？

その設定は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: {
        opacity: ['responsive', 'hover', 'focus', 'disabled'],
    },

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

このファイルのpurge:[ ...の部分が使用されているスタイルを探す対象になっていると思われます。

Laravel8.xでは初期状態でresouces/views/**/*.blade.phpも対象になっているため反映されてないように見えてました。。

しっかり使い分けましょう

いつも何気なく適当に「npm run prod」をして開発時の確認をしていましたが、実際の本番環境に置くとき以外は「npm run dev」とするようにしましょう。

以上です。

-WEB開発