2. Frameworks
  3. Symfony AssetMapper

Installation

Install Preline UI with Symfony AssetMapper using Tailwind CSS

Setting up Preline UI in a Symfony AssetMapper project using Tailwind CSS.

Installation

This guide assumes you already have Symfony with AssetMapper and Tailwind CSS configured. If you need help with the initial setup, check out the Symfony AssetMapper and Symfony TailwindBundle documentation.

Quick Symfony AssetMapper setup

Modern PHP web application framework with built-in asset management. This guide assumes you already have Symfony with AssetMapper and Tailwind CSS configured. If you need help with the initial setup, check out the Symfony AssetMapper and Symfony TailwindBundle documentation.

  1. Install Preline UI

    Install preline via npm in your existing Symfony project with AssetMapper.

    Terminal 
    					  
						  npm install preline

    Please note, Preline UI uses Tailwind CSS Forms plugin in all form components. Don't forget to install it, if you haven't done so already: npm install -D @tailwindcss/forms

  2. Copy Required Preline Files

    Copy the essential Preline UI files from node_modules to your local assets/vendor/preline/ directory. AssetMapper only reads from local assets directories, not from node_modules.

    Terminal 
    					  
              # Create vendor directory
              mkdir -p assets/vendor/preline
              
              # Copy essential Preline files
              cp node_modules/preline/preline.js assets/vendor/preline/
              cp node_modules/preline/variants.css assets/vendor/preline/
              cp -r node_modules/preline/src/plugins assets/vendor/preline/src/

    Please note, AssetMapper only reads from local assets directories, not from node_modules. This approach copies only the essential files needed for Preline UI functionality.

  3. Configure CSS and JavaScript Integration

    Update your CSS and JavaScript files to import and initialize Preline UI components.

    assets/styles/app.css 
    					  
              @import "tailwindcss";
              @import 'preline/variants.css';

              /* Preline Themes */
              @import "./themes/theme.css";

    Check out the Theme docs to learn more about Preline Themes.

    assets/app.js 
    							
                import './styles/app.css';
                import 'preline';

                // Initialize Preline components
                document.addEventListener('DOMContentLoaded', () => {
                  window.HSStaticMethods.autoInit();
                });

  4. Configure AssetMapper Importmap

    Update your importmap.php file to include Preline UI JavaScript and CSS assets.

    importmap.php 
                  
                return [
                  'app' => [
                    'path' => './assets/app.js',
                    'entrypoint' => true,
                  ],
                  'preline' => [
                    'path' => './assets/vendor/preline/preline.js',
                  ],
                  'preline/variants.css' => [
                    'path' => './assets/vendor/preline/variants.css',
                    'type' => 'css',
                  ],
                ];

  5. Include AssetMapper in Your Twig Template

    Add the AssetMapper importmap to your base Twig template to load all JavaScript and CSS assets.

Optional Preline UI Styles

Please note, Preline UI comes with some opinionated styles that are applied to components by default. If you want these styles in your project, you may include them into your CSS file. These styles used to come by default in Tailwind v3, so we decided to keep them in Preline UI.

CSS 
					  
              /* Adds pointer cursor to buttons */
              @layer base {
                button:not(:disabled),
                [role="button"]:not(:disabled) {
                  cursor: pointer;
                }
              }

              /* Defaults hover styles on all devices */
              @custom-variant hover (&:hover);