タグ: Tailwindcss

Laravelを自作するときに、まずLayoutのテンプレートを用意しようと思った。そのときに、「あれっ、CSSってどうしたらいいんだ」ってなったから、調べたやつ。

Tailwindcssを使おう！

結論はTailwindcssというCSSのフレームワークを利用しよう！インストールする方法は以下の記事を参照！

https://sunablog.tokyo/2021/08/09/post-2150/

このフレームワークを使えば、短いコードで簡単にCSSを反映させることができる。

Laravel-mixを準備する方法

あまりよく分かってないけど、Laravel-mixっていうLaravelと相性がいいやつがあるみたい。それを準備する方法を教えるよ！

次のコマンドをターミナルで実行します。

% npm install tailwindcss
% npm install
% npm run dev

recources > css > app.cssに以下のコードを追加する。

@tailwind base;
@tailwind components;
@tailwind utilities;

同様に、webpack.mix.jsに以下のコードを追加する。

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        // 以下を追加する
        require('tailwindcss')
    ]);

ターミナルで再度、以下のコマンドを入力する。

% npm run dev

これを実行すると、public > css > app.cssにTailwindcssが記述されるようになる。

最後にこれをlinkタグでフロントエンドに持ってくる必要がある。Laravelで実行する場合は以下。

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

これで準備万端！素敵なプログラミングライフをっ！