Tutorial · AMP
React & Tailwind Client Extensions Guide
Build React Client Extensions by compiling your React app into standard web components. Isolate Tailwind CSS classes using scoped styles or shadow DOM wrappers to prevent layout clashes with Lexicon.
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.
Read the full article, with table of contents, comparison table, and author bio →