If you are building hybrid applications with Drupal with embedded Javascript applications you have probably been confronted with re-using your styles across multiple applications.

Building consistent user interfaces when mixing frontend technologies can be challenging. This is especially true, if your display components are partly coming from a design system library.

However, if you use tailwind as your CSS framework you can setup your projects to share generated styles and re-use them across the integrated projects.

In this workshop we will implement a create Drupal page and style it using tailwind css. Then we will inject a React app on the page that reuses the existing styles. Both the React app and the Drupal page contain web components that also use the same styles.

We will show how to use a single tailwind configuration, including plugins, css extending files, encapsulation, presets and much more, in order to provide all our UIs with the same look and feel, minimising your css output and boosting development and solution performance.

Attendees will learn on a high level how tailwind works.
More importantly they will learn how to set up tailwind to be reusable across different technologies on the same website.

Lastly attendees will get a good overview of how to use web components in Drupal pages and in React applications.

Workshop (45 minutes)

Experience level of the audience

Intermediate