Download
Download the Metronic Integration Examples to get started.
This integration example uses .NET 9.0 (ASP.NET Core).
Download the Metronic Integration Examples from our GitHub repository .
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
metronic-tailwind-html
folder to the project root and rename it to
metronic
.
2
Copy Media Folder
Copy the
media
folder from
metronic/dist/assets
to
wwwroot/
.
3
Adjust javascript output path
Update
webpack.vendors.js
to output assets to
wwwroot
:
module.exports = {
output: "../wwwroot/assets",
...
};
4
Adjust css output paths
Update Tailwind output paths in
package.json
to output to
wwwroot
.
"build:css": "npx tailwindcss -i ./src/css/styles.css -o ../wwwroot/assets/css/styles.css",
"build:css:watch": "npx tailwindcss -i ./src/css/styles.css -o ../wwwroot/assets/css/styles.css --watch",
"build:prod": "npx tailwindcss -i ./src/css/styles.css -o ../wwwroot/assets/css/styles.css --minify && npx webpack --env production",
5
Install Packages & Build Assets
Navigate to the metronic directory:
cd metronic
Install packages and build assets:
npm install & npm run build
6
Run Development Server
Start the development server:
dotnet run watch
That's it! The Metronic Tailwind template is now integrated into your ASP.NET Core project.
Creating Project
Create an ASP.NET Core project from scratch.
1
Install Node.js, Npm and .NET
Ensure you have Node.js, npm, and .NET 9.0 installed on your machine.
2
Create Asp.Net-Core Project
Create new Asp.Net-Core project using the following command.
dotnet new mvc -n metronic-tailwind-aspnet-core
4
Serve the Asp.Net-Core Application
Run the development server with the following command:
dotnet run watch
Wait for the app to display that it's listening on
http://localhost:[port
number]
and for the browser to launch at that address.
Integrate Assets
Integrate Metronic assets into your ASP.NET Core project.
1
Copy Source Folder
Copy the
metronic-tailwind-html
folder to the project root and rename it to
metronic
.
2
Copy Media Folder
Copy the media folder from
metronic/dist/assets
and paste it into the
wwwroot/
directory.
3
Adjust javascript output path
Modify the
webpack.vendors.js
file to make webpack output assets to
wwwroot
folder:
module.exports = {
output: "../wwwroot/assets",
...
};
4
Adjust css output paths
Update tailwind output paths in
package.json
to output build styles to
wwwroot
.
"build:css": "npx tailwindcss -i ./src/css/styles.css -o ../wwwroot/assets/css/styles.css",
"build:css:watch": "npx tailwindcss -i ./src/css/styles.css -o ../wwwroot/assets/css/styles.css --watch",
"build:prod": "npx tailwindcss -i ./src/css/styles.css -o ../wwwroot/assets/css/styles.css --minify && npx webpack --env production",
4
Install Packages & Build Assets
Open your terminal and navigate to the metronic directory:
cd metronic
Install the necessary npm packages and build the theme assets by running the following command:
npm install & npm run build
