Breadcrumb arrow Back to Code Examples

Angular Rich Text Editor With Tailwind Preflight Integration

Sample date Updated on Feb 10, 2026
Browse Code Git logo Download
angular angular-rich-text-editor ej2 htmleditor rich-text-editor tailwind

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

Up arrow