バックエンド

【Laravel】で【tailwindcss ver3】が適用されるようになった件

Udemyでリリースしている、
『Laravelマルチログイン』の講座について、

講座を受講頂いている方より質問が届いていました。

受講者
tailwindcssが反映されるものと反映されないものがあるんです。。

始めは個別の環境が原因かなと思ったんですが、
その後も数名から同じような質問が届くように。

アオキ
もしかすると『tailwindcss』のバージョンが変わったのかも知れないな・・

と確認すると思ったとおりで。

今回時間をとって対応策を収録したので、

あわせてブログにもアップすることにしました。

tailwindcss ver3の特徴

『tailwindcss ver3』の最も大きな特徴として、

『Just In Time機能』があげられます。

必要なものを、必要なときに、必要なだけという考え方です。

以前のver2は、一旦全てのCSSクラスを用意して、
そこから不要なクラスをパージするという流れだったのですが、

『Just In Time』の場合は、
使われていればCSSファイルに出力するという形式に変わっています。

毎回パージするよりも早く、無駄なく開発する事ができるようになっています。

php artisan serveだけでは適用されない

便利な『Just In Time』機能ですが、

『Laravel』で用意されている『php artisan serve』の簡易サーバーでは機能しません。

『php artisan serve』はあくまで、『Laravel』側の機能であって、フロント側の機能ではないためです。

適用するには『Node.js』側の機能である、

『npm run dev』や『npm run watch』などを実行する事で、

『Just In Time』機能が働き、使われているクラスが出力されるという流れになります。

Laravelでtailwindcss ver3で開発するコツ

毎回『npm run dev』を実行するのも手がかかってしまうので、オススメの方法としては、

ターミナルを2つないし3つ立ち上げて、それぞれコマンドを実行しておくとやりやすいです。

  • ターミナル1・・npm run watchで常時監視
  • ターミナル2・・php artisan serveで簡易サーバー
  • ターミナル3・・Laravelの各コマンドを実行

とすることで、多少PCメモリを消費はしますが、効率的に開発を進めることができるようになります。

Laravelとtailwindcss講座について

2022年1月には『Larvel 9』時期安定版がリリースされますので、
リリースされ次第内容を確認しますが、
これまで通り『tailwindcss』が採用されるとは思われます。

リリースされ次第、『Udemy』の講座改善、別講座作成なども対応していきます。

『tailwindcss』はこれからますます使われるようになっていくと予想されますので、

『Laravel』共々『tailwindcss』講座も定期的にチェック、更新していきますので、

興味があればぜひそちらもご参考にしていただければと思います。

アオキ
ウェブの世界は本当に早いので、乗りこなせるようにしっかりチェックしておきます!

無料公開分にしたのでYoutubeにもアップしました。

PHP/Laravel講座




関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

アーカイブ

  1. CG関連

    【P5.js】初心者向けの動画をリリースしました(プログラミング×数学物理)【U…
  2. バックエンド

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  3. オンライン教材

    【PHP/Laravel】初心者向けの動画をリリースしました【Udemy】
  4. オンライン教材

    【ExcelVBA】初心者向け講座をリリースしました。【Udemy】
  5. オンライン教材

    【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【t…
PAGE TOP