Posts

Tailwind and Flowbite in Liferay

Image
  Tailwind and Flowbite in Liferay Incorporating Tailwind Design System and Flowbite Components to Liferay 7.4 Introduction Liferay has its own design system based on Lexicon Design and Clay Components. For regular use cases, they can satisfy customer needs, and user interfaces can be built by using out-of-the-box components. But for more sophisticated user interfaces an external design system might be needed. TailwindCSS is one of the most popular CSS frameworks, and Flowbite is a components library based on TailwindCSS. This articles shows how to incorporate TailwindCSS / Flowbite to Liferay 7.4. TailwindCSS & Flowbite Integration Step 1: Standalone Configuration Before integrating to Liferay you can install & configure TailwindCSS and Flowbite separately. Note : but do this inside Lifeary workspace for future integration. Create a folder for TailwindCSS/Flowbite, e.g. lifedev-flowbite-loader. Install TailwindCSS TailwindCSS can be installed by leveraging Tailwind CLI, or can