In this section we will see how to easily integrate tailwind css admin dashboard in laravel 9 inertia vue 3 using Larastarters. Larastarters is a regular Laravel Starter Kit with a non-regular different design theme. Works only with the latest Laravel 9. The package suggests to install Laravel Breeze (Tailwind) or Laravel UI (Bootstrap) starter kit, and adds the chosen design theme on top.
Tool Use
Laravel 9 & Vite 3
Laravel Breeze Inertia Vue 3
Tailwind CSS 3.v with Form Plugin
Create laravel project
composer create-project laravel/laravel inertia-dashboard
Now, fill the details in env file.
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password
Install Larastarters
composer require laraveldaily/larastarters --dev
Run below command to choose the starter kit and the theme (options are listed below).
php artisan larastarters:install
Now Select breeze inertia with Tailwind CSS (Select number 1).
Which Laravel starter kit you want to use? [Laravel Breeze (Tailwind)] Laravel Breeze (Tailwind) ............................................................. 0 Laravel Breeze & Inertia (Tailwind) ..............................................1 Laravel UI (Bootstrap) .......................................................................2 ❯ 1
After selecting number 1, Next Select tailwind css admin design theme(0,1,2).
Which design theme you want to use? [windmill]
windmill ...................................................................... 0
notusjs ....................................................................... 1
tailwindcomponents ............................................................ 2
❯ 2
Install npm dependencies and run vite
npm install && npm run dev
and also run in next terminal run laravel server
php artisan serve
resources/js/Pages/Dashboard.vue
<template>
<Head title="Dashboard"/>
<BreezeAuthenticatedLayout>
<div class="w-full px-4">
<div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg">
<div class="flex-auto p-4">
You are logged in!
</div>
</div>
</div>
</BreezeAuthenticatedLayout>
</template>
<script>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue'
import { Head } from '@inertiajs/inertia-vue3';
export default {
components: {
BreezeAuthenticatedLayout,
Head,
},
}
</script>