Main Answer: Building Liferay Client Extensions with React and Tailwind CSS enables developers to compile modern web elements and deploy them dynamically into portal layouts.
Audience: Frontend developers, portal designers, and client extension developers.
Applicable Use Cases: Building responsive portal widgets, custom dashboards, and modern user-facing forms.
| Vite Build Output | YAML Mapping Type | Liferay Portal Result |
|---|---|---|
| dist/assets/index.js | custom-element type asset | Loads React runtime and mounts custom selector tag |
| dist/assets/index.css | custom-element CSS asset | Applies compiled Tailwind styling rules to container shadow DOM |
| dist/assets/logo.png | static-resource type asset | Hosts logos and media files on portal local web path |
Compiling React Custom Elements
Define your component. Register it using customElements.define. When Liferay encounters your
HTML tag, it mounts the React application inside the node, executing state logic locally.
Scoping Tailwind CSS Rules
To avoid portal style pollution, wrap your widget inside a Shadow DOM container. Configure Tailwind to compile under a prefix tag, letting you style your component freely.
How Do You Define Extension Metadata inside the YAML Manifest?
Direct Answer: Create a liferay-client-extension.yaml manifest, declaring the custom element name, HTML selector tag, and file references.
Register scripts in a client-extension.yaml file. Specify build entry points, friendly URLs, and
target custom elements, letting Liferay map your widgets to page slots.
The manifest configures how Liferay registers your web components. Include CSS and JS links, mapping paths to compiled distribution folders.
Frequently Asked Questions
Does Tailwind CSS clash with Liferay Clay styles?
Tailwind can override Clay rules. Add a custom selector prefix in your Tailwind configuration to scope styles to your widget.
Where are React scripts hosted?
You can host scripts on Liferay's static server (as Client Extensions) or reference them from external CDN endpoints.
Written by Ankita Varani
Ankita Varani is a certified Liferay Solutions Architect with 12+ years of experience in enterprise portal migrations and decoupled system designs.