HelpBot Assistant

How can I help you?

Integrate Tailwind preflight into the Angular Rich Text Editor

11 Feb 202615 minutes to read

Tailwind CSS preflight provides a modern baseline of styles that resets browser defaults and establishes a consistent foundation for your application. This guide explains how to integrate Tailwind preflight with the Syncfusion Angular Rich Text Editor while preserving the editor’s styling and functionality.

Prerequisites

Before proceeding, ensure you have completed the base Rich Text Editor setup described in the Getting Started guide. The guide covers Angular CLI setup, package installation, CSS imports, module injection, and basic editor markup: Getting Started with Angular Rich Text Editor.

Key features

Browser normalization: Resets inconsistent default browser styles (margins, headings, lists, form elements) to a predictable baseline.
Sensible typography defaults: Provides reasonable defaults for headings, paragraphs, lists, blockquotes, and code blocks so content displays consistently.
Easy to override: Rules are intentionally minimal and can be overridden or extended to match your design system.
Component compatibility: Safe to layer component or theme styles on top (import component styles after Preflight when necessary).
Predictable form styling: Normalizes form elements so utilities and component styles behave consistently across browsers.

Setup or Installation

Install the required packages for Tailwind CSS using the following commands:

npm install -D tailwindcss

Configure tailwind preflight for the Rich Text Editor

Step 1: Add Tailwind directives to your styles

In your global styles file (src/styles.css), add the Tailwind directives:

/* Tailwind CSS directives */
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

Step 2: Isolate Tailwind preflight from editor content

To prevent Tailwind Preflight from affecting the Rich Text Editor’s content area, add the preflight‑reset CSS directly into app.css or styles.css

.e-rte-content li {
    margin-bottom: 10px !important;
    padding: unset !important;
}

.e-rte-content ul {
    list-style-type: disc !important;
    padding: unset !important;
    margin-left: 40px;
}

.e-rte-content ol {
    list-style-type: decimal !important;
    padding: unset !important;
    margin-left: 40px;
}

.e-rte-content ul[style*="list-style-type: circle"]{
    list-style-type: circle !important;
    padding: unset !important;
    margin-left: 40px;
}

.e-rte-content ul[style*="list-style-type: square"]{
    list-style-type: square !important;
    padding: unset !important;
    margin-left: 40px;
}

.e-rte-content ol[style*="list-style-type: upper-alpha"]{
    list-style-type: upper-alpha !important;
    padding: unset !important;
    margin-left: 40px;
}

.e-rte-content ol[style*="list-style-type: lower-alpha"]{
    list-style-type: lower-alpha !important;
    padding: unset !important;
    margin-left: 40px;
}

.e-rte-content ol[style*="list-style-type: upper-roman"]{
    list-style-type: upper-roman !important;
    padding: unset !important;
    margin-left: 40px;
}

.e-rte-content ol[style*="list-style-type: lower-roman"]{
    list-style-type: lower-roman !important;
    padding: unset !important;
    margin-left: 40px;
}

.e-rte-content ol[style*="list-style-type: lower-greek"]{
    list-style-type: lower-greek !important;
    padding: unset !important;
    margin-left: 40px;
}

Example: Integrate tailwind css with syncfusion Rich Text Editor

Here’s a complete working example demonstrating Tailwind preflight integration with the Angular Rich Text Editor:

app.ts
main.ts
app.css
styles.css
import { RichTextEditorModule } from '@syncfusion/ej2-angular-richtexteditor';
import { Component, ViewEncapsulation } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [ RichTextEditorModule],
    standalone: true,
    selector: 'app-root',
    styleUrl: 'app.css',
    encapsulation: ViewEncapsulation.None,
    template: `<ejs-richtexteditor></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService],
})
export class App {
}
import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app.component';
import 'zone.js';

bootstrapApplication(App).catch((err) => console.error(err));
.e-rte-content li {
    margin-bottom: 10px !important;
    padding: unset !important;
}

.e-rte-content ul {
    list-style-type: disc !important;
    padding: unset !important;
    margin-left: 40px;
}

.e-rte-content ol {
    list-style-type: decimal !important;
    padding: unset !important;
    margin-left: 40px;
}

.e-rte-content ul[style*="list-style-type: circle"]{
    list-style-type: circle !important;
    padding: unset !important;
    margin-left: 40px;
}

.e-rte-content ul[style*="list-style-type: square"]{
    list-style-type: square !important;
    padding: unset !important;
    margin-left: 40px;
}

.e-rte-content ol[style*="list-style-type: upper-alpha"]{
    list-style-type: upper-alpha !important;
    padding: unset !important;
    margin-left: 40px;
}

.e-rte-content ol[style*="list-style-type: lower-alpha"]{
    list-style-type: lower-alpha !important;
    padding: unset !important;
    margin-left: 40px;
}

.e-rte-content ol[style*="list-style-type: upper-roman"]{
    list-style-type: upper-roman !important;
    padding: unset !important;
    margin-left: 40px;
}

.e-rte-content ol[style*="list-style-type: lower-roman"]{
    list-style-type: lower-roman !important;
    padding: unset !important;
    margin-left: 40px;
}

.e-rte-content ol[style*="list-style-type: lower-greek"]{
    list-style-type: lower-greek !important;
    padding: unset !important;
    margin-left: 40px;
}
@layer theme, base, components, utilities;
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css';

Configuring Tailwind CSS Preflight Styles with the Iframe editor

When the Rich Text Editor is running in iframe mode ([iframeMode]="true"), the editable content is rendered inside a separate document. Tailwind’s preflight does not automatically apply inside that iframe — you must inject the editor-specific reset rules into the iframe head so content renders as expected.

Step 1: Enable iframe mode

Enable iframe editing using iframeSettings and include the editor reset stylesheet via styles so the CSS is injected automatically into the iframe head. See the full IFrame guide: IFrame Editing Mode.

Template (bind iframeSettings):

<ejs-richtexteditor id="tailwindRTE" [iframeSettings]='iframe'></ejs-richtexteditor>

Component example (app.ts):

public iframe: IFrameSettingsModel = { 
    enable: true, 
    resources: {
        styles:['../styles.css']
    }
};

Notes: Using iframeSettings.styles is the preferred approach — Syncfusion will load the listed CSS files into the iframe automatically.

Step 2: Add Tailwind directives to your global styles

In src/styles.css include Tailwind directives and import Syncfusion theme after them so component styles override preflight where needed:

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

Step 3: Isolate Tailwind preflight from editor content

To prevent Tailwind Preflight from affecting the Rich Text Editor’s content area, add the preflight‑reset CSS directly into styles.css

body.e-content li {
    margin-bottom: 10px !important;
    padding: unset !important;
}

body.e-content ul {
    list-style-type: disc !important;
    padding: unset !important;
    margin-left: 40px;
}

body.e-content ol {
    list-style-type: decimal !important;
    padding: unset !important;
    margin-left: 40px;
}

body.e-content ul[style*="list-style-type: circle"]{
    list-style-type: circle !important;
    padding: unset !important;
    margin-left: 40px;
}

body.e-content ul[style*="list-style-type: square"]{
    list-style-type: square !important;
    padding: unset !important;
    margin-left: 40px;
}

body.e-content ol[style*="list-style-type: lower-greek"]{
    list-style-type: lower-greek !important;
    padding: unset !important;
    margin-left: 40px;
}

body.e-content ol[style*="list-style-type: upper-alpha"]{
    list-style-type: upper-alpha !important;
    padding: unset !important;
    margin-left: 40px;
}

body.e-content ol[style*="list-style-type: lower-alpha"]{
    list-style-type: lower-alpha !important;
    padding: unset !important;
    margin-left: 40px;
}

body.e-content ol[style*="list-style-type: upper-roman"]{
    list-style-type: upper-roman !important;
    padding: unset !important;
    margin-left: 40px;
}

body.e-content ol[style*="list-style-type: lower-roman"]{
    list-style-type: lower-roman !important;
    padding: unset !important;
    margin-left: 40px;
}

Example: Integrate Tailwind CSS with Syncfusion Rich Text Editor in iframe mode

app.ts
main.ts
styles.css
import { IFrameSettingsModel, RichTextEditorModule } from '@syncfusion/ej2-angular-richtexteditor';
import { Component, ViewEncapsulation } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [ RichTextEditorModule],
    standalone: true,
    selector: 'app-root',
    styleUrl: 'app.css',
    encapsulation: ViewEncapsulation.None,
    template: `<ejs-richtexteditor [iframeSettings]='iframe'></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService],
})
export class App {
  public iframe: IFrameSettingsModel = { enable: true, resources: {
    styles:['../styles.css']
  } };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app.component';
import 'zone.js';

bootstrapApplication(App).catch((err) => console.error(err));
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css';

body.e-content li {
    margin-bottom: 10px !important;
    padding: unset !important;
}

body.e-content ul {
    list-style-type: disc !important;
    padding: unset !important;
    margin-left: 40px;
}

body.e-content ol {
    list-style-type: decimal !important;
    padding: unset !important;
    margin-left: 40px;
}

body.e-content ul[style*="list-style-type: circle"]{
    list-style-type: circle !important;
    padding: unset !important;
    margin-left: 40px;
}

body.e-content ul[style*="list-style-type: square"]{
    list-style-type: square !important;
    padding: unset !important;
    margin-left: 40px;
}

body.e-content ol[style*="list-style-type: lower-greek"]{
    list-style-type: lower-greek !important;
    padding: unset !important;
    margin-left: 40px;
}

body.e-content ol[style*="list-style-type: upper-alpha"]{
    list-style-type: upper-alpha !important;
    padding: unset !important;
    margin-left: 40px;
}

body.e-content ol[style*="list-style-type: lower-alpha"]{
    list-style-type: lower-alpha !important;
    padding: unset !important;
    margin-left: 40px;
}

body.e-content ol[style*="list-style-type: upper-roman"]{
    list-style-type: upper-roman !important;
    padding: unset !important;
    margin-left: 40px;
}

body.e-content ol[style*="list-style-type: lower-roman"]{
    list-style-type: lower-roman !important;
    padding: unset !important;
    margin-left: 40px;
}

Additional Resources

GitHub Repository: Angular Rich Text Editor Examples
Tailwind CSS Preflight Reference: https://tailwindcss.com/docs/preflight
Angular Rich Text Editor Documentation: https://ej2.syncfusion.com/angular/documentation/rich-text-editor/getting-started

Search docs

Ask HelpBot