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

スポンサーリンク
WEB開発

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]」を行わずに実行結果を見てみると色が変わっていない(CSSが反映されていない)ように見えるっていうオチでした。

そんな設定どこに?

その設定は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」とするようにしましょう。

以上です。

暇な時間にU-NEXT

今なら無料1ヶ月無料トライアル600円分の有料コンテンツを使えるチャンス!

見放題作品が31日間無料で視聴可能最新作はレンタル配信!

600円分のポイントプレゼント!DVD・ブルーレイよりも先行配信の最新作、放送中ドラマの視聴や最新コミックの購入に使用可能

 

追加料金なく、80誌以上の雑誌が読み放題

WEB開発
スポンサーリンク
uediveをフォローする
SEの休日

コメント

タイトルとURLをコピーしました