Docs
Framework Guides
Symfony AssetMapper

Install Preline UI with Symfony AssetMapper using Tailwind CSS

Install Preline UI with Tailwind CSS in Symfony AssetMapper projects, including JavaScript plugin setup, AssetMapper imports, and optional dependencies.

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.

Symfony AssetMapper quick setup

Start with a Symfony project that already has AssetMapper and Tailwind CSS configured, then add Preline UI and its local asset copies.

Install Preline UI

Install preline with your preferred package manager in your existing Symfony project.
Terminal
```
                          
                            npm install preline
                          
                        
```
Preline UI uses the Tailwind CSS Forms plugin across form components. Install it if you have not already: npm install -D @tailwindcss/forms

Copy Preline files into local assets

Copy the required Preline UI files from node_modules into assets/vendor/preline/, since AssetMapper only reads from local asset directories.

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/

AssetMapper does not read directly from node_modules, so this copy step keeps the required Preline files available to your app locally.

Configure CSS and JavaScript imports

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

assets/styles/app.css

                          
                            @import "tailwindcss";
                            @import 'preline/variants.css';

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

See 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();
                            });

Update the AssetMapper importmap

Add the Preline UI JavaScript and CSS entries to importmap.php.

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',
                              ],
                            ];

Load the importmap in Twig

Render the AssetMapper importmap in your base Twig template so Symfony can load the configured JavaScript and CSS assets.
<!doctype html> <html> <head> {# ... #} {{ importmap('app') }} </head> <body> {# Your content #} </body> </html>
```
                          
                        
```

Optional Preline UI styles

Preline UI ships with a small set of opinionated base styles. If you want them in your project, add them to your CSS file. These defaults used to come bundled with Tailwind CSS v3, so they are still available as an optional layer 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);

Symfony AssetMapper quick setup