LaravelでTailwind CSSを使いたい人向けに役立つ無料テンプレートサイトをご紹介します。
デザインは出来る限り効率的にすませたいと思ったら、参考にしてください。
Laravelに組み込むときの注意点もお伝えしますね。
LaravelでTailwindを使う時役立つ無料テンプレートサイト3選
次の３つのと用途別にお見せしていきます。
- テンプレートを丸ごと使えるサイト、
- サイドバーなど部分的にテンプレートがほしい時に役立つサイト、
- 微調整をするときによいサイト
テンプレートを丸ごと使える Tailwind Toolbox
テンプレートを丸ごと使えるサイトとしては、Tailwind Toolboxがあります。
たとえば管理者用のダッシュボードを作りたいときは、検索ボックスに【Admin Template】などと入れると、候補が出てきます。
全てチェックしていませんが、見た限りでは「気に入ったら支払ってね」形式となっています。
気に入ったらコーヒー一杯おごってね、と書いてあります。
なんだか、おしゃれ。
コードはGitHubに公開されています。規約については、いくつか見た限りではMIT licenseとあります。
MITライセンスは、非常にゆるいライセンス。最低限のルールを守れば、商用利用もOKです。
MITライセンスでしていいこと、悪いことは、下記記事で具体的に解説してます。気になったら、併せて読んでくださいね。
お役立ち部品が見つかる tailwindcomponents
2つ目は、tailwindcomponents。ここは、ちょっとした「部品」の作り方を知るのに便利です。
たとえばフォームをつけたいときには、検索ボックスに「form」といれます。すると、フォーム一覧がでてきます。
Hidden Codeボタンを押すと、コードを見ることができます。
なお規約関連はサイトの下の【legal】に掲載されています。スペイン語なのですが、自動翻訳など使えば、意味が分かります。
ざっと機械翻訳をかけた限りでは、下記のような文章が入っていました。
En virtud de lo dispuesto en los artículos 8 y 32.1, párrafo segundo, de la Ley de Propiedad Intelectual, quedan expresamente prohibidas la reproducción, la distribución y la comunicación pública, incluida su modalidad de puesta a disposición, de la totalidad o parte de los contenidos de esta página web, con fines comerciales, en cualquier soporte y por cualquier medio técnico, sin la autorización de https://tailwindcomponents.com.
*引用元：tailwindcomponents legal
【日本語訳】
当然ながら、商用利用のために、コードを複製したり、販売したりするのは、ダメという事ですね。
またサイトに下に【Component copyrights belongs to their authors.】とあります。つまり、著作権は、各コンポーネントの作者に属します。
以上のことから、無料コードについて、次のような形での利用が可能です。
- コードを参考にアレンジするのはOK
- 各コンポーネントの作者のページも確認しておくと良い
- もし商用利用の点で何か気になることがあれば、作者に問い合わせる
こちらに限らずですが、無料のテンプレートを使う場合には、念のため、規約をチェックしておくことをおすすめします。
Tailwind CSS マニュアル
最後は公式マニュアルサイト。微調整をしたいときは、ここが参考になります。
たとえばフォントを大きくしたいときに検索ボックスで【font size】といれると、コードが出てきます。
検索結果はこちら。
参考：https://tailwindcss.com/docs/font-size
「ここ、ちょっと余白つけたい！」なんて時は、【margin】と検索すると、下記の表がでます。
参考：https://tailwindcss.com/docs/margin
公式サイトは、ちょっとした調整をしたいときに役立ちます。
Laravelでテンプレートを使うときに注意すべきこと
最後に、「気を付けておいたほうが良さそう！」と感じる点を２つ、お伝えします。
Laravelでは、2022年1月16日現在、普通にBreezeをインストールすると、Tailwindのバージョン3.0が入ってきます。
ただ、Web上のテンプレートはバージョン2.0で作られているものも結構あります。プロジェクトと同じバージョンのCSSを使いたい場合には、バージョン情報もチェックしておくと良いかなと思います。
またテンプレートによって組み込むのが面倒なものもあります（経験談）。このあたりも含めて、使いやすそうなものを選んでくださいね。
さいごに
Laravelでは、メインのCSSがTailwind CSSへ移行している気配があります。
Laravel BreezeやJetstreamをインストールすると、デフォルトでTailwindが入ってきます。
もしBreezeパッケージの入れ方にご興味あれば、こちらの記事もお役立てください。
「Tailwindを使っているけど、クラスの変更が反映されない！」なんて時には、こちらをどうぞ。
コメント
tailwindcomponents のライセンスについて、読んだのですがこれは、迷惑をかけないようにであれば利用可能と意味なのか、商用利用は不可なのか読み解けませでした。
いろいろ調べてみたのですが、よくわからずの状態です…
もしよろしければ、どういったライセンスなのか教えていただけますでしょうか。
よろしくお願いします。
tailwindcomponents のライセンスについて、分かりやすくなるよう
記事に追記をしました。よかったら読んでください。
ありがとうございます！
大変わかりやすく本当に助かりました！
コードが公開されているとついついコピペしたくなるのですが、コードを参考にしながら作成します！