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
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.
