Angular Rich Text Editor with Tailwind Preflight integration

A minimal Angular sample demonstrating how to integrate Tailwind's Preflight (base) styles with the EJ2 Angular Rich Text Editor. This repo contains two example approaches: a global "preflight" integration and an iframe-based integration.

Quick start

Prerequisites:

• Node.js 20.x (recommended). Also supported: Node.js 22.x or 24.x
• npm

Install dependencies and run the app for the sample you want to try:

Preflight (global Tailwind base styles):

cd tailwind-default
npm install
ng serve

Iframe approach (editor content scoped inside an iframe):

cd tailwind-iframe
npm install
ng serve

Open http://localhost:4200/ in your browser.

What this sample shows

• How to configure Tailwind (v3) in an Angular app and include the @tailwind base (Preflight) directives.
• How to integrate Tailwind Preflight with the EJ2 Angular Rich Text Editor so editor content uses Tailwind base styles.
• Comparison of two approaches: applying Tailwind globally (tailwind-default) vs. scoping styles inside an iframe (tailwind-iframe).
• Minimal Angular build and configuration adjustments required to make Tailwind + EJ2 styles coexist.

References

• Integration UG: tailwind Integration with Angular Rich Text Editor
• Documentation - Getting Started
• Full Featured Demo: Angular Rich Text Editor Overview sample