Creating a Laravel Project
This guide will walk you through the step-by-step process of creating a Laravel project from scratch. Laravel, a powerful PHP framework, is renowned for its elegant syntax, robust features, and developer-friendly environment.
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 laravel-tailwind
laravel-tailwind
with the desired name for your Laravel project.
3
Navigate to Laravel Project
Now that Laravel is installed, navigate to your project folder.
cd laravel-tailwind
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 laravel-tailwind
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
3
Copy Source Folder
Copy the
src
folder from the
metronic-tailwind-html
package and paste it into the
laravel-tailwind/resources
directory.
Rename the copied folder to
theme
. The directory structure should now look like this:
laravel-tailwind/resources/theme
This step imports the necessary styles and assets from the original HTML package into your Laravel project.
4
Import Styles
Open the Laravel main style file
resources/css/app.css
and add the following import statements:
// Main style
@import "../theme/css/styles.css";
// Keenicons
@import "../theme/vendors/keenicons/duotone/style.css";
@import "../theme/vendors/keenicons/filled/style.css";
@import "../theme/vendors/keenicons/outline/style.css";
@import "../theme/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/theme/core/plugins/plugin'),
require('./resources/theme/core/plugins/layouts/demo1'),
require('./resources/theme/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 '../theme/core/index.ts';
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.
9
Copy Assets folder from HTML version
Copy
metronic-tailwind-html/dist/assets
to
laravel-tailwind/public/assets
.
(Optional) Remove the
core.bundle.js
and
styles.css
files from the
laravel-tailwind/public/assets
directory.
These files have been integrated into Laravel using Vite, so they are no longer necessary.
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.