Laravelと相性がいいCSSを紹介！
- 2021.08.11
- Laravel
- Laravel, Tailwindcss, フレームワーク
Laravelを自作するときに、まずLayoutのテンプレートを用意しようと思った。そのときに、「あれっ、CSSってどうしたらいいんだ」ってなったから、調べたやつ。
Tailwindcssを使おう！
結論はTailwindcssというCSSのフレームワークを利用しよう！インストールする方法は以下の記事を参照！
このフレームワークを使えば、短いコードで簡単にCSSを反映させることができる。
Laravel-mixを準備する方法
あまりよく分かってないけど、Laravel-mixっていうLaravelと相性がいいやつがあるみたい。それを準備する方法を教えるよ！
次のコマンドをターミナルで実行します。
|
1 2 3 |
% npm install tailwindcss % npm install % npm run dev |
recources > css > app.cssに以下のコードを追加する。
|
1 2 3 |
@tailwind base; @tailwind components; @tailwind utilities; |
同様に、webpack.mix.jsに以下のコードを追加する。
|
1 2 3 4 5 |
mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ // 以下を追加する require('tailwindcss') ]); |
ターミナルで再度、以下のコマンドを入力する。
|
1 |
% npm run dev |
これを実行すると、public > css > app.cssにTailwindcssが記述されるようになる。
最後にこれをlinkタグでフロントエンドに持ってくる必要がある。Laravelで実行する場合は以下。
|
1 |
<link rel="stylesheet" href="{{ asset('css/app.css') }}"> |
これで準備万端！素敵なプログラミングライフをっ！
-
前の記事
Laravelでアプリケーションを開発するときの大まかな流れ 2021.08.11
-
次の記事
【ど基礎】仮想化・Dockerについて 2021.09.24