Download
To set up the Metronic Tailwind CSS integration in Laravel, you can download the Metronic Integration Examples from our GitHub repository. These examples provide a quick way to integrate the Metronic styles into your Laravel project. This will give you a working starting point that you can customize to fit your needs.
Please note that the sample project does not include the Metronic Tailwind CSS source files by default. To integrate the styles, you need to copy the Metronic Tailwind CSS source files from your downloaded Metronic folder.
1
Copy Source Folder
Copy the
src folder from the metronic-tailwind-html package and paste it into the resources directory of your Laravel project. Rename the copied folder to metronic so that the directory structure should now look like this: resources/metronic.
2
Copy Media Folder
Copy the
media folder from the metronic-tailwind-html package's dist/assets/media directory into your Laravel project's public/assets directory. The resulting directory structure should look like this: public/assets/media.
3
Install, Compile & Start Development Server
Run the following command in the root directory of your Laravel project to install dependencies and start the development server:
npm install
npm run dev
php artisan serve
Creating a Laravel Project
This guide will walk you through the step-by-step process of creating a Laravel project from scratch.
1
Install Composer
Before creating a Laravel project, you need to have Composer installed. You can download Composer from
https://getcomposer.org/.
2
Install Laravel
Once Composer is installed, open your terminal and run the following command to install Laravel:
composer create-project --prefer-dist laravel/laravel tailwind-laravel
Replace
tailwind-laravel with the desired name for your Laravel project.
3
Navigate to Laravel Project
Now that Laravel is installed, navigate to your project folder.
cd tailwind-laravel
4
Run Laravel Development Server
To view your Laravel project in the browser, run the following command to start the development server:
php artisan serve
Open your browser and navigate to
http://localhost:8000 to see your Laravel app in action.
Integrate Styles
This guide will walk you through the step-by-step process of integrating Tailwind CSS into your Laravel project using Vite.
1
Navigate to Laravel Project
Navigate to your project folder.
cd tailwind-laravel
2
Install Dependencies
Run the following commands to install TailwindCSS and its dependencies:
npm install -D tailwindcss postcss autoprefixer sass
npm install mini-svg-data-uri @popperjs/core
npx tailwindcss init -p
The command will install the necessary dependencies for Tailwind CSS and Metronic. If you wish to use additional features like apexcharts,
axios, or clipboard, you must install them separately.
3
Copy Source Folder
Copy the
src folder from the metronic-tailwind-html package and paste it into the Laravel resources directory.
Rename the copied folder to
metronic. The directory structure should now look like this: resources/metronic
This step imports the necessary styles and assets from the original HTML package into your Laravel project.
9
Copy media folder
Copy the
media folder from the metronic-tailwind-html package's dist/assets directory into your Laravel project's assets directory.
The resulting directory structure should look like this: public/assets/media.
4
Import Styles
Open the Laravel main style file
resources/css/app.css and add the following import statements:
/* Main style */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Keenicons */
@import "../metronic/vendors/keenicons/duotone/style.css";
@import "../metronic/vendors/keenicons/filled/style.css";
@import "../metronic/vendors/keenicons/outline/style.css";
@import "../metronic/vendors/keenicons/solid/style.css";
Rename the
app.css file to app.scss. This step ensures that the styles and icon fonts are properly imported and applied to your Laravel project.
5
Configure Tailwind
Copy the
tailwind.config.js file from the metronic-tailwind-html package to the root of your Laravel project.
Edit the file and update the following content to the
content and plugins array:
// ...
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
// ...
Replace the paths to the core plugins in the
tailwind.config.js file. Replace src/core/plugins with resources/theme/core/plugins for each plugin path.
// ...
plugins: [
require('./resources/metronic/core/plugins/plugin'),
require('./resources/metronic/core/plugins/components/theme'),
// ... and so on
],
// ...
This step configures Tailwind CSS to scan and process your Laravel project files, and it also integrates additional plugins.
6
Edit app.js File
Edit the
resources/js/app.js file and add the following import statement:
// ...
import "../metronic/core/index";
import "../metronic/app/layouts/demo1";
This step ensures that core scripts are included in your Laravel project.
7
Edit vite.config.js File
Edit the
vite.config.js file and update the file reference app.css to app.scss.
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.scss', 'resources/js/app.js'],
refresh: true,
}),
],
});
8
Create index.blade.php
To set up your Laravel project with the Tailwind CSS starter template, copy the
index.html file from the metronic-tailwind-html/dist/html/demo1 directory and save it as index.blade.php in the resources/views folder. This will provide a starting point for your Laravel application.
You can ignore other assets paths for now.
In your
index.blade.php file, add the following directives:
// ...
@vite('resources/css/app.scss')
</head>
// ...
@vite('resources/js/app.js')
</body>
This step ensures that Vite can handle the JavaScript and CSS imports in your Laravel application.
10
Run Laravel Development Server
To view your Laravel project in the browser, run the following commands to start the development server:
npm run dev
In a separate terminal window, run the following:
php artisan serve
Open your browser and navigate to
http://localhost:8000 to see your Laravel app in action.
