Download
To set up the Metronic Tailwind CSS integration in Symfony, you can download the Metronic Integration Examples from our GitHub repository . These examples provide a working Symfony project using AssetMapper (no Node.js required) that you can customize to fit your needs.
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. You need to copy the Metronic assets from your downloaded Metronic folder to complete the integration.
1
Clone Integration Repository
Clone the Metronic integration repository to get the Symfony example:
git clone https://github.com/keenthemes/metronic-tailwind-html-integration.git cd metronic-tailwind-html-integration/metronic-tailwind-symfony 2
Copy Metronic Assets
Copy the
assets folder from the metronic-tailwind-html-demos/dist directory into your Symfony project's assets/assets/ directory. The resulting structure should be assets/assets/ . # From your metronic-tailwind-html distribution cp -r metronic-tailwind-html-demos/dist/assets/* metronic-tailwind-symfony/assets/assets/ # Verify the structure ls metronic-tailwind-symfony/assets/assets/ # Should show: css/ js/ media/ vendors/ styles/ 3
Install Dependencies
Install the required Symfony dependencies including AssetMapper:
# Install dependencies composer install # Install additional packages if needed composer require symfony/asset-mapper composer require symfony/twig-bundle 4
Start Development Server
Launch your Symfony application:
# Start the development server symfony serve # Or use PHP built-in server php -S localhost:8000 -t public/ Open your browser and navigate to
http://127.0.0.1:8000 to see your Symfony app. You can explore both demo layouts: # Demo 1 - Sidebar Layout http://127.0.0.1:8000/demo1/ # Demo 2 - Header Layout http://127.0.0.1:8000/demo2/ If you prefer to create a project from scratch, follow the manual setup steps in the next sections.
Create Project
This section covers creating a new Symfony project from scratch with Metronic integration. If you're new to Symfony, refer to the official Symfony documentation for detailed installation and setup instructions.
1
Install Symfony CLI
Install the Symfony CLI tool for project management. See the official installation guide for your operating system.
2
Create New Symfony Project
Create a new Symfony project with the webapp template:
# Create new Symfony project symfony new metronic-tailwind-symfony --version="7.*" --webapp # Navigate to project directory cd metronic-tailwind-symfony 3
Install Required Dependencies
Install the essential packages for Metronic integration:
# Install AssetMapper for asset management composer require symfony/asset-mapper # Install additional packages for development composer require symfony/maker-bundle --dev composer require fakerphp/faker --dev 4
Configure Environment
Set up your local environment variables:
# Copy environment configuration cp .env .env.local # Edit .env.local for your local settings # APP_ENV=dev # APP_DEBUG=true 5
Prepare Asset Directory
Create the directory structure for Metronic assets:
# Create assets directory structure mkdir -p assets mkdir -p assets/{css,js,media,vendors,styles} # Verify directory structure tree assets/ -L 3 Your Symfony project is now ready for Metronic integration. Continue to the next section to configure AssetMapper for Metronic assets.
Integrate Core
This section focuses on integrating Metronic assets using Symfony's AssetMapper component. AssetMapper provides native asset management without requiring Node.js, offering built-in versioning, import maps, and HTTP/2 optimization.
AssetMapper is Symfony's approach to asset management, replacing traditional build tools. Learn more at the official AssetMapper documentation .
1
Copy Metronic Assets
Copy Metronic distribution assets to your project:
# Copy assets from Metronic distribution cp -r /path/to/metronic-tailwind-html-demos/dist/assets/* assets/assets/ # Verify asset structure ls -la assets/assets/ # Should contain: css/ js/ media/ vendors/ styles/ 2
Update Main Asset Entry
Configure your main asset entry point in
assets/app.js : // Import main styles from assets subdirectory import './assets/styles/app.css'; // Import any additional scripts as needed console.log('Metronic Tailwind CSS ready!'); 3
Configure AssetMapper
The AssetMapper will automatically discover assets in your
assets/ directory. Verify the configuration: # Check discovered assets php bin/console debug:asset-map | head -20 # Check specific asset mapping php bin/console debug:asset-map app # Compile assets (optional for development) php bin/console asset-map:compile --dry-run 4
Create Demo Controllers
Generate controllers for your Metronic demo layouts:
# Generate controllers php bin/console make:controller Demo1Controller php bin/console make:controller Demo2Controller Configure routes in
config/routes.yaml : demo1_routes: resource: ../src/Controller/Demo1Controller.php type: attribute prefix: /demo1 demo2_routes: resource: ../src/Controller/Demo2Controller.php type: attribute prefix: /demo2 Core integration is complete! The AssetMapper will automatically handle asset versioning, caching, and HTTP/2 optimization for your Metronic assets.
Integrate Styles
This section covers converting Metronic HTML templates to Symfony Twig templates and setting up the dual layout system (sidebar and header layouts). The integration maintains Metronic's component structure while leveraging Symfony's templating capabilities.
For detailed Twig templating patterns and best practices, refer to the official Twig documentation .
1
Create Base Template Structure
Set up the template hierarchy with shared partials:
# Create template directory structure mkdir -p templates/{partials,demo1/{partials},demo2/{partials}} # Create base templates touch templates/base.html.twig touch templates/demo1/base.html.twig touch templates/demo2/base.html.twig 2
Create Shared Partials
Create reusable partials for common elements:
# Create shared partials touch templates/partials/head.html.twig # Meta tags, CSS, favicon touch templates/partials/scripts.html.twig # JavaScript includes touch templates/partials/theme-mode.html.twig # Theme mode toggle script These partials handle asset loading using Symfony's
asset() function. See the example partials in the repository. 3
Setup Demo1 Layout (Sidebar)
Configure the sidebar layout components:
# Create Demo1 layout partials touch templates/demo1/partials/sidebar.html.twig # Main navigation sidebar touch templates/demo1/partials/header.html.twig # Top header bar touch templates/demo1/partials/footer.html.twig # Page footer # Create Demo1 pages touch templates/demo1/index.html.twig The sidebar layout uses Metronic's
data-kt-drawer components for responsive navigation. 4
Setup Demo2 Layout (Header)
Configure the header layout components:
# Create Demo2 layout partials touch templates/demo2/partials/header.html.twig # Main header with logo touch templates/demo2/partials/navbar.html.twig # Navigation menu touch templates/demo2/partials/toolbar.html.twig # User toolbar touch templates/demo2/partials/footer.html.twig # Page footer # Create Demo2 pages touch templates/demo2/index.html.twig The header layout utilizes Metronic's
data-kt-header and data-kt-toolbar components for horizontal navigation. 5
Configure Asset References
Update asset paths to use the
assets/ structure: {# Example asset references in templates #} <link href="{{ asset('vendors/keenicons/styles.bundle.css') }}" rel="stylesheet"/> <link href="{{ asset('css/styles.css') }}" rel="stylesheet"/> <script src="{{ asset('vendors/apexcharts/apexcharts.min.js') }}"> </script> <script src="{{ asset('js/core.bundle.js') }}"> </script> 6
Reference HTML Layouts
Reference the original Metronic HTML layouts for conversion guidance:
# Demo1 - Sidebar Layout metronic-tailwind-html-demos/dist/html/demo1/index.html # Demo2 - Header Layout metronic-tailwind-html-demos/dist/html/demo2/index.html These HTML files contain the complete layout structures that you need to convert to Symfony Twig templates. Demo1 features a sidebar navigation layout, while Demo2 uses a header-based navigation system.
For detailed HTML-to-Twig conversion steps and complete template examples, refer to the next section and the templates directory in the repository.
Template integration complete! Your Symfony application now features both Metronic demo layouts with proper asset loading and dynamic content support.
For complete template examples and advanced component integration, explore the templates directory in the repository.
Convert Layouts
This section guides you through converting Metronic HTML layouts to Symfony Twig templates. The process involves analyzing the original HTML structure, extracting reusable components, and adapting them for Symfony's templating system while preserving Metronic's design and functionality.
This conversion process focuses on the structural transformation from HTML to Twig. For advanced Twig templating techniques, refer to the official Twig documentation .
1
Analyze HTML Structure
Examine the Metronic HTML layouts to understand their structure:
# Demo1 Structure - Sidebar Layout metronic-tailwind-html-demos/dist/html/demo1/index.html ├── <head> - Meta tags, CSS, favicon ├── <body class="demo1 kt-sidebar-fixed kt-header-fixed"> │ ├── Theme Mode Script │ ├── Sidebar (<div class="kt-sidebar">) │ ├── Header (<div class="kt-header">) │ ├── Main Content (<main class="kt-content">) │ └── Footer (<div class="kt-footer">) └── JavaScript includes # Demo2 Structure - Header Layout metronic-tailwind-html-demos/dist/html/demo2/index.html ├── <head> - Meta tags, CSS, favicon ├── <body class="[--header-height:100px]"> │ ├── Theme Mode Script │ ├── Header (<header class="h-(--header-height)">) │ ├── Main Content (<main class="flex grow flex-col">) │ └── Footer (<div class="kt-footer">) └── JavaScript includes Note the key differences: Demo1 uses a fixed sidebar with vertical navigation, while Demo2 features a horizontal header with dropdown navigation. Both layouts share common elements like head sections, theme scripts, and footer components.
2
Extract Base Template
Create shared components from common HTML elements:
# Extract shared partials from HTML head section templates/partials/head.html.twig # Meta tags, CSS links, favicon templates/partials/theme-mode.html.twig # Theme switching script templates/partials/scripts.html.twig # JavaScript includes # Create base template hierarchy templates/base.html.twig # Root template with common structure templates/demo1/base.html.twig # Demo1-specific layout templates/demo2/base.html.twig # Demo2-specific layout The base template should include the HTML5 structure, head partial, theme mode script, and JavaScript includes. Layout-specific templates extend this base and define their unique body structure.
3
Create Layout Partials
Convert layout-specific components to Twig partials:
# Demo1 Sidebar Layout Components templates/demo1/partials/sidebar.html.twig # Navigation sidebar with kt-sidebar templates/demo1/partials/header.html.twig # Top header bar with kt-header templates/demo1/partials/footer.html.twig # Page footer # Demo2 Header Layout Components templates/demo2/partials/header.html.twig # Main header with logo and navigation templates/demo2/partials/navbar.html.twig # Navigation menu components templates/demo2/partials/toolbar.html.twig # User toolbar and actions templates/demo2/partials/footer.html.twig # Page footer Each partial should preserve the original HTML structure, CSS classes, and data attributes. Focus on extracting the core layout elements while maintaining Metronic's responsive behavior and component functionality.
4
Convert Body Structure
Transform the main HTML body structure to Twig templates:
{# Demo1 Body Structure Example #} <body class="antialiased flex h-full demo1 kt-sidebar-fixed kt-header-fixed"> {{ include('partials/theme-mode.html.twig') }} <div class="flex grow"> {{ include('demo1/partials/sidebar.html.twig') }} <div class="kt-wrapper flex grow flex-col"> {{ include('demo1/partials/header.html.twig') }} <main class="kt-content flex grow flex-col"> {% block content %}{% endblock %} </main> {{ include('demo1/partials/footer.html.twig') }} </div> </div> </body> {# Demo2 Body Structure Example #} <body class="antialiased flex h-full [--header-height:100px]"> {{ include('partials/theme-mode.html.twig') }} <div class="flex grow flex-col"> {{ include('demo2/partials/header.html.twig') }} <main class="flex grow flex-col"> {% block content %}{% endblock %} </main> {{ include('demo2/partials/footer.html.twig') }} </div> </body> 5
Handle Asset References
Update all asset paths to work with Symfony's AssetMapper:
{# Convert HTML asset references to Symfony asset() function #} <!-- Original HTML --> <link href="assets/vendors/keenicons/styles.bundle.css" rel="stylesheet"/> <script src="assets/js/core.bundle.js"> </script> <!-- Converted Twig --> <link href="{{ asset('vendors/keenicons/styles.bundle.css') }}" rel="stylesheet"/> <script src="{{ asset('js/core.bundle.js') }}"> </script> {# Update image sources #} <!-- Original HTML --> <img src="assets/media/app/default-logo.svg"/> <!-- Converted Twig --> <img src="{{ asset('media/app/default-logo.svg') }}"/> Verify that all converted assets load correctly by checking the AssetMapper configuration and testing the compiled templates in your Symfony application.
Layout conversion complete! Your Metronic HTML layouts are now fully integrated as Symfony Twig templates with proper asset handling and component structure.
For complete converted template examples and advanced integration patterns, explore the templates directory in the repository.
