はじめに

「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 を使っている方はぜひ導入してみてください！

Laravel に Preline UI を導入する方法

はじめに

Preline UI とは？

導入方法

まとめ