はじめに
「Laravel で作った Web アプリケーションのスタイル整えるのだるいな～」と思って、いいテンプレートがないか探していたところ『Preline UI』というものを発見しました。
本記事ではこの Preline UI の導入についてまとめてみようと思います。
Preline UI とは？
Preline UI は、Tailwind CSS を使用して作成された、モダンでシンプルなデザインの UI ライブラリです。
Preline UI には、フォーム、ボタン、カード、ナビゲーション、アラート、モーダルなどのコンポーネントが含まれており、これらのコンポーネントは、Web アプリケーションやウェブサイトを構築するためのツールとして使用することができます。
Tailwind CSS は、CSS フレームワークであり、事前に定義されたスタイルとユーティリティを提供することにより、開発者がスタイリングに時間を費やすことなく、素早くモダンなデザインを実現することができます。
Preline UI は、Tailwind CSS を使用して簡単にカスタマイズすることができ、プロジェクトのニーズに合わせてスタイルを調整することができます。また、Preline UI はオープンソースであり、誰でも自由に使用することができます。
現在、150 種類以上のページやフォームのテンプレートがあり、これらをコピペで簡単に使うことができます。
こんな感じのトップページや...
こんなテーブルをコピペで作れます！
導入方法
-
Preline UI をインストール
# npm または yarn 経由で インストール npm install preline // or yarn add preline -
Preline UI JavaScript パスを構成する
tailwind.config.js// ファイルに Preline UI JavaScript ファイルへのパスを追加 module.exports = { content: [ 'node_modules/preline/dist/*.js', ], plugins: [ require('preline/plugin'), ], } -
プレライン UI JavaScript を追加する
/resources/js/app.js//アプリのエントリ ポイントに Preline UI JavaScript を追加 import('preline') -
スクリプトのロード
/resources/views/index.html<!-- Viteエントリーポイントの設定が完了したら、 アプリケーションのルートテンプレートの<head>に追加した@vite() Bladeディレクティブでそれらを参照させます。 <head> の最後らへんに追加すればおけ --> <!doctype html> <head> {{-- ... --}} @vite(['resources/css/app.css', 'resources/js/app.js', 'resources/js/index.js', 'resources/css/index.css']) </head>
まとめ
今回はLaravelに導入する例を紹介しましたが、React, Vue.js, Next.js, Nuxt.js, Angular, Astro など他のフレームワークでも使えます！
簡単にモダンなページを作れるので、Tailwind CSS を使っている方はぜひ導入してみてください！