Laravelのプロジェクトにtailwind-ui --authを導入してみた！

はじめに

これまでLaravelでは、bootstrap-uiが多く使われてきたように思いますが、バージョン6以降ではtailwind-uiも使用できるいうことで、今回はLaravelxTailwind.cssでプロジェクトを作成したいと思い、そのためのtailwind-ui導入方法について簡単にまとめてみました。
近年話題になっているTailwind.cssを、Laravelのプロジェクトでも使用してみたいという方の参考になればと思っています。

では早速Laravelプロジェクトの作成から進めていきましょう！
すでにHomesteadなどでプロジェクト作成までできる環境が整っていることを前提にしています。
環境構築などに関しては以下の記事などが参考になりましたので、掲載させていただきます。
リンク

Laravelプロジェクトの作成

では話を戻して、Laravelプロジェクトの作成です。
私の場合、Homesteadでvagrant上にLaravelの環境を作成したので、vagrant環境上で操作を行なっていきます。
まずはsshログインを実行します。

$ vagrant ssh
Welcome to Ubuntu 20.04.2 LTS (GNU/Linux 5.4.0-73-generic x86_64)

 _                               _                 _ 
| |                             | |               | |
| |__   ___  _ __ ___   ___  ___| |_ ___  __ _  __| |
| '_ \ / _ \| '_ ` _ \ / _ \/ __| __/ _ \/ _` |/ _` |
| | | | (_) | | | | | |  __/\__ \ ||  __/ (_| | (_| |
|_| |_|\___/|_| |_| |_|\___||___/\__\___|\__,_|\__,_|

* Homestead v12.5.0 | Thanks for using Homestead
* Settler v11.4.0


Last login: Sat Sep  4 09:04:34 2021 from 10.0.2.2

ログインが成功すれば、homesteadと表示されます。
ここからプロジェクトを作成したい該当ディレクトリへと移動し、laravelプロジェクト作成のコマンドを実行してください。

# プロジェクトを作成したいディレクトリへ移動
vagrant@homestead:~$ cd code/
vagrant@homestead:~/code

# tailwindという名前のプロジェクトを作成する
vagrant@homestead:~/code$ composer create-project --prefer-dist laravel/laravel tailwind

これを実行してしばらくすると、Laravelのプロジェクトは作成されます。

tailwind-ui --authをインストールする

では、本題となるtailwind-uiをインストールしてみましょう。
みなさんbootstrap-uiの--authはインストールして実際に触ったこともあるかもしれませんが、この--authオプションをつけることで、ユーザー登録やログインなどの認証機能と、それに伴う認証画面も自動的に作成してくれます。tailwind-uiでも同様の--authオプションがあるため、認証画面の作成を行うことができます。

ではまず作成したプロジェクトに移動し、以下のコマンドでtailwind-uiをインストールします。

# 作成したプロジェクトディレクトリへ移動する
vagrant@homestead:~/code$ cd tailwind
# tailwindcssをインストールする

vagrant@homestead:~/code/tailwind$ composer require laravel-frontend-presets/tailwindcss --dev

# tailwind-ui --authを作成する
vagrant@homestead:~/code/tailwind$ php artisan ui tailwindcss --auth

# 作成が完了したらnpmコマンドを実行
vagrant@homestead:~/code/tailwind$ npm install && npm run dev

以下のログが出力されれば無事にインストールが完了しているので、プロジェクトのルートにアクセスしてみてください。

────────────────────────────────────────────────────────────────────────────────────────────────────────────┬─────────┐
│                                                                                                       File │ Size    │
├────────────────────────────────────────────────────────────────────────────────────────────────────────────┼─────────┤
│                                                                                                 /js/app.js │ 606 KiB │
│                                                                                                css/app.css │ 1 bytes │
└────────────────────────────────────────────────────────────────────────────────────────────────────────────┴─────────┘
webpack compiled successfully

npm install && npm run devでエラーが発生した場合

npm install && npm run deveのコマンド実行でエラーが発生した場合は以下のコマンドを上から順番に実行してみてください。

$ npm audit fix
$ npm audit fix --force
$ npm install
$ npm run dev

一回目の環境構築の際にエラーが発生したので、上記のコマンドを実行したところtailwind-ui --authが作成されました。

tailwind-ui --authのインストールを確認する

npmコマンドの実行まで完了すると、laravelプロジェクトのルートにブラウザでアクセスすると既に認証画面が作成されているのがわかります。
また、tailwind-uiをインストールしたことで、この後もプロジェクト内でTailwind.cssのユーティリティクラスを現時点で使えるようになっています！

実際にtailwind-ui --authで作成された認証画面がこちらです。

もともと使用していたbootstrap-ui --authでの認証画面は以下です。

まとめ

パッと見た感じでも、Bootstrapの方はいかにも「Bootstrapで作られているなぁ」感が強いです。私はこのBootstrapのなんとも言えないコンポーネントの感じがあまり好みではないので、自分の制作でもあまりBootstrapは使ってきませんでした。
それに対して、Tailwind.cssはコンポーネントよりも詳細な範囲でのスタイリングが可能で、それに応じたユーティリティクラスの方も十分に揃っていると思います。（まだ2、3の小さい自主制作で触った感想ですが...）
今回はTailwind.cssの中身については詳しく触れませんが、LaravelのプロジェクトでTailwind.cssを使ってみたいという方の参考になれば幸いです🙆🏻‍♂️

ありがとうございました😊