Laravel Tailwind CSSでcomponentボタンの色変更が反映されない理由と対策

Laravel Breeze

Laravel BreezeやJetstreamでは、デフォルトでTailwind CSSがついてきます。

resources/views/componentsの中には、ボタンなど ビュー部分の各種部品が入っています。

このcomponentsを使う時に、クラスを一部だけ、自分で変えたいこともありますよね。

resources/views/components/button.blade.phpを使うときは、次のようにします。

デフォルトのボタンの色は黒色ですが、たとえば、緑色にしたいとします。

その場合、次のようにクラスを入れます。

これで無事ボタンの色が変われば良いのですが、変わらないことがあります。

こういった時の原因と対策を解説します。

Laravel Tailwind CSSでボタンの色などが反映されない理由

この場合、Google Chromeのデベロッパーツールで、該当箇所をチェックしてみてください。

該当のボタンを選択して右クリックして、「検証」を選択してくださいね。

【要素】と【スタイル】の部分を見てみます。

【要素】の部分には、追加したスタイルが入っているのに、【スタイル】では取消線が入っていたりしませんか?

取消線が入ったスタイルは、複数のスタイルが指定された結果、優先順位の低い指定が反映されなくなった状態です。

スタイルの優先順位としては、後で読み込まれたほうが優位になるはず。なので、後から指定したクラスのほうが適用されると考えられます。

ただ、何らかの事情で、優先順位が変わってしまうことがあるのかもしれません。

このような時に、指定したスタイルが反映される方法を解説します。

Laravel Tailwind CSSでボタンの色などが反映されない対策

対策としては、自分で新しくクラスを作り、このクラスが後から読み込まれるようにすることです。

そのために、まず、ボタン箇所に myclass クラスを追記します。

次に、resources/css/app.cssを開きます。

ここに、下記のように myclass を指定します。

【resources/css/app.css】

あとは npm run dev または npm run watchを実行します。

ボタンの色が無事変わったか確認してください。

さいごに

Tailwind CSSトラップ、無事解決したら嬉しいです。

なお、LaravelでTailwind CSSが反映される仕組みについては、下記記事で説明しています。

Junko
Junko

記事の中頃に「Laravel Tailwind CSS が反映される仕組み」が入ってます。併せて参考にしてくださいね。

Laravel Breeze Laravel・PHP豆知識・トラブル対策

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

社内にWebアプリ開発経験がなくて、困ってませんか?

「自社でWebアプリ開発を始めていきたい」
という企業様のために、Laravelセミナー・プログラミング教育を実施しています。

【セミナー使用スライド】

詳細はこちらご覧ください

Twitter始めました。
40代からプログラミング!

コメント

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